Spread syntax(...)

* ES2015에서 새로 추가된 syntax이다.

* 병합, 구조 분배 할당 등에 다양하게 활용할 수 있다.

 

* Spread operator - object merge(1)

const pd = {
	nickname: 'DY',
    email: 'hello@naver.com'
}

const pbd = {
	age: 28
}

const user = {
	...pd,
    ...pbd
}

각 오브젝트를 합쳐 만들고 싶을 때 

user 오브젝트에 각각 오브젝트를 합친다

흩뿌려 user안에 들어간다 생각하면 이해가 쉽다

 

* Spread operator - object merge(2)

const override = {
	email: 'dy@naver.com',
    pwd: '1234'
}

const config = {
	email: 'default@naver.com',
    pwd: '0000',
   	number: '1234',
    ...override,
}

config에 ...override를 추가 시 email, pwd 명이 같은 부분들이 override되어 email, pwd값이 상단 override의 값으로 변경된다. 무조건 제일 하단에 넣어줘야한다. 안그럼 에러 발생

# 순서가 제일 중요

 

* Spread operator - object rest

const user = {
	nickname: 'dy',
    age: 28,
    email: 'dy@naver.com',
}

const {nickname, ...personalData } = user
console.log(personalData)// {age: 28, email: 'dy@naver.com'}

personalData에 nickname을 제거한 후 가져온다.

 

* Spread operator - array merge

const pets = ['dog', 'cat']
const predators = ['wolf', 'cougar']
const animals = [...pets, ...predators]

console.log(animals) //['dog', 'cat', 'wolf', 'cougar']

배열을 합치고 싶을 때 저렇게 선언하면 pets, 순서대로 각각 animals에 합쳐진다.

 

* Spread operator - array rest

const [head, ...rest] = [1, 2, 3]
console.log(head) //1
console.log(rest) //2, 3

제일 첫 번째 head는 1로 나오고 나머지 rest로 호출하면 head 외 나머지 값이 나온다.

 

* 예제 소스

const a = [1, 2, 3, 4, 5]

const [head, ...rest] = a
//console.log(head, rest)

const shoudOverride = true
const personalData = {
  email: 'dy@naver.com',
  pwd: '1234',
}

const override = {
  email: 'heello@naver.com',
}
const publicData = {
  nickname: 'dy',
}

const user = {
  ...personalData,
  ...publicData,
  ...(shoudOverride
    ? {
        email: 'ddddyy@naver.com',
      }
    : null),
}

console.log(user)

//function 형
function foo(head, ...rest) {
  console.log(head)
  console.log(rest)
}
foo(1, 2, 3, 4)