Destructuring assignment

구조분해 할당 (Destructuring assignment) 은 구조화된 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것이다.
이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

🧸 배열의 구조분해 할당

const fruits = ['Apple','Banana','Cherry']

const [a,b,c,d] = fruits
console.log(a,b,c,d); // Apple Banana Cherry undefined

const [,b] = fruits
console.log(b) // Banana

const [, ,b] = fruits
console.log(b) // Cherry

✔️ 중간에 위치한 값만 추출하여 할당할 경우에는 쉼표 사용.
✔️ 쉼표 개수에 따라 2번째 값 or 3번째 값 등 선택하여 추출하는 것도 가능.

const fruits = ['Apple','Banana','Cherry']

let [a, b, c, d] = fruits;
console.log(d) // undefined

let [w, x, y, z = 'kiwi'] = fruits;
console.log(z) // kiwi

✔️ 기존 배열보다 변수의 개수가 많을 경우, 해당 변수는 undefined.
✔️ 초기 값이 세팅되어 있으면 초기값으로 출력되며, 할당할 값이 있으면 대체.

🧸 객체의 구조분해 할당

const user = {
	name: 'Jiyoung',
	age: 26,
	email: 'jiyoung990602@gmail.com'
}

const {name, age, email, address} = user
// E.g. user.address

console.log(`사용자의 이름은 ${name}입니다.`)
console.log(`${name}의 나이는 ${age}입니다.`)
console.log(`${name}의 이메일 주소는 ${email}입니다.`)
console.log(address) // undefined

✔️ user 내에 있는 속성을 각각의 변수로 만들어서 사용 가능.
✔️ 필요한 변수들만 선택적으로 만들어서도 사용 가능.

const user = {
	name: 'Jiyoung',
	age: 26,
	email: 'jiyoung990602@gmail.com',
	address: 'USA'
}

const {name : jiyoung, age, email, address = 'Korea'} = user 
// E.g. user.address

console.log(`사용자의 이름은 ${jiyoung}입니다.`)
console.log(`${jiyoung}의 나이는 ${age}입니다.`)
console.log(`${jiyoung}의 이메일 주소는 ${user.email}입니다.`)
console.log(address) // USA

✔️ address 값이 없는 경우, 출력될 기본값 설정 가능.
✔️ 콜론 뒤에 다른 이름으로 지정 시, 다른 이름의 변수로도 사용 가능.