[JavaScript] Detructuring

Destructuring? 비구조화??

Destructuring 은 ES6 부터 등장한 개념입니다. 기존에 객체를 선언했던 구조를 반대로 사용한다고 이해하시면 좋을 것 같습니다.

먼저 코드 예시부터 보겠습니다.

let arr = ["1", "2", "3"];

기본적인 배열 선언은 위와 같습니다. 1, 2, 3 이라는 데이터에 접근하기 위해서는 arr[0] 이런식으로 접근해야만 했습니다. 하지만 destructuring 을 이용하면 다음과 같은 접근도 가능합니다.

// destructuring 이용 X
let arr = ["1", "2", "3"];
let first = arr[0];
let second = arr[1];
let third = arr[2];
console.log(first, second, third); // 1 2 3


// destructuring 이용 O
let arr = ["1", "2", "3"];
let [first, second, third] = arr;
console.log(first, second, third); // 1 2 3

처음 예시를 보면 1, 2, 3 이라는 문자열을 얻기 위해서는 3번의 접근을 통해 first, second, third 변수에 할당을 해주어야 합니다.

그러나 두 번째 예시와 같이 destructuring 을 이용해 [first, second, third] 라는 배열로 비구조화를 하면 여러 값들을 한번에 변수들에 할당할 수 있는 것입니다. 

계속해서 다양한 예제를 살펴보겠습니다.

let [father, mother, ...children] = ["아빠", "엄마", "오빠", "나"];
console.log(father); // 아빠
console.log(mother); // 엄마
console.log(children); // ["오빠", "나"]

이렇게 spread operator 을 이용하면 앞에 변수 개수를 제외한 나머지를 children 에 배열로 받을 수 있습니다.

destructuring 은 배열뿐만 아니라 객체에도 동일하게 적용됩니다. 다음의 예제를 보겠습니다.

({ father, mother } = { father: 1963, mother: 1965 });
console.log(father); // 1963
console.log(mother); // 1965

({father, mother, ...children} = {father: 1963, mother: 1965, brother: 1992, me: 1995});
console.log(father); // 1963
console.log(mother); // 1965
console.log(children); //{brother: 1992, me: 1995}

이런식으로 객체에서도 동일하게 사용할 수 있습니다. 이 때, 주의하셔야 할 것은 할당문을 둘러싼 (...) 입니다. 괄호는 선언 없이 객체 리터럴을 비구조화하려고 할 때 필수적으로 필요합니다. 즉, 첫 번째 줄은 let {father, mother} = { father: 1963, mother: 1965} 와 같습니다.

이번에는 효율적으로 사용하는 예시를 알아보겠습니다. 보통 두 변수의 값을 바꿀 때에는 하나의 temp 라는 변수를 통해 swap 하게 되는데요. 이 경우에 destructuring 을 이용하면 한 줄의 코드로 swap 을 구현할 수 있습니다.

let a = 1;
let b = 2;

// 기존 swap 코드
let temp = a;
a = b;
b = temp;
console.log(a, b); // 2 1

// destructuring 적용한 swap 코드
[a, b] = [b, a];
console.log(a, b); // 2 1

위의 예시처럼 destructuring 을 이용하면 별도의 temp 변수를 선언할 필요없이 한 줄의 코드로 a, b 의 값을 바꿀 수 있습니다.

물론 존재하는 값을 무시하거나, 없는 값에 대한 기본값을 설정할 수도 있습니다. 다음의 예제를 보겠습니다.

// 값이 없는 경우에는 기본값으로 설정되는 예제
let monday, sunday;

[monday = "출근하지 않는다.", sunday = "출근하지 않는다."] = ["출근한다."];
console.log(monday); // 출근한다.
console.log(sunday); // 출근하지 않는다.

// 일부 값 무시하는 예제
function getNameArr() {
    return ["권", "현", "아"];
}

var [firstLetter, , lastLetter] = getNameArr();
console.log(firstLetter); // 권
console.log(lastLetter);  // 아

이번에는 destructuring 을 이벤트 객체에 적용해보겠습니다.

Event 객체에 적용하기

let onClickDocument = function (e) {
    console.log(e.target);
    for (let child of e.target.children) console.log(child);
    console.log(e.target.parentNode);
    e.target.parentNode.addEventListener("click", function (e) {
        console.log("부모 클릭!");
        
    })
    ...
};

document.addEventListener("click", onClickDocument);

먼저 위의 코드를 보겠습니다. 물론 예시를 설명하기 위해 어지럽게 써논 코드이므로 이해 부탁드립니다.

위의 코드에서 보면, e.target 에 굉장히 많은 접근을 하고 있습니다. 물론 저렇게 한다고 해서 이 짧은 코드에서 성능에 문제가 발생하지는 않지만, 결국 프로퍼티 중에서 찾는 행위를 계속해서 하는 것이기 때문에 좋은 방법은 아닙니다.

이 때, destructuring 을 이용하면 아래와 같이 수정할 수 있습니다.

let onClickDocument = function ({target}) {
    ({parentNode : parent, children: children} = target);
    console.log(parent, children);
    ...
};

document.addEventListener("click", onClickDocument);

위의 코드와 같이 destructuring 을 적용하면 계속 e.target.... 과 같이 프로퍼티를 계속 검색하지 않아도 간단하게 한 번에 여러 변수들에 값을 할당해 그 변수들을 사용할 수 있습니다.

위와 같이 객체의 여러 프로퍼티를 반복적으로 사용하는 경우에 destructuring 을 이용하면 효율적인 코드를 구현할 수 있습니다.

자세한 내용은 MDN 을 살펴보시면 좋을 것 같습니다 :)