ES2015 - 분해대입 (Destructuring Assignment)

분해대입 (Destructuring Assignment)

ES2015에서 배열과 객체 안에 들어있는 값을 쉽게 추출해낼 수 있는 문법이 추가되었습니다.

 

배열의 분해대입

다음과 같이, 변수의 선언과 동시에 배열의 요소를 해당 변수에 대입할 수 있습니다.

const [a, b, c] = [1, 2, 3];

console.log(a, b, c); // 1 2 3

 

만약 요소의 순서와 일치하는 변수가 좌측 목록에 들어있지 않으면, 해당 요소는 무시 됩니다.

// 여기서 `2`, `4`는 무시됩니다.
const [a, , c] = [1, 2, 3, 4];

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

 

이미 선언된 변수에 대해서도 분해대입을 할 수 있습니다.

let a, b;
[a, b] = [1, 2];

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

 

배열이 중첩되어 있으면, 해당 배열에 대해서도 분해대입을 할 수 있습니다.
이 때에는 등호의 좌측에서도 배열이 중첩된 것처럼 써주면 됩니다.

const [a, b, [c, d]] = [1, 2, [3, 4]];

console.log(a, b, c, d); // 1 2 3 4

 

객체의 분해대입

다음과 같이, 변수의 선언과 동시에 객체의 속성을 해당 변수에 대입할 수 있습니다.

const {a: prop1, b: prop2} = {a: 1, b: 2};

console.log(prop1, prop2); // 1 2

 

좌측 객체 표기에서 속성값 부분을 생략하면, 속성 이름 부분이 곧 새 변수의 이름이 됩니다.

const {a, b} = {a: 1, b: 2};

console,log(a, b); // 1 2

 

만약 어떤 속성의 이름과 같은 이름을 갖는 변수가 좌측에 들어있지 않으면, 해당 속성은 무시됩니다.

// 여기서 `b`는 무시됩니다.
const {a} = {a: 1, b: 2};

console.log(a); // 1

 

이미 선언된 변수에 대해서도 분해대입을 할 수 있습니다.

let a, b;
// 문장이 여는 중괄호(`{`)로 시작되면 이는 '블록'으로 간주되므로,
// 아래와 같이 분해대입을 할 때는 식 전체를 괄호로 둘러싸주어야 합니다.
({a, b} = {a: 1, b: 2});

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

 

객체가 중첩되어 있으면, 해당 객체에 대해서도 분해대입을 할 수 있습니다.
이 때에는 등호의 좌측에서도 객체가 중첩된 것처럼 써주면 됩니다.

const {a, b: {c}} = {a: 1, b: {c: 2}};

console.log(a, c); // 1 2 

 

배열과 객체가 함께 중첩되어 있는 경우에서도 분해대입이 가능합니다.

const {
    arr: [
        a, b, {
            c
        }
    ]
} = {
    arr: [
          1, 2, {
            c : 3
        }  
    ]
};

console.log(a, b, c); // 1 2 3

 

분해대입의 기본값

분해대입 시, 만약 좌측 변수의 위치에 해당하는 값이 우측의 배열 혹은 객체에 존재하지 않으면 거기에는 대입이 일어나지 않습니다.

let a, b, c;

[a, b, c] = [1, 2];

console.log(c); // undefined

 

이 때에 좌측 변수에 기본으로 대입될 값을 미리 지정해둘 수 있습니다.

// `c` 위치에는 대입될 값이 없으므로, 기본값인 `3`이 대신 사용됩니다.
let [a, b, c = 3] = [1 ,2];

console.log(c); // 3

 

매개변수에서의 분해대입

함수의 매개변수에서도 분해대입을 할 수 있습니다.

function func({prop, array: [item1, item2, item3 = 4}) {
    console.log(prop);
    console.log(item1);
    console.log(item2);
    console.log(item3);
}

// 1, 2, 3, 4가 차례대로 출력됩니다.
func({prop: 1, array: [2, 3]});

 

 

 

 

 

연산자 더 알아보기 · JavaScript로 만나는 세상