[JavaScript] 디스트럭처링 할당

디스트럭처링 할당

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

배열

ES6의 배열 구조 분해 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 순서대로 할당한다. 이때 배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.

let arr = [1, 2, 3];
 
// ES5
let one = arr[0];
let two = arr[1];
let three = arr[2];
 
// ES6
let [one, two, three] = arr;
 
console.log(one, two, three); // 1 2 3

주의

우변에 이터러블을 할당하지 않으면 에러가 발생한다.

const [a, b]; // SyntaxError
const [a, b] = {}; // TypeError

할당 기준

배열의 인덱스를 기준으로 할당된다. 즉, 순서대로 할당된다. 이때, 변수의 개수와 이터러블의 요소 개수가 일치하지 않아도 된다.

let [one, two] = [1, 2, 3, 4];
 
console.log(one, two); // 1 2

선언과 할당의 분리

선언과 할당을 분리할 수도 있지만, 이 경우에는 const 키워드로 변수를 선언할 수 없기 때문에 권장하지 않는다.

let x, y;
[x, y] = [1, 2];

기본값

배열 구조 분해 할당을 위한 변수에 기본값을 설정할 수 있다.

const [one, two, three = 3] = [1, 2];

Rest 요소

배열 구조 분해 할당을 위한 변수에 Rest 요소 ...을 사용할 수 있다.

const [a, ...b] = [1, 2, 3];
 
console.log(a, b); 1 [2, 3]

객체

ES6의 객체 구조 분해 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 이때 객체 구조 분해 할당의 대상(할당문의 우변)은 객체여야 하며, 할당 기준은 프로퍼티 키다.

const monster = { name: 'slime', health: 250 };
 
// ES5
const name = monster.name;
const health = monster.health;
 
// ES6
const { name, health } = monster;

주의

우변에 객체 또는 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등)을 할당하지 않으면 에러가 발생한다.

const { name, health }; // SyntaxError
const { name, health } = null; // TypeError

할당 기준

프로퍼티 키를 기준으로 할당되기 때문에 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

const monster = { name: 'slime', health: 250 };
const { health, name } = monster;
 
console.log(name, health); // slime 250

프로퍼티 축약 표현

const monster = { name: 'slime', health: 250 };
 
// 같은 의미
const { health, name } = monster;
const { health: health, name: name } = monster;
 
// 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받고 싶은 경우
// 프로퍼티 키가 health인 프로퍼티 값을 hp에 할당
// 프로퍼티 키가 name인 프로퍼티 값을 nm에 할당
const { health: hp, name: nm } = monster;

기본값

객체 구조 분해 할당을 위한 변수에 기본값을 설정할 수 있다.

const { one, two, three = 3 } = { one: 1, two: 2 };
console.log(one, two, three); // 1, 2, 3

함수의 매개변수

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

function showPost({ title, content }) {
  console.log(`제목: ${title}, 내용: ${content}`);
}
 
showPost({ title: 'Welcome!', content: 'Hello, World..'});

배열, 객체 구조 분해 할당의 혼용

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

const posts = [
  { id: 1, title: 'Welcome!', content: 'Hello, World..' },
  { id: 2, title: 'Second post', content: 'Second content' },
  { id: 3, title: 'Bye', content: 'Bye, World..' },
];
 
// 배열의 두 번째 요소인 객체의 id 프로퍼티만 추출
const [, { id }] = posts;
console.log(id); // 2

중첩 객체

const monster = {
  name: 'slime',
  spec: {
    level: 5,
    healthPoint: 250,
  }
};
 
// spec 프로퍼티 키로 객체를 추출하고,
// 이 객체의 level 프로퍼티 키로 값을 추출한다.
const { spec: { level } } = monster;
console.log(level); // 5

Rest 프로퍼티

객체 구조 분해 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티를 사용할 수 있다.

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