Destructuring(디스트럭처링)은 자바스크립트의 강력한 기능입니다.

배열이나 객체를 요소를 별도의 변수에 손쉽게 할당할 수 있도록 해줄뿐만 아니라
JSON 데이터, 중첩 객체, 배열 등을 손쉽게 접근할 수 있도록 해줍니다.

디스트럭처링 예제 코드를 통해 더 자세히 알아보겠습니다.

const website = {
  url: "https://google.com",
  alias: "Google"
};

// 일반적인 변수 할당
var url = website.url;
var alias = website.alias;

// 디스트럭처링(destructuring)
var { url, alias } = website;

만약 디스트럭처링 구문을 사용할때 좌변에 객체의 속성과 매치되지 않는 변수명을 전달하면 해당 변수는 undefined 가 할당되게 됩니다.

계속해서 더 많은 디스트럭처링 구문에 대해 알아보겠습니다.


디스트럭처링(Destructuring)을 이용해 변수값 교환하기

기존에는 변수값을 교환할때 아래 코드 처럼 임시 변수를 이용해 변수의 값을 교환하는 방법을 사용했을텐데요.

var a = 1;
var b = 2;
var tmp;

tmp = a;
a = b;
b = tmp;

console.log(a, b);

// 실행결과: 2 1

디스트럭처링(Destructuring)을 이용하면 한줄만 작성해서 쉽게 변수의 값을 교환할 수 있습니다.

var a = 1;
var b = 2;

[a, b] = [b, a];

console.log(a, b);

// 실행결과: 2 1

위 처럼 2개의 변수만이 아니라 그 이상의 변수도 한번에 교환 할 수 있습니다.

var a = 1;
var b = 2;
var c = 3;

[a, b, c] = [b, c, a]

console.log(a, b, c);

// 실행결과: 2 3 1

중첩된 속성 접근 및 기본값 설정

중첩된 객체도 디스트럭처링(Destructuring) 을 활용해서 손쉽게 다룰수 있습니다.

const website = {
    url: "https://google.com",
    alias: "Google",
    services: {
        mail: "Gmail"
    }
};

var { services: {mail} } = website;

console.log(mail)

// 실행결과: "Gmail"

참고: 위 코드에서 services는 디스트럭처링되지 않습니다.

오직 마지막 중첩 속성만 할당이 됩니다. ( 위 코드에서는 mail )

services 속성을 얻고 싶다면 아래 처럼 해야합니다.

var { services, services: {mail} } = website;

만약 할당하려는 키가 객체에 존재하지 않는 속성이라면 undefined가 할당됩니다.

그리고 undefined가 할당되는 경우를 방지하기 위해 기본 값을 설정하는 방법을 사용할 수 있습니다.

const website = {
    url: "https://google.com",
    alias: "Google",
    services: {
        mail: "Gmail"
    }
};

var { services: { mail = 'NA', blog = "NA" } } = website;

console.log(blog)

// 실행결과: "NA"

services 속성 자체도 항상 존재하는 속성이 아니라면 아래 처럼 기본 값을 할당해줄 수 있습니다.

var { services: { mail = 'NA', blog = 'NA'} = {} } = website;

별칭을 사용한 디스트럭처링(Destructuring)

별칭(Aliasing)은 전역 객체 또는 라이브러리를 임포트하는 경우 네임스페이스 충돌을 방지하는데 도움이 됩니다.

디스트럭처링 별칭을 사용해서 import 문을 사용하는 방법은 아래와 같습니다.

import { some-func1, some-func2 } from 'some-library';

//별칭 사용
import { some-func1 as newFunc } from 'some-library';
someFunc();

import { * as some-library } from 'some-library'

임포트하는 경우에는 as 로 별도의 이름을 지정해서 할당해서 사용하는데,
일반적인 디스트럭처링은 아래 처럼 콜론(:)으로 별도의 별칭을 지정해야 합니다.

var { services: { mail: another_name }} = website;

console.log(another_name) // Gmail

배열 요소 접근

배열의 디스트럭처링은 객체의 디스트럭처링과 큰 차이가 없습니다.

const arr = [1,2,3]; 
const [a, b] = arr;

console.log(a, b)

// 실행결과: 1 2

기본값을 지정하려면 = 이후에 기본값을 할당합니다.

const arr = [1, 2, 3];
const [a, b, c, d = "NA"] = arr;

console.log(a, b, c, d);

// 실행결과: 1 2 3 "NA"

만약 특정 요소를 무시하고 싶다면 콤마(,) 써서 비워두면 된다.

// 2번째 요소 무시
var [first,,third] = arr;

그러나 콤마(,)를 사용하면 큰 배열인 경우 굉장히 많은 콤마를 적어야할 것이다.
그런경우 콤마를 대체해서 객체 디스트럭처링 구문을 사용하면 편리하다.

const arr = ['a','b','c','d'];
const {0: first, 3: fourth} = arr;
console.log(fourth) //d

const {0: first, 3: fourth, 9: tenth = 'z'} = arr;

위 코드의 마지막 줄에서 tenth = 'z'로 배열에 존재하지 않는 인덱스에 기본값을 할당하였다.

또한 다음과 같은 방식으로 중첩된 배열의 요소들을 접근할 수 있다.

const arr = ['a', [1, 2, 3]
const [first, [one, two, three]] = arr;

Rest 파라미터 구문을 사용해 속성을 생략

Rest 파라미터 구문은 다수의 요소를 새로운 요소에 새로 할당해주는 문법이다. 디스트럭처링시에 특정 요소를 생략하고자 할 때 유용하다.

const arr = ["Hello", "How" , "are", "you"];
var [hello,...remaining] = arr;
console.log(remaining) // ["How" , "are", "you"]

위의 표현식은 배열 복제에도 사용할 수 있습니다.

또한 중첩된 객체를 검색하거나 제거하는 데에도 동일한 방식을 사용할 수 있습니다.

const website = {
    url: 'https://google.com',
    services: {
    	mail: 'Gmail'
    }
};

var { url, ...remaining } = website;

console.log(remaining);

// 실행결과: { services: { mail: "Gmail" } }

디스트럭처링(Destructuring)의 계산된 속성 사용

지금까지 디스트럭처링시 정적인 키들을 사용했습니다.
그러나 동적인 키를 가지고 있는 객체라면 계산된 속성(computed properties)를 사용할 필요가 있습니다.

계산된 속성은 [] 로 지정합니다.

const website = {
    url: 'https://google.com',
    services: {
    	mail: 'Gmail'
    }
}

let url = 'url';
const { [url] : site_url } = website;
console.log(site_url);

// 실행결과: "https://google.com"

배열의 속성을 이용할 수도 있습니다.

const website = {
  url: "https://google.com",
  alias: "Google",
  services: {
    mail: "Gmail"
  }
};

var arr = ["url", "alias"];
var { [arr[0]]: site_url, [arr[1]]: site_alias } = website;

console.log(site_url, site_alias);

// 실행결과: "https://google.com" "Google"

결론

처음 디스트럭처링(Destructuring) 을 접하면 뭔가 까다로운것처럼 느껴질 수 있지만,
지속적으로 사용함으로써 점차 익숙해지고 이후에 복잡한 배열이나 객체를 다루는데 있어 최적의 코드를 작성하는데 도움이 될 것으로 생각됩니다.

감사합니다.