[JS] ES6의 구조 분해 문법 (Destructuring)

 

 

 

 

 

 

Destructuring은 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 ES6 문법이다.

 

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

 

 

 

1. Array Destructuring

 

▶ 중첩되지 않은 배열의 경우

중첩되지 않은 배열은 인덱스를 통한 접근이 가능하다.

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: 10, kor2: 20, kor3: 30

 

이미 정의된 배열의 값들을 바꾸기 위해서는 콤마로 인덱스를 맞춰주면서 값을 다시 대입하면 된다.

let kors = [10, 20, 30];

let [kor1, kor2, kor3] = kors;
console.log(`kor1: ${kor1}, kor2: ${kor2}, kor3: ${kor3}`);
// 출력값 : kor1: 10, kor2: 20, kor3: 30

[kor1] = [1, 3, 5];
[, kor2] = [1, 3, 5];
[, , kor3] = [1, 3, 5];
console.log(`kor1: ${kor1}, kor2: ${kor2}, kor3: ${kor3}`);
// 출력값 : kor1: 1, kor2: 3, kor3: 5

 

▶ 중첩된 배열인 경우

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

let [kor1, kor2, kor3, [kor4, kor5]];
console.log(`${kor1}, ${kor2}, ${kor3}, ${kor4}, ${kor5}`);
//출력값 10, 20 , 30, 40, 50

 

 

 

2. Object Destructuring

 

▶ 중첩되지 않은 객체인 경우

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

//기존 문법
let kor = exam.kor;
let eng = exam.eng;
let math = exam.math;

// ES6 Destructuring 문법
let {kor, eng, math} = exam;
console.log(`kor: ${kor}, eng: ${eng}, math: ${math}`);
// 출력값 : kor1: 30, kor2: 40, kor3: 50

 

- 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}`);
// 출력값 : kor1: 30, kor2: 40, kor3: 50

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

({kor, eng, math} = exam); // 바뀐 kor, eng 값을 재할당
console.log(`kor: ${kor}, eng: ${eng}, math: ${math}`);
// 출력값 : kor1: 100, kor2: 200, kor3: 50
// 재할당하지 않은 값은 그대로 출력

 

▶ 중첩된 객체인 경우

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

// 기존 문법
let name = exam.student.name;
let phone = exam.student.phone;

// ES6 Destructuring 문법
let {student:{name}, student:{phone}} = exam;
console.log(`name: ${name}, phone: ${phone}`);
// 출력값 : student: newlec, phone: 010-1111-2222

 

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}`);
// 출력값 : kor: 30, eng: 40, total: 0

 

 

 

3. 배열, 객체 혼합 Destructuring

 

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

// ex) img2에 "img2.png"를 대입
let {files: [, img2]} = notice;

 

 

 

#참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://ko.javascript.info/destructuring-assignment