Destructuring(디스트럭쳐링) - 배열과 객체의 값을 변수로 받는 방법

Destructuring?

: 기존에 구조를 가지고 있던 객체(Array or Object)를 파괴(Destructure)하여 별도의 변수에 값을 할당하는 것이다.

=> 배열이나 객체 안의 어떤 값을 추출할 때 쉽게 받아오는 방법

---

배열 Destructuring

//ES5
var arr = [1, 2, 3];
var one   = arr[0];//1
var two   = arr[1];//2
var three = arr[2];//3
//ES6
const arr = [1,2,3];
const [one, two, three] = arr;
// one = 1, two = 2, three = 3
let x,y,z;
[x,y,z] = arr;
// x=1, y=2, z=3

기존에는 배열의 인덱스를 찾아서 가져올 수 있었지만 ES6에서는 배열처럼 변수를 [x,y,z] 이런식으로 대괄호를 사용해서(*배열형태) 변수에 받을 수 있게 되었다.

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
 
// default value
[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 operator
[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

배열 디스트럭쳐링의 다양한 표현 방법

---

객체 Destructuring

배열과 다른 점은 객체의 프로퍼티명으로 받아야 하는 점이다. (객체는 역시 중괄호{} )

// ES5
var obj = { firstName: 'Ungmo', lastName: 'Lee' };
var name = {};
 
name.firstName = obj.firstName;
name.lastName  = obj.lastName;
 
console.log(name); // { firstName: 'Ungmo', lastName: 'Lee' }
// ES6
const obj = { firstName: 'Ungmo', lastName: 'Lee' };
 
const { firstName, lastName } = obj;
// const {f,l} = obj; 이렇게 받을 수 없다.**
 
console.log(firstName, lastName); // Ungmo Lee

프로퍼티명으로 변수를 선언하고 받아야 한다는 점을 다시 본다.

const { prop1, prop2 } = { prop1: 'a', prop2: 'b' };
console.log({ prop1, prop2 }); // { prop1: 'a', prop2: 'b' }

순서에 상관없이 이름으로 필요한 변수만 가져올 수 있고,

중첩객체에서는 마찬가지로 중첩객체를 받을 수 있게 만든 후에 받아와야 한다.

function margin() {
  const left = 1, right = 2, top = 3, bottom = 4;
  return { left, right, top, bottom };
}
const { left, bottom } = margin();
//필요한 프로퍼티만 이름으로 가져올 수 있음.
console.log(left, bottom); // 1 4
 
//중첩 객체에서 가져오는 방법 
function settings() {
  return { display: { color: 'red' }, keyboard: { layout: 'qwerty'} };
}
const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();
console.log(displayColor, keyboardLayout); // red qwerty

추가적으로 객체를 destructuring 할 때 아래처럼 축약해서 쓰면 괄호를 써야한다.

array = [1];
obj = {props:1};
[test] = array;
({ props } = obj);
//객체를 해체할 때 ()괄호 써야함.
console.log(test);//1
console.log(props);//1

- 참고 사이트

http://poiemaweb.com/es6-destructuring