[JS 개념정리] 구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

배열 디스트럭처링

변수 할당하기

배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다.

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

💡 배열 디스트럭처링은 배열에서 필요한 요소만 추출하여 변수에 할당하고 싶은 경우에 유용하다.

const today = new Date(); // Tue May 21 2019 22:19:42 GMT+0900 
const formattedDate = today.toISOString().substring(0, 10); // "2019-05-21"
const [year, month, day] = formattedDate.split('-');
console.log([year, month, day]); // [ '2019', '05', '21' ]

📍 반복문 안에서 사용할 때

const instruments = {
	guitar: 30,
    base: 20,
    drum: 25,
    piano: 18
}

const datas = Object.entries(instruments) // 배열 반환
.
.
.
for(const [data, value] of this.datas){ ... }
// data = key, value = value 

일부 반환 값 무시

필요하지 않은 반환 값을 무시할 수 있다. 인덱스 순서 기준으로 할당된다.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

기본값 설정

분해한 값이 undefined일 때 대신 사용하는 값.

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

변수 값 교환하기

임시 변수 없이 값 교환이 가능하다.

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

변수에 배열의 나머지 할당하기

spread문법 사용

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

---

객체 디스트럭처링

프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.

const obj = { firstName: 'Ungmo', lastName: 'Lee' }

const { lastName, firstName } = obj;
console.log(firstName, lastName); // Ungmo Lee

변수 할당하기

const { prop1, prop2 } = { prop1: 'a', prop2: 'b' };
console.log({ prop1, prop2 }); // { prop1: 'a', prop2: 'b' }

// 기본값 설정하기
const { prop1, prop2, prop3 = 'c' } = { prop1: 'a', prop2: 'b' };
console.log({ prop1, prop2, prop3 }); // { prop1: 'a', prop2: 'b', prop3: 'c' }

새로운 변수 이름으로 할당하기

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

중첩된 객체 구조 분해

const person = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

const { address: { city } } = person;
console.log(city); // 'Seoul'

새로운 변수 이름으로 할당할 수도 있다.

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

객체 구조 분해에서 Rest

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

---

참고https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
모던 자바스크립트 Deep Dive