비 구조화 할당

a.k.a. 구조 분해 할당

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식

Array

let a, b, c, d, e, rest;
let numArr = [1, 2, 3, 4, 5];
let numArr2 = [1]

// 1
[a, b, c, d, e] = numArr;
console.log(a, b, c, d, e); // 1 2 3 4 5

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

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

function add([one, two, ...rest]) {
  console.log(one + two, rest); // 3 [3, 4, 5]
}

• 배열에 어떤 원소가 들어가 있는지 미리 알고 있으면 위처럼 사용할 수 있다.
  1. 배열 전부를 각각의 변수에 대입하는 방식
  2. 배열의 일부를 사용하고 나머지를 ...의 표현식으로 사용
  3. 배열에 존재하지 않는 값도 표현식 사용시 default value로 줄 수 있다.
• 함수의 인자로도 비 구조화 할당을 이용할 수 있다. 이것은 아래에 적힌 객체도 마찬가지다.

Object

let obj = {
  value: 3,
  name1: 'a',
  trash: '...',
  trash2: '....',
};

let { value, name1, ...rest } = obj
console.log(value, name1, rest); // 3 a {trash: '...', trash2: '....'}

• Array와 마찬가지로 rest문법을 사용할 수 있다.

let obj = {
  value: 3,
}

let { value, value2 } = obj;
console.log(value, value2) // 3 undefined
let { value, value2 = 4 } = obj
console.log(value, value2) // 3 4

• default value 지정 가능

let dog = {
  name: 'poppy',
  age: '5'
}

let { name: nickname, age } = dog;
console.log(nickname, age) // poppy 5

• object의 key value를 다른 이름으로 지정해서 사용 가능