구조 분해 할당(destructuring)

구조 분해 할당 구문

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.
• 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법.
• 함수에 객체나 배열을 전달해야 하는 경우. 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우.

할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣는다.

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

let {title, width, height} = options;

console.log(title);  // Menu
console.log(width);  // 100
console.log(height); // 200

프로퍼티 options.title과 options.width, options.height에 저장된 값이 상응하는 변수에 할당된 것을 확인 가능하다.

---

let 없이 사용하기

let으로 새로운 변수를 선언하지 않고 기존에 있던 변수에 분해한 값을 할당할 수도 있는데, 이때는 주의할 점이 있다.

잘못된 코드:

let title, width, height;

// SyntaxError: Unexpected token '=' 이라는 에러가 아랫줄에서 발생한다.

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

자바스크립트는 표현식 안에 있지 않으면서 주요 코드 흐름 상에 있는 {...}를 코드 블록으로 인식한다. 코드 블록의 본래 용도는 아래와 같이 문(statement)을 묶는 것이지만 위쪽 예시에선 구조 분해 할당을 위해 사용한 {...}를 자바스크립트가 코드 블록으로 인식해서 에러가 발생했다.

{
  // 코드 블록
  let message = "Hello";
  // ...
  alert( message );
}

에러를 해결하려면 할당문 전체를 괄호(...)로 감싸서 자바스크립트가 {...}를 코드 블록이 아닌 표현식으로 해석하게 해야한다.

let title, width, height;

// 에러가 발생하지 않음.
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

---

문제
구조 분해 할당을 사용해 아래 미션을 수행해 보세요.

let user = {
  name: "John",
  years: 30
};

name 프로퍼티의 값을 변수 name에 할당하세요.
years 프로퍼티의 값을 변수 age에 할당하세요.
isAdmin 프로퍼티의 값을 변수 isAdmin에 할당하세요. isAdmin이라는 프로퍼티가 없으면 false를 할당하세요.

let user = {
  name: "John",
  years: 30
};

let {name, years: age, isAdmin = false} = user;

alert( name ); // John
alert( age ); // 30
alert( isAdmin ); // false