Destructuring Assignment

---

📢 Destructuring Assignment는 배열, 문자열과 같은 Iterable 또는 객체를 destructuring(구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.

Array Destructuring Assignment

---

배열 destructuring assignment의 대상은 iterable이어야 하며, 할당 기준은 index이다.

순서대로 할당된다.

const arr = [1, 2, 3];

// 변수 a, b, c를 선언하고 배열 arr를 destructuring하여 할당한다.
const [a, b, c] = arr;

console.log(a, b, c); // 1, 2, 3

변수의 개수와 이터러블의 요소의 개수가 반드시 일치할 필요는 없다.

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

const [c, d] = [1, 2, 3];
console.log(c, d); // 1 2

const [e, ,f] = [1, 2, 3];
console.log(e, f); // 1 3

변수에 기본값을 설정할 수 있다.

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

// 기본값보다 할당값이 우선시 된다.
const [d, e, f = 6] = [1, 2, 3];
console.log(d, e, f); // 1 2 3

💡 배열을 arguement로 받는 함수의 parameter에도 사용할 수 있다.
이 경우 코드를 좀 더 간결하고 가독성 좋게 표현할 수 있다.

const arr = [1, 2, 3];

function print([a, b]) {
  return `첫 번째는 ${a}이고 두 번째는 ${b}이다.`;
}

print(arr); // '첫 번째는 1이고 두 번째는 2이다.'

변수에 Rest parameter와 유사하게 Rest element를 사용할 수 있다. 반드시 마지막에 위치해야 한다.

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

Object Destructuring Assignment

---

객체 destructuring assignment의 대상은 object이어야 하며, 할당 기준은 property의 key이다.

순서는 의미 없고 변수 이름과 프로퍼티 키가 일치하면 할당된다.

const obj = { name: 'kim', age: 10 };

// 변수 name, age를 선언하고 객체 obj를 destructuring하여 할당한다.
const {name, age} = obj;

console.log(name, age); // 'kim' 10

변수에 기본값을 설정할 수 있다.

const obj = { name: 'kim', age: 10 };

const { name, age, gender = 'male' } = obj;
console.log(name, age, gender); // 'kim' 10 'male'

// 기본값보다 할당값이 우선시 된다.
const { name = 'park', age } = obj;
console.log(name, age); // 'kim' 10

💡 객체를 arguement로 받는 함수의 parameter에도 사용할 수 있다.
이 경우 코드를 좀 더 간결하고 가독성 좋게 표현할 수 있다.

const obj = { name: 'kim', age: 10 };

function print({ name, age }) {
  return `이름은 ${name}이고 나이는 ${age}이다.`;
}

print(obj); // '이름은 kim이고 나이는 10이다.'

배열 구조분해할당과 객체 구조분해할당을 혼용할 수도 있다.

const list = [
  { id: 1, name: 'kim', age: 10 },
  { id: 2, name: 'park', age: 7 },
  { id: 3, name: 'lee', age: 12 },
];

const [, , { name }] = list;
console.log(name); // 'lee'

중첩 객체에서도 사용 가능하다.

const person = {
  name: 'kim',
  address: {
    country: 'korea',
    city: 'seoul',
  },
};

// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const {
  address: { city },
} = person;
console.log(city); // 'seoul'

변수에 Rest parameter와 유사하게 Rest property를 사용할 수 있다. 반드시 마지막에 위치해야 한다.

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
};

const { a, ...rest } = obj;
console.log(a, rest); // 1 { b: 2, c: 3, d: 4 }

String 또한 iterable이므로 destructuring assignment의 대상이다.

const str = 'abcdefg';
const [first, second] = str;
console.log(first, second); // 'a' 'b'