1. 구조 분해 할당(객체)

const user = {
  name: 'Kim',
  age: 27,
  email: 'yhkim8246@gmail.com'
}
const {name, age} = user
console.log(`저의 이름은 ${name}입니다.`) // Kim 출력
console.log(`저의 나이는 ${age}입니다.`) // 27 출력

JavaScript는 구조 분해 할당(Destructuring assignment) 기능을 제공한다. 구조 분해 할당이란 객체의 구조를 분해하여 원하는 속성 값을 할당해주는 방식입니다. 속성의 개수가 많을 경우 필요한 속성 값만 가져다 쓸 수 있기 때문에 코드를 단순화 할 수 있는 장점이 있다.

const user = {
  name: 'Kim',
  age: 27,
  email: 'yhkim8246@gmail.com'
}
const {name : beApro, age} = user
console.log(`저의 이름은 ${beApro}입니다.`) // Kim 출력
console.log(`저의 나이는 ${age}입니다.`) // 27 출력

잘 쓰이지는 않지만 구조 분해 할당을 할 때, 속성명 : 사용할 속성명으로 할당해주면 기존의 속성명이 아니라 사용자가 지정한 속성명으로 속성값을 사용할 수 있다.

---

2. 구조 분해 할당(배열)

const foods = ['Bread', 'Soup', 'Dongas']
const [a, b, c] = foods
console.log(a,b,c) // Bread, Soup, Dongas 출력

배열 또한 구조 분해 할당이 가능하다. 객체의 구조 분해 할당과 다른 점은 객체는 속성명으로 할당을 해주었다면 배열은 인덱스 순으로 할당해 준다는 것이다. 만약 3번째의 값만 할당받고 싶다면 다음과 같은 코드를 이용하면 된다.

const foods = ['Bread', 'Soup', 'Dongas']
const [, , c] = foods
console.log(c) // Dongas 출력

---

3. 전개 연산자(Spread)

const foods = ['Bread', 'Soup', 'Dongas']
function toObject(a,b,c){
 return{
   a:a,
   b:b,
   c:c
 }
}
console.log(toObject(...foods)) //Bread, Soup, Dongas 출력

전개 연산자를 사용하여 코드를 간편화 할 수 있다.
...foods를 사용하여 toObject에 foods에 값들을 인자로 넣어줄 수 있다.
현업에 축약형으로 많이 사용되므로 알아두면 좋다.