Javascript ES6 - Destructuring

Destructuring은 구조분해 할당이라고도 합니다. 변수에 값을 할당할 때 ES6 문법에서 새롭게 추가된 개념입니다.

 

1️⃣  Array 안에 들어있는 데이터를 변수에 담는 방법

 

const array = [2,3,4];

 

위와 같은 array가 있습니다. 이 때 array 안의 자료를 각각 a,b,c 에 할당하고 싶다면 어떻게 해야될까요?

 

const a = array[0]; 
const b = array[1];

 

이렇게 하면 할 수 있지만 조금은 비효율적인 것처럼 보입니다. 구조분해 할당을 이 때 활용할 수 있습니다.

 

const [a,b,c] = [2,3,4]

 

이렇게 해주면 됩니다. 왼쪽의 변수의 개수와 넣을 데이터의 개수를 일치시켜서 만들어 주면 됩니다. 그러면 만약에 개수가 서로 일치하지 않으면 어떻게 될까요? 값이 할당되지 않은 변수는 undefined의 값을 가지게 됩니다. 이를 방지해주기 위해서는 default parameter 개념처럼 미리 변수에 값을 지정해주면 됩니다.

 

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

 

이렇게 미리 값을 지정해놓으면 값이 따로 할당되지 않는다고 하더라도 c를 출력해보면 5가 나오는 것을 알 수 있습니다.

 

 

2️⃣  Object 안에 들어있는 데이터를 변수에 담는 방법

 

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

 

array와 마찬가지로 개수를 맞춰주고 { } 기호를 활용해서 만들면 됩니다. 이러면 a, b라는 변수가 생성되고 각각 'kim'과 30이 할당됩니다. 그런데 좀 더 간단하게 쓸 수 있는 방법이 있습니다.

 

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

 

변수 이름을 오브젝트 안의 key 이름과 똑같이 맞춰줄 때는 이렇게만 쓰셔도 됩니다. 사실 위 코드는 이렇게 생긴 코드랑 완전히 같은 의미입니다.

 

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

 

 

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

 

const name = 'Kim';
const age = 30;

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

 

이렇게 넣어주면 name에는 'kim'이 age에는 30이 저장될 것입니다. 하지만 구조분해 할당 문법을 활용하면 아래처럼도 가능합니다.

 

const name = 'Kim';
const age = 30;

const obj = { name, age }

 

key와 value가 같다면 이렇게 간단하게 코드를 작성할 수 있습니다.

 

4️⃣  함수 파라미터를 만드는 경우

 

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

const obj = { name : 'Kim', age : 20 }

 

이런 코드가 있을 때 obj의 name과 age가 출력되게 하려면 함수를 어떻게 작성해야될까요?

 

example(obj.name, obj.age);

 

이렇게 작성하면 콘솔에 name과 age가 각각 출력될 것입니다. 구조분해 할당 문법을 이렇게도 작성할 수 있습니다.

 

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

const obj = { name : 'Kim', age : 20 };
example(obj);

 

함수를 만들 때 parameter를 미리 구조분해 할당 문법을 사용해서 만들어 놓는 것입니다.