구조 분해 할당

 

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

 

배열 구조 분해 할당

 

const number = [1, 2, 3];

const [one, two, three] = number;

console.log(one, two, three); // 1 2 3

 

변수 one, two, three를 선언하고 number를 구조 분해하여 할당합니다.

이 때 할당 기준은 배열의 인덱스입니다.

 

const [a, b] = [1];

console.log(a, b) // 1 undefined

const [c, , d] = [1, 2, 3];

console.log(c, d); // 1 3

const [e, ...f] = [1, 2, 3];
console.log(e, f); // 1 [2, 3]

 

배열 구조 분해 할당은 순서대로 할당되며 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없습니다.

또, 변수에 Rest 요소를 사용할 수 도 있습니다.

 

 

객체 구조 분해 할당

 

const me = { firstName: 'Iltae', lastName: 'Kim' };

const { lastName, firstName } = me;
// const { lastName: lastName, firstName: firstName } = me;

console.log(firstName, lastName); // Iltae Kim

 

변수 lastName과 firstName을 선언하고 me 객체를 구조 분해하여 할당합니다.

이때 프로퍼티 키를 기준으로 구조 분해 할당이 이루어지며 순서는 의미 없습니다.

 

위 예시에서 주석 처리된 내용이 축약 표현된 것이며 이를 이용하여 별칭 부여도 가능합니다.

 

const { firstName: fn = 'Iltae', lastName: ln } = { lastName: 'Kim' };
console.log(fn, ln); // Iltae Kim

 

다음과 같이 별칭을 부여하고 기본값을 설정할 수 있습니다.

 

객체 구조 분해 할당은 객체에서 프로퍼티 키로 필요한 값만 추출하여 변수에 할당하고 싶을 때 유용합니다.

 

function blogging(todo) {
  console.log(`오늘의 블로깅 주제 ${todo.topic}은 ${todo.completed? '제출' : '미제출'} 상태입니다.`);
}

blogging({ id:1, topic: '구조 분해 할당', completed: true }); // 오늘의 블로깅 주제 구조 분해 할당은 제출 상태입니다.

 

↓↓↓

 

function blogging({ topic, completed }) {
  console.log(`오늘의 블로깅 주제 ${topic}은 ${completed? '제출' : '미제출'} 상태입니다.`);
}

blogging({ id:1, topic: '구조 분해 할당', completed: true }); // 오늘의 블로깅 주제 구조 분해 할당은 제출 상태입니다.

 

객체 구조 분해 할당은 다음과 같이 객체를 인수로 전달받는 함수의 매개변수에도 사용하여 좀 더 간단하고 가독성 좋게 표현할 수 있습니다.

 

const furniture = [
 { id: 1, name: 'desk' },
 { id: 2, name: 'chair' },
 { id: 3, name: 'bed' }
]

// furniture 배열의 두 번째 요소인 객체로부터 name 프로퍼티만 추출
const [, { name }] = furniture;
console.log(name); // chair


const bananaMilk = {
  price: 1500,
  ingredient: {
    milk: '95%',
    banana: '5%'
  }
};

// ingredient 프로퍼티 키로 객체를 추출하고 이 객체의 banana 프로퍼티 키로 값을 추출
const { ingredient: { banana } } = bananaMilk;
console.log(banana); // 5%

 

다음과 같이 배열 구조 분해 할당과 객체 구조 분해 할당을 혼용할 수 있으며 중첩 객체에도 적용이 가능합니다.

 

const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(a, rest); // 1, { b: 2, c: 3 }

 

배열 구조 분해 할당과 비슷하게 Rest 프로퍼티를 사용할 수 있습니다.