🔔 구조 분해 할당

객체나 배열에서 데이터를 가져와 변수에 할당하는 새로운 방법입니다.
할당 연산자를 기준으로 좌측에는 값을 할당받을 변수를, 우측에는 객체, 배열, 이터러블... 을 놓습니다.

배열 분해

let arr = ["Bora", "Lee"]

// 구조 분해 할당!
// firstName, surname 이라는 변수에 각각 arr[0], arr[1] 의 값 할당
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

• 기본값은 undefined (배열에서 값 할당 못 받아도 에러 ❌)
• 쉼표 , 는 요소 무시하기
• ... 는 나머지 요소 모두 가져오기
  • ... 와 함께 쓰인 변수는 나머지 모든 요소를 가지는 배열이 됨

객체 분해

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

let {title, width, height} = options;

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

배열은 순서대로 값을 할당하지만, 객체 분해는 변수 이름과 key 의 이름이 일치하는대로 값을 할당합니다.

• 프로퍼티가 없는 경우를 대비하여, = 으로 기본값 할당 가능
• ... 는 나머지 프로퍼티 모두 가져오기
  • ... 와 함께 쓰인 변수는 나머지 모든 프로퍼티를 가지는 객체가 됨

중첩 구조 분해

중첩 구조로 이루어진 객체나 배열도 분해하여 가져올 수 있습니다.

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

함수 매개변수로 활용

구조 분해 할당을 함수 매개변수에 적용하면 아주 편리합니다.
함수에 매개변수를 하나하나 넘기지 않고, 객체 자체만 매개변수로 넘겨주면 알아서 매개변수에 필요한 값을 객체에서 가져갑니다.

// 함수에 전달할 객체
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// 똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 객체 options에서 가져옴
  // width, height – 기본값
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

options 객체에서 title, items 를 가져가고, options 에 없는 프로퍼티는 기본값을 사용합니다.

그런데, options 가 빈 객체도 아니고 아예 없다면 문제가 발생할 수 있습니다.
따라서 다음과 같이 {} 를 인수 전체의 기본값으로 만들어 사용합니다.

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}
// 아무 인수도 전달받지 못하면 {} 를 받은걸로 처리
// title, width, height 프로퍼티가 없으니 지정된 기본값을 따라감

showMenu(); // Menu 100 200