디스트럭처링 - 문법 | Poiemaweb

[출처 : https://poiemaweb.com]

※ 디스트럭처링(Destructuring)

 - 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다.

 - 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.

 

1. 배열 디스트럭처링 (Array destructuring)

ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다.

var arr = [1, 2, 3];

// ES5 : 배열의 각 요소를 배열로부터 디스트럭처링하여 변수에 할당하기 위한 방법
var one = arr[0];
var two = arr[1];
var three = arr[2];

/* ES6
   배열의 인덱스를 기준으로 배열로부터 요소를 추출하여 변수에 할당
   변수 one, two, three가 선언되고 arr*가 비구조화(파괴)되어 할당 * initializer(초기화자) */
const [one, two, three] = arr;
// 디스트럭처링을 사용할 때는 반드시 initializer를 할당해야 한다.
// const [one, two, three]; // SyntaxError: Missing initializer in destructuring declaration

console.log(one, two, three);    // 1 2 3

배열 디스트럭처링을 위해서는 할당 연산자 왼쪽에 배열 형태의 변수 리스트가 필요하다.

let x, y, z;
[x, y, z] = [1, 2, 3];

// 위의 구문과 동치이다.
let [x, y, z] = [1, 2, 3];

왼쪽의 변수 리스트와 오른쪽의 배열은 배열의 인덱스를 기준으로 할당된다.

let x, y, z;

[x, y] = [1, 2];
console.log(x, y); // 1 2

[x, y] = [1];
console.log(x, y); // 1 undefined

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

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

// 기본값
[x, y, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

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

// spread 문법
[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

ES6의 배열 디스트럭처링은 배열에서 필요한 요소만 추출하여 변수에 할당하고 싶은 경우에 유용하다.

아래의 코드는 Date 객체에서 년도, 월, 일을 추출하는 예제이다.

const today = new Date(); // Tue May 21 2019 22:19:42 GMT+0900 (한국 표준시)
const formattedDate = today.toISOString().substring(0, 10); // "2019-05-21"
const [year, month, day] = formattedDate.split('-');
console.log([year, month, day]); // [ '2019', '05', '21' ]

---

2. 객체 디스트럭처링 (Object destructuring)

ES6의 객체 디스트럭처링은 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당한다. 이때 할당 기준은 프로퍼티 이름(키)이다.

var person = { name: "AGAL", age: 20 };

// ES5 : 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 이름(키)을 사용
var name = person.name;
var age = person.age;

/* ES6
   프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
   변수 name, age가 선언되고 person*가 비구조화(파괴)되어 할당된다. *initializer(초기화자 */
const {name, age} = person

console.log(name, age);   // AGAL 20

객체 디스트럭처링을 위해서는 할당 연산자 왼쪽에 객체 형태의 변수 리스트가 필요하다.

// 프로퍼티 키가 model인 프로퍼티의 값을 변수 code에 할당.
// 프로퍼티 키가 gundam인 프로퍼티의 값을 변수 name에 할당.
const { model: code, gundam: name } = { model: "MBF-P02", gundam: "ASTRAY" };
console.log(code, name);    // "MBF-P02" "ASTRAY"
console.log({ model: code, gundam: name });    // { model: "MBF-P02", gundam: "ASTRAY" }

// 아래는 위의 축약형
const { model, gundam } = { model: "MBF-P02", gundam: "ASTRAY" };
console.log({ model, gundam });    // { model: "MBF-P02", gundam: "ASTRAY" }

// 기본값
const { model, gundam, type = "Blue Frame" } = { model: "MBF-P02", gundam: "ASTRAY" };
console.log({ model, gundam, type });    // { model: "MBF-P02", gundam: "ASTRAY", type: "Blue Frame" }

객체 디스트럭처링은 객체에서 프로퍼티 이름(키)으로 필요한 프로퍼티 값만을 추출할 수 있다. 아래의 코드를 살펴보자.

const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false }
];

// todos 배열의 요소인 객체로부터 completed 프로퍼티만을 추출한다.
const completedTodos = todos.filter(({ completed }) => completed);
console.log(completedTodos); // [ { id: 1, content: 'HTML', completed: true } ]

※ Array.prototype.filter 메소드의 콜백 함수

 - 대상 배열(todos)을 순회하며 첫 번째 인자로 대상 배열의 요소를 받는다.

 - 이때 필요한 프로퍼티(completed 프로퍼티)만을 추출할 수 있다.

 

중첩 객체의 경우는 아래와 같이 사용한다.

const person = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

const { address: { city } } = person;
console.log(city); // 'Seoul'

---

Reference

• ECMAScript 6

• ES6 In Depth: 디스트럭처링(Destructuring)