한 자료형에 국한된 개념도 아니고, 다양하게 변조되어 쓰이고 있기에 하나의 챕터로 분리하였습니다.

구조분해할당이란

풀어 말하면 어떠한 자료형 '구조'를 '분해'하여 '할당'해 주는 것입니다. 파괴하는 것이 아니기에 기존 자료형 구조가 변경될 염려는 없으며, 할당 연산자 우측에는 모든 이터러블이 올 수 있고, 좌측에도 할당 받을 수 있는 것이라면 무엇이든 올 수 있습니다.

rest parameter

...variableName으로 나머지 요소를 한 번에 가져옵니다.
variableName은 배열을 가져왔을 땐 배열로, 객체를 가져왔을 땐 객체로 갖고 있습니다.

// 배열
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// `rest`는 배열 입니다.
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

// 객체
let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 이름이 title인 프로퍼티
// rest = 나머지 프로퍼티들
let {title, ...rest} = options;

// 이제 title은 "Menu", rest는 {height: 200, width: 100} 입니다.
alert(rest.height);  // 200
alert(rest.width);   // 100

default parameter

할당할 값이 없을 경우, 에러가 나지 않고 undefined가 할당됩니다. 이 때, undefined가 아닌 특정 값을 넣고 싶을 때 =defaultValue를 사용하여 기본값을 정할 수 있습니다. defaultValue에는 값도 되지만 복잡한 표현식이라 함수 호출도 가능합니다.

// surname의 prompt만 실행됨
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius (배열에서 받아온 값)
alert(surname); // prompt로부터 받아온 값

배열 분해하기

인덱스를 이용하여 배열에 접근하지 않아도 배열 값을 얻을 수 있습니다.

let arr = ["Ilya", "Kantor"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;

alert(firstName); // Ilya
alert(surname);  // Kantor

쉼표를 사용하여 해당 인덱스를 건너뛸 수 있습니다.

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

객체 분해하기

키 값을 매개로 객체 값을 얻을 수 있습니다.
할당 연산자 우측엔 분해할 객체를, 좌츠엔 객체 프로퍼티 패턴을 넣습니다.

키와 값이 같다면 한 번만 적으면 됩니다.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

다른 프로퍼티 키값으로 저장하고 싶다면 :variableName으로 작성합니다.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200