[모던 자바스크립트] 구조분해 할당

구조분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 의미한다. 필요한 값만 추출하여 변수에 할당할 때 유용하다.

구조분해 할당

구조분해 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 즉, 순서대로 할당된다.

const arr = [1, 2, 3];

const [one, two, three] = arr;

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

구조분해 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다.

구주분해 할당의 기준은 배열의 인덱스다. 즉, 순서대로 할당된다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.

const [a, b] = [1];

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

구조분해 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 (...)를 사용할 수 있다. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 한다.

const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [2, 3]

객체 구조분해 할당

ES6에서는 객체를 구조분해 하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다. 할당 기준은 프로퍼티 키이며 순서는 의미가 없다.

const user = { firstName: 'Ungmo', lastName: 'Lee' };

const { lastName, firstName } = user;

위의 표현은 프로퍼티 축약 표현을 통해 선언한 것이다.

const { lastName, firstName } = user;

const {lastName: lastName, firstName: firstName} = user; // 위 코드와 같다

따라서 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.

const user = { firstName: 'Ungmo', lastName: 'Lee' };

const { lastName: ln, firstName: fn } = user;

console.log(fn, ln); // Ungmo Lee

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

const str = 'Hello';
// String 래퍼 객체로부터 length 프로퍼티만 추출한다.
const { length } = str;
console.log(length); // 5

const todo = { id: 1, content: 'HTML' };
const { id } = todo;
console.log(id); // 1

객체 구조분해 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.

function printTodo(todo) {
  console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ id: 1, content: 'HTML', completed: true });

위의 방법보다는 가독서이 좋은 아래와 같은 코드를 추천한다.

function printTodo({ content, completed }) {
  console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ id: 1, content: 'HTML', completed: true });

배열의 요소가 객체인 경우 배열 구조분해 할당 과 객체 구조분해 할당 을 혼용할 수 있다.

const todos = [
  {id: 1, content: 'HTML', completed: true },
  {id: 2, content: 'CSS', completed: false },
  {id: 3, content: 'JS', completed: false }
];

const [, { id }] = todos;
console.log(id); // 2

중첩 객체의 경우는 다음과 같이 사용한다.

const user = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

const { address: {city} } = user;