1. Destructuring assignment?

구조화된 배열과 같은 이터러블 또는 객체를 destructuring(구조 분해)하여 1개 의상의 변수에 개별적으로 할당하는 것을 말한다.

주로 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

1-1 배열 구조분해할당

• 우변은 이터러블이어야 함
• 할당의 기준은 배열의 인덱스

//길이가 같을 필요는 없음
const[a,b,c] = [1,2];

//기본값 설정가능
const [a,b,c = 3] = [1,2];

-> 1 2 3
-> console.log(c) 의 값은?

//.entries() -> 객체의 키와 값 순회하기
let user = {
  name: "John",
  age: 30
};

for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, age:30이 차례대로 출력
}

//변수 교환
let guest = "Jane";
let admin = "Pete";
[guest, admin] = [admin, guest];

1-2 객체 구조분해할당

• 우변은 객체여야 함
• 좌변에는 'assignable'하다면 무엇이든 올수있음 (ex: 객체 프로퍼티)
• 할당 기준은 프로퍼티 키 (순서는 의미없음)

//중첩(nested) 구조분해할당
const user = {
	name : 'Lee',
    address : {
    	zipCode: '123223',
        city: 'Seoul',
        order: [1, 2, 3, 4],
    }
};

const { address : { city, order: [aa,bb,cc,dd,ee = 5] } } = user;
console.log(city);

//let(const) 없이 구조분해할당 사용하기
let title, width, height;

SyntaxError: Unexpected token '=' 
{title, width, height} = {title: "Menu", width: 200, height: 100};

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

-> 에러를 해결하려면 할당문을 괄호(...)로 감싸 자바스크립트가 
{...}를 코드 블록이 아닌 표현식으로 해석하면 됩니다.

표현식과 코드블록

• 코드블록 : 코드 내에서 {}로 둘러쌓인 부분.
• 표현식 : An expression is any valid unit of code that resolves to a value.