1. 비구조화 할당 (구조분해) 문법

const obj = {a : 1, b : 2}
const {a,b} = obj;

이렇게하면 a에는 1 b에는 2가 할당된다.

• 함수의 파라미터에서 구조분해

const obj = {a : 1 , b : 2};
function print({a.b}){
console.log(a);
console.log(b);
}

여기서 오브젝트의 값을 주어주지 않으면 undifined가 나타난다.

• 비구조화 할당하면서 이름바꾸기
  const animal = {
  name : '또치',
  type : '강아지'
  };

const {name : nickname} = animal;
console.log(nickname)

이러면 name을 nickname으로 바꿔서 선언한 것이다.

• 배열의 비구조화 할당
  비구조화는 객체만 할 수 있는게 아니고 배열도 가능하다.

  const arr = [1,2];
  const [a,b] = arr;

• 기본값을 지정할 수도 있다.

  const arr = [1];
  const [one, two = 2] = arr;

• 깊숙히 있는 객체 비구조화

  const deepObject = {
  state: {
  information: {
  name: 'velopert',
  languages: ['korean', 'english', 'chinese']
  }
  },
  value: 5
  };

여기서 name, languages,value값들을 밖으로 빼내고 싶을때는??

const {name,languages} = deepObject.state.information
const { value } = deepObject

const extracted = {
name,
languages,
value
}

2. spread

• Spread
  단어 뜻 그대로 펼치다!!!!

  const dog = {
  name : '퐁키'
  }

  const cutedog = {
  name : '퐁키',
  attrubute : 'cute'
  }

  const whiteCutedog = {
  name : '퐁키',
  attrubute : 'cute',
  clolor : 'white'
  }

위 코드의 핵심은 기존의 것을 건들이지 않고, 새로운 객체를 생성하는 것이다. 이러한 상황에 필요한게 spread문법!

const dog = {
name : '퐁키'
}

const cuteDog = {
...dog,
attrubute : 'cute'
}

const whiteCuteDog = {
...cuteDog,
attrubute : 'cute',
color : 'white'
}

스프레드 연산자는 객체뿐 아니라 배열에도 적용이 가능하다!!

출처 : 벨로퍼트와 함께하는 모던자바스크립트 블로그!