Destructuring

Destructuring(구조 분해 할당)란, MDN에서 말하기를, "배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javascript표현식" 이라고 한다.

쉽게 말해서 Array, Object 자료형에 있는 자료들을 구조 분해 할당을하면, 변수로 쉽게 꺼낼 수 있다고 생각하면된다.

예시

Array 안에 있는 데이터를 변수에 담는 방법

• [2,3,4]라는 배열속 데이터를 전부 꺼내서 변수에 담고싶을 경우 어떤식으로 할 수 있을까?

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

가장 단순한 접근법은 이렇게 작성하는것인데, 구조 분해 할당을 사용한다면 더 쉽게 할 수 있다.

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

이렇게하면 a,b,c 변수가 세개 생성되는데 각각 2,3,4 라는 자료를 가지게된다.

디폴트 값도 줄 수 있다.

구조 분해 할당은 왼쪽 오른쪽 갯수가 다르면 변수가 제대로 만들어 지지 않는다.

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

위에처럼 작성하면 c 라는 변수는 값이 할당이 안되어서 undefined가 할당되어있는데, 이걸 방지하고 싶다면 아래처럼 작성해주면된다.

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

Object 안에 데이터를 변수에 담는 방법

object도 좌우를 똑같이 맞춰주면 변수가 생성이된다.

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

이렇게 하면 a,b라는 변수가 생성되고 kim과 30이라는 자료를 각각 할당해준다.

이보다 더 간단하게 작성한다면, 변수 이름을 오브젝트 안의 key 이름과 똑같이 맞춰주면되겠다.

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

console.log(name); // kim
console.log(age); // 30

변수를 object로 집어넣고 싶은 경우

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

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

변수를 object 자료형에 집어넣고 싶은 경우 위와 같이 하면되지만, destructuring (구조 분해 할당) 문법을 이용하면 이렇게도 가능하다.

var name= 'kim';
var age= 30;

var obj = {name,age}

name: name
age: age
이런식으로 대입이된다.

함수 파라미터 변수 만들기

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

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

이런식으로도 가능하다.