[JavaScript] ES6 추가 문법들

구조분해할당 (Destructuring)

배열이나 객체의 요소, 속성을 분해해서 그 값을 변수에 담을 수 있도록 함

 

배열

let arr = [1, "new"];
let [value1, value2] = arr;

console.log("value1: ", value1);  // value1: 1
console.log("value2: ", value2);  // value2: new


// 분해하려는 구조보다 더 많은 변수에 할당하려는 경우
let arr = [1, "new"];
let [value1, value2, value3] = arr;

console.log("value1: ", value1);  // value1: 1
console.log("value2: ", value2);  // value2: new
console.log("value3: ", value3);  // value3: undefined

분해하려는 구조보다 더 많은 변수에 할당하려는 경우, 할당해줄 값이 없기때문에 undefined를 확인할 수 있다. 이런 경우를 대비하여 초기값을 설정할 수 있다!

 

let arr = [1, "new"];
let [value1, value2, value3 = 3] = arr;

console.log("value1: ", value1);  // value1: 1
console.log("value2: ", value2);  // value2: new
console.log("value3: ", value3);  // value3: 3

value3에 초기값 3을 지정해주었으며, arr에는 세번째 요소가 없어 초기값을 확인할 수 있다.

초기값이 있더라도 요소를 할당하는 것이 그 이후 과정이므로 arr에 세번째 요소가 있다면 세번째 값을 확인할 수 있다.

 

 

객체

let { name, age } = {
  name: 'Kim',
  age: 30,
};

console.log(name);  // Kim
console.log(age);  // 30

key와 같은 이름의 변수에 할당할 경우 위와 같이 사용하면 된다.

만약 다른 이름의 새로운 변수에 할당하고 싶은 경우 아래와같이 사용하자!

 

let user = {
  name: 'Kim',
  age: 30,
};

let { name: userName, age: userAge, birthday: userBirthday = "today" } = user;

console.log(userName);  // Kim
console.log(userAge);  // 30
console.log(userBirthday);  // today -> 할당할 수 있는 기존 속성이 없으므로 기본값 할당

 

 

단축속성명 (Property shorthand)

객체의 key, value를 지정할 때 key와 value의 이름이 같으면 생략하여 작성할 수 있음

const name = 'Kim';
const newAge = 30;

const obj = {
  name: name,
  age: newAge,
};

const obj2 = {
  name,  // key와 value로 대입할 변수명이 같다면 생략 가능
  age: newAge,
}

const obj3 = { name, newAge };  // obj3의 keys가 name, newAge인 경우 속성을 모두 단축하여 적어줄 수 있음

 

 

전개 구문 (Spread operator)

배열의 요소, 객체의 속성들의 값을 가져와야할 때 사용할 수 있음

let arr = [1, 2, 3];
let newArr = [...arr, 4];  // [1, 2, 3, 4]

let user = {
  name: 'Kim',
  age: 30,
};

let user2 = { ...user };  // { name: 'Kim', age: 30 }

 

 

나머지 매개변수 (Rest parameter)

함수를 선언할 때 매개변수의 수가 변할 수 있는 경우 사용할 수 있음

function exFunc(a, b , c, ...args) {
  console.log(...args);
  console.log(args);
}

exFunc(1, 2, 3, 4, 5, 6);
// 4 5 6
// [4, 5, 6]

앞서 선언된 매개변수들(예시에서 a, b, c)를 제외하고 추가로 들어온 매개변수들을 모두 포함하는 것이므로, 나머지 매개변수는 마지막 매개변수여야 한다.

 

 

템플릿 리터럴 (Template literal)

`${ }` 를 사용해 문자열 내부에 Javascript 코드, 변수 등을 사용할 수 있음

또한 백틱은 여러줄을 표현하는 것이 가능하다.

const message = "안녕하세요.";

console.log(`${message} 2 + 3 = ${2 + 3}`);