[Javascript] ES6 Destructuring 문법에 대해 알아보자

안녕하세요. 이번 포스팅에서는 ES6 문법의 Destructuring에 대해 알아보겠습니다.

 

Destructuring은 '구조 분해'라고 하는데 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 ES6 문법입니다.

 

Destructuring은 Array(배열) Destructuring, Object(객체) Destructuring으로 나누어져있습니다.

하나씩 자세하게 알아보겠습니다.

 

Array Destructuring

중첩되지 않은 배열인 경우

다음과 같은 배열 중첩되지 않은 배열이 있습니다.

let kors = [10, 20, 30];

 

kors 배열의 각 원소들이 각 변수에 담기고 싶다면 인덱스를 통해 접근이 가능했습니다.

let kors = [10, 20, 30];

let kor1 = kors[0];
let kor2 = kors[1];
let kor3 = kors[2];

 

하지만, ES6는 인덱스 접근없이 더 간편하게 할당할 수 있습니다.

let kors = [10, 20, 30];

let [kor1, kor2, kor3] = kors;
console.log(`kor1: ${kor1}, kor2: ${kor2}, kor3: ${kor3}`);

출력값

 

그런데 위에서 정의한 kor1, kor2, kor3의 값들을 바꾸기 위해서는 어떻게 해야 할까요?

let kors = [10, 20, 30];

let [kor1, kor2, kor3] = kors;
console.log(`kor1: ${kor1}, kor2: ${kor2}, kor3: ${kor3}`);

[kor1] = [1, 3, 5]; // 다른 값으로 대입할 때는 그냥 쓰면 된다. 
[, kor2] = [1, 3, 5];
[, , kor3] = [1, 3, 5];
console.log(`kor1: ${kor1}, kor2: ${kor2}, kor3: ${kor3}`);

출력값

위와 같이 콤마로 인덱스를 맞춰주면서 값을 다시 대입하시면 됩니다.

 

 

 

중첩된 배열인 경우

다음과 같은 중첩된 배열이 있습니다.

let kors = [10, 20, 30, [40, 50]];

 

중첩된 배열인 경우에는 다음과 같이 문법을 사용하시면 됩니다.

let kors = [10, 20, 30, [40, 50]];

let [kor1, kor2, kor3, [kor4, kor5]];
console.log(`${kor1}, ${kor2}, ${kor3}, ${kor4}, ${kor5}`);

출력값

 

 

Object Destructuring

중첩되지 않은 객체인 경우

다음과 같이 중첩되지 않은 객체가 있습니다.

 let exam = {
    kor: 30,
    eng: 40,
    math: 50
};

 

kor, eng, math 변수에 30, 40, 50을 넣고 싶다면 다음과 같이 접근했습니다.

 let exam = {
    kor: 30,
    eng: 40,
    math: 50
};

let kor = exam.kor;
let eng = exam.eng;
let math = exam.math;

 

객체도 Destructuring 문법을 쓰면 다음과 같이 사용할 수 있습니다.

let exam = {
    kor: 30,
    eng: 40,
    math: 50
};

let {kor, eng, math} = exam;
console.log(`kor: ${kor}, eng: ${eng}, math: ${math}`);

출력값

 

뿐만 아니라 destructuring으로 kor, eng, math를 정의했는데 이후 exam 객체의 값이 변경되었을 때 이를 다시 반영하는 방법이 있습니다.

let exam = {
    kor: 30,
    eng: 40,
    math: 50
};

let {kor, eng, math} = exam;
console.log(`kor: ${kor}, eng: ${eng}, math: ${math}`);

exam.kor = 100;
exam.eng = 200;

({kor, eng, math} = exam); // 바뀐 kor, eng 값을 재할당
console.log(`kor: ${kor}, eng: ${eng}, math: ${math}`);

출력값

math는 재할당을 하지 않았으니 그대로 50이 출력되는 것을 확인하실 수 있습니다.

 

 

중첩된 객체인 경우

다음과 같이  중첩된 객체가 있습니다.

let exam = {
    kor: 30,
    eng: 40,
    math: 50,
    student: {
        name: "newlec",
        phone: "010-1111-2222"
    }
};

 

destructuring을 사용하지 않으면 name, phone을 그대로 변수로 정의하는 방법은 다음과 같습니다.

let name = exam.student.name;
let phone = exam.student.phone;

 

destructuring을 사용하면 다음과 같습니다.

let {student:{name}, student:{phone}} = exam;

console.log(`name: ${name}, phone: ${phone}`);

출력값

 

 

Object Destructuring에서는 별칭과 디폴트 설정 또한 가능합니다.

let exam = {
    kor: 30,
    eng: 40,
    math: 50,
    student: {
        name: "newlec",
        phone: "010-1111-2222"
    }
};

let {kor: korea, eng: english, total = 0} = exam;

console.log(`kor: ${korea}, eng: ${english}, total: ${total}`);

출력값

 

 

배열과 객체를 혼합한 Destructuring

아래는 같이 배열과 객체가 혼합되어 있습니다. 

let notice = {
    id: 1,
    title: "공지사항",
    files: [
        "img1.png",
        "img2.png"
    ]
};

img2라는 변수에 "img2.png"를 대입하려면 어떻게 해야할까요?

 

다음과 같이 작성하면 됩니다.

let {files: [, img2]} = notice;

출력값