자바스크립트 최신 문법 (ES6, ES11) 정리(추가중)

1. Shorthand property names

obj의 key와 value가 동일하면 하나로 쓸 수 있다.

bad

const name = 'daisy'; 
const age = '20'; 
const daisy1 = { 
    name: name,
    age:name 
};

good

const daisy2 = { 
    name, 
    age 
};

• Shorthand property names

 

2. Destructuring Assignment

• 구조분해할당
• 배열, 객체 모두 사용 가능
• 공식 문서에 내용이 더 많음

bad

//array 
const first = animals[0]; 
const second = animals[1]; 
//object 
const name = student.name; 
const level = student.level;

good

//array 
const[first, second] = animals; 

//object 
const {name, level} = student; 
//변수명을 key와 다르게 하고 싶은 경우 
const {name: studentName, level: studentLevel} = student;

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

tmp변수 없이 둘의 값을 바꾸기

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

• Destructuring Assignment

 

3. Spread Syntax

• 전개구문.
• 배열/객체와 같이 반복 가능한 것들의 item들의 요소 하나 하나 복사해올 수 있음

함수 호출에서의 전개

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

배열 리터럴에서의 전개

• 배열 복사

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

* 하지만 다차원 배열일 경우 전개구문이 적합하지 않을 수 있음. Object.assign() 와 동일한 문제점이 있다.

var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// 이제 배열 a 도 영향을 받음: [[], [2], [3]]

• 배열 병합

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨

• Spread Syntax

 

4. Default parameters

• 함수에 인자에 전달된 값이 없거나 undefined가 전달될 경우 않는다면 default값을 사용함

function multiply(a, b) {
  return a * b
}

multiply(5, 2)  // 10
multiply(5)     // NaN !

위와같이 인자를 하나만 넘긴다면 a*undefined로 NaN(Not a Number)가 리턴된다.

하지만 default parameters를 사용하면 함수 내에서 별도의 undefined검사를 하지 않아도 오류 방지가 가능하다.

function multiply(a, b = 1) {
  return a*b
}

multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

• Default parameters

 

5. Optional Chaining

• 상위값이 null 또는 undefined가 아닐 때 하위 값으로 접근한다. (오류 방지)
• Optional chaining

let nestedProp = obj.first?.second;

. 대신에 ?. 연산자를 사용함으로써, 자바스크립트는 obj.first.second에 접근하기 전에 obj.first가 null 또는 undefined가 아니라는 것을 암묵적으로 확인하는 것을 알고 있다. 만약 obj.first가 null 또는 undefined이라면, 그 표현식은 자동으로 단락되어 undefined가 반환된다.

이는 다음과 같다:

let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);

 

6. Nullish coalescing operator

• 널 변합 연산자 (??)
• 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환함

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

• Nullish coalescing operator

이 연산자는 default값 설정이나 오류 방지를 위해 주로 사용하는 ||(OR연산자) 의 문제점을 해결해 줄 수 있다.

let count;
let text;
...
count = 0;
text = "";
...
let qty = count || 42;
let message = text || "hi!";
console.log(qty);     // 42 and not 0
console.log(message); // "hi!" and not ""

위 코드를 보면 ||연산자는 피연산자를 boolean값으로 형변환하는데 0이나 ""와 같이 false값으로 변환되기 때문에 변수에 값 할당을 해 주었음에도 원하는 결과가 나타나지 않는다.

 

 

참고사이트:

https://velog.io/@dami/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B5%9C%EC%8B%A0-%EB%AC%B8%EB%B2%95-ES6-ES11-%EB%B3%B5%EC%8A%B5