구조분해할당(비구조화 할당)

구조분해 할당은 객체나 배열을 쉽게 분해하여 변수에 저장하는 기능입니다.

const [a, , c, d, e = 5] = [1, 2, 3]
console.log(a) // 1
console.log(c) // 3
console.log(d) // undefined
console.log(e)// 5

배열을 구조분해할당 할 때는 순서가 중요합니다.
변수의 순서와 요소의 순서가 일치하게 대입됩니다.
대입하고 싶지 않은 값은 비워둘 수 있고
없는값은 undefined를 대입해주며 기본값 설정도 가능합니다.

const obj = {
  name: '철수',
  body: {
    height: 120,
    weight: 35,
  }
}
const {name, body: {height: tall}, age, school = '다람쥐유치원'} = obj
console.log(name, tall, age, school) // '철수' 120 undefined '다람쥐유치원'

객체를 구조분해할당 할 때에는 객체의 키 값과 변수명이 일치해야 합니다.
변수명을 바꾸고 싶을 경우 새로 선언할 필요없이 tall에 할당 후 사용이 가능합니다.
없는 키 값을 변수로 받을 경우 undefined를 대입해주며 기본값을 설정해줄 수도 있습니다.

• 매개변수에도 똑같이 응용할 수 있습니다.

const destruct = ({name, age: a, tall = 120}) => {
  console.log(name) // '철수'
  console.log(a) // 7
  console.log(tall) // 120
}

destruct({name: '철수', age: 7})

rest

rest는 spread와 유사해 보이지만 역할에 많은 차이가 있습니다.
rest는 객체와 배열 그리고 함수의 파라미터에서 넘겨받은 값을 묶어줄 때 사용됩니다.

const child = {
  name: '철수',
  age: 7,
}

const { ...rest } = child
console.log(rest); // { name: '철수', age: 7 }

rest를 객체나 배열에서 사용할 때는 구조분해할당 문법과 함께 사용됩니다.
변수의 이름이 같을 필요가 없어 보통 rest를 변수이름으로 많이 사용하고, 얕은복사가 됩니다.

const child = {
  name: '철수',
  age: 7,
  body: {
    height: 120,
    weight: 35,
  }
}

const { name, ...rest } = child
console.log(name); // '철수'
console.log(rest); // { age: 7, body: { height: 120, weight: 35 } }

rest.age = 10
rest.body.height = 140

console.log(rest) // { age: 10, body: { height: 140, weight: 35 } }
console.log(child)
/*
{
  name: '철수',
  age: 7,
  body: { height: 140, weight: 35, age: 10 }
}
*/

속성을 따로 분리하고 싶은 경우 위와 같이 변수이름을 키와 같게 해 따로 뺄 수 있으며,
이때 ...rest가 마지막에 위치하지않고 뒤에 변수가 더 있게되면 에러가 발생합니다.

• 배열의 비구조화할당에서도 동일한 방법으로 적용이 가능합니다.

const a = [1, 2, 3];
const [one, ...rest] = a;

console.log(one); // 1
console.log(rest); // [2, 3]

• 함수 파라미터에서 사용하는 경우

const a = (one, ...rest) => {
  if (one === 1)
  return rest;
}

console.log(a(1, 2, 3)) // [2, 3]

이렇게 rest를 사용하면 함수가 넘겨받은 나머지 인자들을 배열로 묶어줍니다.
인자로 넘겨받는 매개변수의 개수가 몇개가 될지 모르는 상황에서 유용합니다.

• 함수의 인자에는 spread를 매개변수에는 rest를 사용하면 다음과 같이 응용도 가능합니다.

const sum = (...rest) => rest.reduce((a, c) => a + c);

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(sum(...numbers)) // 55

spread는 함수의 인자(argument)인 배열(numbers)이 여러 인자가 되게끔 펼치는 역할을
rest는 인자를 넘겨받은 매개변수(parameter)들을 배열(Array)로 묶어주는 역할을 하게 됩니다.