[ES6] 17. Destructuring

구조분해할당

---

배열의 구조분해할당

변수 array 의 데이터들을 각각의 변수에 담고 싶다면 아래와 같이 구현하면 될 것이다.

var array = [2,3,4];
var a = array[0]; 
var b = array[1];

구조분해할당을 통해 더 쉽게 할당을 할수 있다.

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

데이터의 자료랑 비슷한 형태로 변수를 선언해 주면 각각의 변수가 각각의 데이터를 가진다.

default값

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

좌우의 갯수가 다르기 때문에 변수c 에는 undefined 가 할당 된다.

이를 방지 하기 위해 값이 안들어오는 변수들에 기본값을 설정할 수 있다.

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

객체형의 구조분해할당

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

a 라는 변수에 ‘Kim’ , b 에 30 이 할당된다.

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

조금더 간략하게 name: name 을 name 으로 생략이 가능하다.

객체형 데이터의 변수 참조

오브젝트 자료형에 변수를 참조하고 싶은 경우

var name = 'Kim';
var age = 30;

var obj = { name : name, age : age }

로 구현할 수 있는데

구조분해할당 문법을 사용해 아래와 같이 할 수 있다.

var name = 'Kim';
var age = 30;

var obj = { name, age }

name: name key와 value가 동일 하다면 생략이 가능하다.

**함수의 파라미터**

function 함수(name, age){
  console.log(name);
  console.log(age);
}

var obj = { name : 'Kim', age : 20 }
함수(obj.name, obj.age);

함수의 파라미터로 obj 의 name, age 를 사용하고 싶다면 각각 obj.name , obj.ageobj.name , obj.age 라고 쓰면 될 것이다.

혹은 구조분해할당 문법으로

function 함수( { name, age }){
  console.log(name);
  console.log(age);
}

var obj = { name : 'Kim', age : 20 };
함수(obj);

obj.name , obj.age 파라미터 두 개를 입력하지 않아도 된다.