[7주차 스터디]35장-디스트럭처링 할당

디스트럭처링 할당

• 디스트럭처링 할당(구조 분해 할당, destructuring assignment)은 구조화된 배열과 같은 이터러블 또는 개체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
• 배열과 같은 이터러블 도는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용

배열 디스트럭처링 할당

• 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당
• 디스트럭 처링 할당의 대상(할당문의 우변)은 이터러블이어야 한다.

const arr = [1,2,3];
 
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3

• 할당의 기준은 인덱스이다. 즉, 순서대로 할당되고 변수의 개수와 일치할 필요는 없다.
• 할당되는 변수에 기본 값을 설정할 수 있고, 기본값 보다 할당된 값이 우선한다.

const [a, b, c=3] = [1,2];
cosole.log(a,b,c); // 1 2 3
 
const [a,b,c=3] = [1,2,4];
cosole.log(a,b,c); // 1 2 4

객체 디스터럭처링 할당

• 객체의 각 프로퍼티를 객체로 부터 추출하여 1개 이상의 변수에 할당한다.
• 할당의 대상(할당문의 우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키다. 즉, 순서는 의미가 없으며, 선언된 변수 이름과 프로퍼티 키가 일치하면 할당 된다.

const user = {
    firstName : 'homie',
    lastName : 'kim'
};
// 프로퍼티키를 기준으로 할당이 이루어짐
const {lastName, firstName} = user;
console.log(firstName, lastName); // homie kim
// 객체리터럴 형태로 선언된 변수는 프로퍼티 축약 표현을 통해 선언된 것
const { lastName: lastName , firstName : firstName} = user;
// 프로퍼티의 키와 다른 이름으로 변수를 받으려면 다음과 같이 변수 선언
const { lastName : ln, firstName : fn} = user;
console.log(fn, ln); // homie kim

• 배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.

const todos = [
    { id : 1, content : 'HTML', completed : true},
    { id : 2, content : 'CSS', completed : false},
    { id : 3, content : 'JS', completed : true},
];
// 배열 디스트럭처링 기준은 인덱스, 객체 디스트럭처링 기준은 프로퍼티 키
const [, {id},{content}] =  todos;
console.log(id, content); // 2 JS