Chapter 06: 디스트럭처링 - 구조 분해 할당 (Destructuring)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

 

6.1 객체 디스트럭처링

---

// ES6 이전
var person  = {
  first: "Alberto",
  last: "Montalesi"
}

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

// ES6
const person = {
  first: "Alberto",
  last: "Montalesi"
}

const { first, last } = person;

중첩된 객체 형태로 데이터가 주어진 경우에도 사용 가능하다.

const person = {
  name: "Alberto",
  last: "Montalesi",
  links:{
    social: {
      facebook: "https://www.facebook.com/alberto.montalesi",
    },
    website: "http://albertomontalesi.github.io/"
  }
}

const { facebook } = person.links.social;

다음과 같이 변수 이름을 바꾸어 지정할 수도 있다.

const { facebook:fb } = person.links.social;
// person.links.social.facebook 프로퍼티를 찾아 fb라는 변수로 명명
console.log(fb); // https://www.facebook.com/alberto.montalesi
console.log(facebook); //ReferenceError: facebook is not defined

기본값을 전달할 수도 있다.

const { facebook:fb = "https://www.facebook.com"} = person.links.social;

6.2 배열 디스트럭처링

---

기본 문법

const person = ["Alberto","Montalesi",25];
const [name,surname,age] = person;

생성하려는 변수가 배열의 원소보다 적은 경우

const person = ["Alberto","Montalesi",25];
const [name,surname] = person;
console.log(name,surname);
// Alberto Montalesi

나머지 모든 값을 얻고 싶을 경우: rest 연산자 사용

const person = ["Alberto", "Montalesi", "pizza", "ice cream", "cheese cake"];
const [name,surname,...food] = person ;
console.log(food);
// Array [ "pizza", "ice cream", "cheese cake" ]

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

---

구조 분해 할당을 사용하면 변수의 값을 매우 쉽게 서로 교체할 수 있다.

let hungry = "yes";
let full = "no";
// after we eat we don't feel hungry anymore, we feel full, let's swap the values

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