📒 목차

• 📌 구조분해할당이란?
• 📌 Syntax
• 📌 배열 구조분해
• 📌 객체 구조분해
• 📌 참조

---

📌 구조분해할당이란?

구조분해할당이란 배열 또는 객체의 속성을 해체하여 값을 개별 변수에 담을 수 있도록 하는 자바스크립트 표현식이다.

📌 Syntax

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

const [c, d, ...rest] = [1, 2, 3, 4, 5, 6, 7];
console.log(c); // 1
console.log(d); // 2
console.log(rest); // [3, 4, 5, 6, 7]

const { e, f } = { e: 1, f: 2 };
console.log(e); // 1
console.log(f); // 2

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

📌 배열 구조분해

foo에 one, two, three를 각각 저장한 후, 변수 one two three에 구조분해로 할당되어 출력되는 것을 확인 할 수 있다.

배열의 구조분해에서는 구조분해시 값들의 순서가 중요하다.

순서에 따라 구조분해가 이루어지기 때문에, 순서가 달라지게 되면 값이 오염되는 현상이 발생한다.

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

console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

📌 객체 구조분해

객체 a의 p, q가 변수 p, q에 구조분해로 할당되어 출력되는 것을 확인 할 수 있다.

객체의 구조분해에서는 구조분해시 값들의 이름이 중요하다.

이름에 따라 구조분해가 이루어지기 때문에, 이름이 달라지게 되면 값이 오염되는 현상이 발생한다.

var a = { p: 42, q: true };
var { p, q } = a;

console.log(p); // 42
console.log(q); // true

📌 참조

https://charming-kyu.tistory.com/23