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

 

• ES6란?
• Array Destructuring (배열 구조 분해 문법)
• Object Destructuring (객체 구조 분해 문법)
• Array & Object Destructuring (배열 & 객체 혼합 구조 분해 문법)

 

---

[JavaScript] ES6 문법

 

ES란, ECMAScript의 약자이며, 자바스크립트의 표준, 규격을 나타내는 용어이다.

 

ES 뒤에 붙은 숫자는 version을 의미하고, 현재 사용하는 ES6은 2015년도에 출시되었다.

 

---

①  Array Destructuring (배열 구조 분해 문법)

 

1-1. 중첩되지 않은 배열의 경우

var nums = [10, 20, 30];

var num1 = nums[0];
var num2 = nums[1];
var num3 = nums[2];

 

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

 

 

1-2. ES6 Destructuring

var nums = [10, 20, 30];

var [num1, num2, num3] = nums;
console.log(`num1:${num1}, num2:${num2}, num3:${num3}`);    // num1: 10, num2: 20, num3: 30

 

ES6에서는 인덱스 접근 없이 할당 가능하다.

 

 

1-3. 이미 정의된 배열 값 수정

var nums = [10, 20, 30];

var [num1, num2, num3] = nums;
console.log(`num1:${num1}, num2:${num2}, num3:${num3}`);    // num1: 10, num2: 20, num3: 30

[num1] = [1, 3, 5];
[, num2] = [1, 3, 5];
[, , num3] = [1, 3, 5];
console.log(`num1:${num1}, num2:${num2}, num3:${num3}`);    // num1: 1, num2: 3, num3: 5

 

이미 정의된 배열의 값을 수정하기 위해서는 콤마로 인덱스를 맞춰가며 다시 대입한다.

 

 

1-4. 중첩된 배열인 경우

var nums = [10, 20, 30, [40, 50]];

var [num1, num2, num3, [num4, num5]];
console.log(`${num1}, ${num2}, ${num3}, ${num4}, ${num5}`);    // 10, 20, 30, 40, 50

 

 

---

②  Object Destructuring (객체 구조 분해 문법)

 

2-1. 중첩되지 않은 객체인 경우

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

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

 

 

- ES6 Destructuring

//ES6 Destructuring 문법

var {kor, eng, math} = exam;
console.log(`kor:${kor}, eng:${eng}, math:${math}`);    // kor: 30, eng: 40, math: 50

 

 

- 이미 정의된 객체 값 수정

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

var {kor, eng, math} = exam;
console.log(`kor:${kor}, eng:${eng}, math:${math}`);    // kor: 30, eng: 40, math: 50

exam.kor = 80;
exam.eng = 100;

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

 

 

---

2-2. 중첩된 객체의 경우

var exam = {
    kor: 30,
    eng: 40,
    math: 50,
    student: {
        name: "newlec",
        phone: "010-1234-5678"
    }
};

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

 

 

- ES6 Destructuring

// ES6 Destructuring 문법

var { student: {name}, student: {phone} } = exam;
console.log(`name:${name}, phone:${phone}`);    // name: newlec, phone: 010-1234-5678

 

 

---

③  Array & Object Destructuring (배열 & 객체 혼합 구조 분해 문법)

 

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

// img2에 img2.png를 대입하기
var { files: [, img2] } = notice;
console.log("img2: ", img2);    // img2: img2.png

 

 

---

이미지 출처 : https://t1.daumcdn.net/cfile/tistory/99623E335A17DBD241