[자바스크립트 / Vanilla JS] 디스트럭처링이란 ? (객체 디스트럭처링, 배열 디스트럭처링)

❗ 디스트럭처링이란 ?

MDN은 디스트럭처링을 다음과 같이 정의한다.

" 디스트럭처링 할당 문법은 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식이다 "

 

먼저 객체 디스트럭처링부터 알아보자.

 

---

✔ 객체 디스트럭처링

예전에는 객체에서 변수를 생성하려면 다음과 같은 방식으로 코드를 작성했다.

var person = {
   first: "JiWoo",
   last: "Kim",
};

var first = person.first;
var last = person.last;

ES6에서는 더 간결하게 다음과 같은 방법을 사용한다.

const person = {
   first: "JiWoo",
   last: "Kim",
};

const {first, last} = person;

console.log(first); // "JiWoo"

console.log(last); // "Kim"

디스트럭처링을 이용하여 person이 가진 속성에 접근함과 동시에 해당 속성 이름으로 변수 선언이 가능함을 알 수 있다.

 

다음과 같이 중첩된 객체 형태로 데이터가 주어진 경우에도 동일한 방법을 적용할 수 있다.

const person = {
    first: "JiWoo",
    last: "Kim",
    links: {
             social: {
                facebook: "Hi facebook",
                instagram: "Hi instagram"
                     },
             website: "website"
           }
 };
 
 console.log(person.links.social)
 // { facebook: 'Hi facebook', instagram: 'Hi instagram' }

 const {facebook} = person.links.social;
 console.log(facebook)
 // Hi facebook

 const {instagram} = person.links.social;
 console.log(instagram)
 // Hi instagram

변수의 이름을 객체의 속성과 동일하게 지정하는 데 그치지 않고, 다음과 같이 변수 이름을 바꿀 수도 있다.

const {facebook: fb} = person.links.social;
// persom.links.social.facebook 프로퍼티를 찾아 fb라는 변수로 명명함
console.log(fb);       // facebook
console.log(facebook); // RefernceError: facebook is not defined

이코드는 const {facebook: fb} 식의 문법을 사용하여 person.links.social 객체의 속성 facebook을 대상으로 지정하고 const 변수를 fb라고 명명한다. 변수명이 facebook이 아니기 때문에 facebook 값을 출력하려 하면 오류가 발생한다.

 

다음과 같이 기본값을 전달할 수도 있다.

// 변수를 fb로 다시 명명하고 기본값을 설정한다.
const {facebook: fb = "facebook"} = person.links.social;

---

✔ 배열 디스트럭처링

배열을 디스트럭처링 할 때는 객체의 디스트럭처링과는 달리 {}가 아닌 []를 사용한다.

const person = ["Kim", "JiWoo", 27];
const [name, surname, age] = person;

생성하려는 변수의 수가 배열의 원소보다 적다면 어떻게 할까 ? 

const person = ["Kim", "JiWoo", 27];
// age(27)은 필요하지 않으므로 뺀다.
const [name, surname,] = person;
// 27은 어떤 변수에도 할당되지 않는다.
console.log(name, surname);
// Kim JiWoo

나머지 모든 값을 얻고 싶다면 레스트 연산자를 사용하면 된다.

const person = ["Kim", "JiWoo", "Park", "Jiwoong"];
// 레스트 연산자를 사용하여 나머지 값 전체를 얻는다.

const [name, surname, ...food] = person;

console.log(food);
// ["Park", "Jiwoong"];

console.log(name);
// Kim

이 예에서 배열의 처음 두 값은 name과 surname에 할당되고 나머지는 food 배열에 할당된다.

(그래서 레스트 연산자라고 부른다).

 

...가 레스트 연산자를 의미한다.

---

✔ 디스트럭처링을 이용하여 변수 교체하기

디스트럭처링 할당을 사용하면 변수의 값을 매우 쉽게 서로 교체할 수 있다.

예제를 바로 살펴보자.

let hungey = "yes";
let full = "no";

[hungry, full] = [fll, hungry];

console.log(hungry, full);
// no yes

완전 쉽다~!

 

출처 : 모던 자바스크립트 핵심 가이드 서적