5. destructuring

이번에 다뤄볼 주제는 destructuring 입니다. 일단 destructuring은 분해, 파괴 이런 의미로 쓰이는 단어인데요, MDN에서 검색해보면 구조 분해 할당 이라는 파트로 설명을 하고 있습니다. 기본 요약설명은 이렇습니다.

✔️구조 분해 할당

구조 분해 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)입니다.

배열이나 객체같은 여러가지 데이터를 가지고 있는 자료형에 대해서 사용자가 원하는 속성 값을 사용하고자 할 때 유용하게 쓰입니다. 일반적인 문자열이나 숫자와 같은 자료형에서는 쓰이지 않고, 객체나 배열에 대해서 활용할 수 있는 방법입니다. 

❖ 배열 디스트럭처링

: 배열은 연속된 데이터를 인덱스를 통해 접근하여 배열 각각의 속성 값을 제어하게 되는데요, 배열의 속성을 제어하는 코드를 몇개 예시로 들어보겠습니다.

1. 두 변수의 값 바꾸기(swap)

//ES5
var values = [0,1];
//assignment
var x = values[0],
    y = values[1];
//swap
var temp;
temp = x;
x = y;
y = temp;

cs

=> values 라는 배열을 생성하고 각각의 x,y 변수에 값을 할당한 후 temp라는 변수를 이용해서 값을 바꾸는 작업의 단계를 거치게 됩니다. 별거 아닌 작업인데 코드가 생각보다 좀 길죠. ES6에서의 destructuring 을 통해서는 어떻게 변화되는지 보겠습니다.

//ES6
var values = [0,1];
//assignment
var [x,y] = values;
//swap
[x,y] = [y,x];

=> 코드가 굉장히 단순해졌습니다. 할당하려는 변수를 배열로 선언하여 values의 값을 한번에 할당시켜버립니다. 물론 동일한 인덱스끼리 쌍을 맞춰서 할당이 됩니다. 예를들어 [x,y,z] = values 라고 했으면 마지막 z 는 undefined 값이 나오게 됩니다. 그리고 값을 바꾸는 swap 작업을 할 때에도 값을 바꾸려는 변수 두개를 순서를 바꿔서 배열로 값을 할당하는 작업을 하면 간단하게 값이 바뀌게 되죠.

2. 생략하기

var values = [3,6,9];
var [x,,z] = values;
console.log(x);    //result = 3
console.log(z);    //result = 9

var values = [1,[2,3],4];
var [a,[b,c],d] = values;
console.log(a,b,c,d);    //result = 1,2,3,4

=> 중첩된 배열 안에서도 동일하게 적용됩니다. 물론 생략도 가능합니다.

❖ 객체 디스트럭처링

: 배열 뿐만 아니라 객체 또한 굉장히 많이쓰게 되죠. 객체에서는 어떻게 디스트럭처링하는지 알아보겠습니다.

1. 값 할당

var values = {
    x:1,
    y:2
};
 
var {x: a, y: b} = values;
 
console.log(a,b) //result = 1 2

=> 배열과 방식은 크게 다르지 않은데 객체에서는 key와 key value 로 구분되어집니다. 그래서 위와같이 할당하고 싶은 변수를 key value 자리에 넣게 되면 값을 할당받을 수 있습니다.

2. 중첩된 객체

var values = {
    x:1,
    y:2,
    z: {
        z1:3,
        z2:4
    }
};
 
var {x: a, y: b, z:{z1: c, z2: d}} = values;    //result = 1 2 3 4

=> 중첩된 객체 또한 동일한 방식입니다. key value 자리에 변수를 넣어 그 값을 담게 됩니다.

3. 함수 디스트럭처링

function func(){
    return {
        x: 1,
        y: 2,
        z: [3,4,5]
    };
}
 
var {x: a, y: b, z: c} = func();
 
console.log(a);    //1
console.log(b);    //2
console.log(c);    //[3,4,5]

=> 객체를 반환하는 함수를 만들었는데 해당 함수를 호출해서 값을 할당받는 것 또한 가능합니다. 첫 번째 문항에서 값을 할당받는 과정을 단지 함수호출로 바꾼 것 뿐입니다. 또한 보다시피 함수와 배열을 섞어서 사용하는 것 또한 가능합니다.

(내용 출처 : https://medium.com/ecmascript-2015/es6-destructuring-13ca399f993a)