Destructuring 문법

우선 arr가 있다.

var arr = [1,2,3];

arr은 중요한 자료라 변수에 담아보려고 한다.

그래서

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

이런 식으로, 모양만 맞춰 변수를 선언하면 변수가 생긴다.

이렇게 직관적으로 변수를 만드는 문법을 destructuring이라고 한다.

 

만약, array destructuring을 할 때, 몇개를 빼먹으면

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

이렇게 등호로 기본값을 지정할 수 있다.

 

오브젝트도 가능하다.

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

이렇게 오브젝트가 있을때,

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

이런 식으로 모양만 맞추면 name이란 변수엔 name: 'Kim'이 들어가게 된다.

대신 여기선 변수명과 key명을 똑같이 써야한다.

마찬가지로 기본값도 지정가능하며,

var {name : 이름, age = 31}= {name : 'Kim'};

변수명을 이름으로 바꾸고 싶으면 위처럼 적어서 이름을 입력하면 'Kim'이 나오게 한다.

 

반대로 변수들을 object에 집어넣고 싶으면

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

이런 변수들을,

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

이렇게 하드코딩해주거나,

var obj = { name, age }

이렇게 축약해줄 수 있다. (key와 변수명이 동일할 때 가능)

 

마지막으로 함수 파라미터에도 적용가능하다.

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

function 함수( { name, age } ){
	//object데이터들을 파라미터로 만들고 싶은 경우 
    console.log(name);
    console.log(age);
}
함수({name : 'Kim',age : 30});

이렇게 적으면 파라미터 변수 name, age에 각각 'Kim', 30이 담기게 된다.