Destructuring assignment

비구조화 할당(destructuring assignment) 구문은 배열의 값이나 객체의 속성을 별개의 변수로 추출할 수 있게 하는 자바스크립트 식(expression)입니다.

구문

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({a, b} = {a: 10, b: 20});
console.log(a); // 10
console.log(b); // 20

// Stage 32 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

설명

객체 및 배열 리터럴 식은 즉석에서 쉽게 데이터 패키지를 만들 수 있도록 합니다.

var x = [1, 2, 3, 4, 5];

비구조화 할당은 비슷한 구문이지만, 할당문의 좌변에 원래 변수에서 어떤 값들을 추출할지 정의합니다.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

이 기능은 Perl이나 Python 같은 언어에 존재하는 것과 비슷합니다.

배열 비구조화

기본값

배열 인자의 값이 undefiend인 경우에는 기본값을 할당할 수 있습니다.

var a, b;
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

변수에 배열의 나머지를 할당하기

비구조화 할당시, rest패턴을 이용해 배열의 남은 부분을 변수 하나에 할당할 수 있습니다.

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

객체 비구조화

기본 할당

var o = {p: 42, q: true}
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

선언 없는 할당

변수의 선언과 분리하여 변수에 값을 할당할 수 있습니다.

var a, b;
({a, b} = {a: 1, b: 2});

할당 문을 둘러싼 ( .. )는 선언 없이 객체 리터럴 비구조화 할당을 사용할 때 필요한 구문입니다.
{a, b} = {a:1 ,b:2}는 유효한 독립 구문이 아닙니다. 좌변의 {a, b}이 블록으로 간주되고 객체 리터럴이 아니기 때문입니다.
그러나 ({a, b} = {a:1, b:2})는 유효한데, var {a, b} = {a:1 , b:2}의 형태와 같습니다.
참고: ( .. ) 표현식 앞에 세미콜론이 없다면 이전 줄에 있는 함수 실행을 위해 이용될 수 있습니다.

새로운 변수 이름으로 할당하기

변수를 추출해서 원래 객체 속성명과는 다른 이름으로 할당시킬 수 있습니다.

var o = {p: 42, q: true};
var {p: foo, q: bar } = o;
console.log(foo); // 42
console.log(bar); // true

기본값

var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

기본값을 제공하여 새로운 변수 이름으로 할당하기

var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5

중첩 객체 및 배열 비구조화

함수 매개변수로 전달된 객체에서 필드 가져오기

function userId({id}) {
    return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}) {
    console.log(displayName + ' is ' + name);
}

var user = {
    id: 42,
    displayName: 'jdoe',
    fullName: {
        firstName: 'John',
        lastName: 'Doe'
    }
}

console.log('userId: ' + userId(user)); // 'userId: 42'
whois(user);  // 'jdoe is John'

객체 비구조화시 나머지 (rest)

Rest/Spread Properties for ECMAScript 제안 (stage 3)은 나머지 (rest) 구문을 비구조화에 추가합니다. 나머지 속성 구문은 비구조화를 추출하고 남은 객체의 enumerable한 속성들을 모두 모아줍니다.

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // {c: 30, d: 40}