1. Destructuring assignment 이란?

Destructuring (구조 분해 할당) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

아래 예시를 보자.

2. array에서

기존 array데이터를 변수에 담으려면

var arr = [1, 2, 3];

var a = arr[0];
var b = arr[1];
var c = arr[2];

---

Destructuring 문법을 사용하면

var [a,b,c] = [2,3,4];

이렇게 간단하게 변수에 데이터를 할당할 수 있다.

개수를 맞추지 않으면

var [a,b,c] = [1, 2];

console.log(a, b, c);

결과

순서에 맞게 변수에 값이 할당되고 남은 변수는 undefined값이 할당된다.

var [a,b,c = 5] = [2,3];

default 파라미터도 사용 가능하다.

3. object에서

기존 object데이터를 변수에 담으려면

var obj = { name: "Kim", age: 20 };

var name = obj.name;
var age = obj.age;

Destructuring 문법을 사용하면

var { name : a, age : b } = { name : 'Kim', age : 30 };

console.log(a);
console.log(b);

object도 좌우를 똑같이 맞춰주변 변수가 생성된다. default파라미터도 사용 가능하다.

결과

a와 b라는 변수가 생성되고 각각 'kim'과 30이라는 값이 할당되었다.

더 간단하게

변수 이름을 오브젝트 안의 key값과 똑같이 맞출경우 더 간단하게 사용이 가능하다

var { name, age } = { name: "Kim", age: 30 };

console.log(name);
console.log(age);

object 생성도 가능

var name = "Kim";
var age = 20;

var obj = { name: name, age: age }; // 기존방법
var obj = { name, age }; // Destructuring문법 사용

변수를 생성하는것 뿐 아니라 이렇게 변수로 object데이터를 만드는데도 사용할 수 있다.