[ES6] Destructuring

 

개념

 

일단 Destructuring 이라는 단어의 의미부터 알아보자.

 

Destructuring은 비구조화 라는 의미를 가지고 있다.

 

그렇다면 여기서 말하는 "구조" 란 어떤 구조를 말하는 것일까 ?

 

여기서의 "구조" 는 배열이나 객체 리터럴의 틀에 값이 들어가 있는 형태를 말한다.

 

 

let arr = [1, 2, 3];
let obj = { a: 1, b: 2, c: 3 };

 

위의 코드 형태를 구조화된 형태 라고 보면 되겠다.

 

그렇다면 이러한 형태를 비구조화 한다는 의미는 어떤 것일까?

 

이 내용은 비구조화를 사용하는 코드를 보면서 알아보자.

 

사용 방법

 

배열

 

 

// ES5

var num = [2, 4, 7];

// before

var two = arr[0];
var four = arr[1];
var seven = arr[2];

console.log(two, four, seven); // 2 4 7

 

 

위의 코드를 보면 기존의 ES5에서는 배열의 값을 가지고 올 때, 각각의 값을 따로 선언 및 할당 해주는 과정이 필요했다.

 

 

 

// ES6

const num = [2, 4, 7];

// after

const [two, four, seven] = num;

console.log(two, four, seven); // 2 4 7

 

 

하지만 ES6에서는 이런 형태를 비구조화 하는 동작을 통해 여러가지 선언 및 할당 과정을 한번에 처리할 수 있도록 하는 것이다.

 

위의 코드에서는 num 배열의 값을 비구조화를 통해 차례대로 two, four, seven 변수에 넣어준 것이다.

 

그렇다면 여기서 응용할 수 있는 것이 있다.

 

 

const num = [2, 6, 4, 9, 7];

const [two, , four, , seven] = num;

console.log(two, four, seven) // 2 4 7

 

이렇게 비구조화를 사용하게 된다면, 해당 배열에서 필요한 값만을 선언 및 할당하여 가지고 올 수도 있게된다.

 

객체

 

이러한 비구조화 방식은 배열뿐 아니라 객체에서도 활용이 가능한데

 

먼저 사용하는 예시를 보고 설명해보겠다.

 

 

// ES5

var obj = { plus: "+", minus: "-" };

var plus = obj.plus;
var minus = obj.minus;

console.log(plus, minus); // + -

 

기존의 ES5에서는 객체로부터 값을 가지고 오는 동작을 하기 위해서는

 

해당 객체에서 원하는 프로퍼티의 키(이름)값을 우리가 할당하려는 변수의 값에 넣어주어야한다.

 

하지만 Destructuring을 사용하면 더욱 간단하게 선언 및 할당이 가능하다.

 

아래의 코드를 보자.

 

 

const obj = { plus: "+", minus: "-" };

const { plus, minus } = obj;

console.log(plus, minus); // + -

 

ES5에서 했던 동작을 동일하게 ES6에서는 객체의 각 프로퍼티를 객체로부터 추출하여 해당 프로퍼티의 키(이름)값을 변수리스트에 할당하는 과정으로 해결할 수 있다.

 

또한, 중첩 객체의 경우에는 아래와 같은 방식으로 사용이 가능하다.

 

 

const person = {
	name: 'Park',
    detail: {
    	height: 175,
        city: 'Incheon'
    }
};

const { detail: { height } } = person;

console.log(height); // 175

 

마치며

 

이번 글도 poiemaweb의

 

https://poiemaweb.com/es6-destructuring

 

을 공부하며 작성한 글입니다.