[모던 JavaScript] spread

Spread syntax (...)

💡 ES2015에서 새로 추가된 syntax
💡 병합, 구조 분배 할당(destructing) 등에 다양하게 활용할 수 있다.

spread❓ 흩뿌린다❓

Spread operator - object merge

personalData, publicData 2개의 object가 있고 이 두개를 합쳐서 user를 만들때, 두 object를 각각 퍼트려서 한 오브젝트 안에 합쳐주는 것을 볼 수 있다.
흩뿌려서 이 안에 들어가게 한다❓❗

const personalData = {
	nickname: 'SH',
  	email: 'sh@email.com',
}

const publicData = {
	age: 22,
}

const user = {
	...personalData,
  	...publicData,
}

❗ 기존에 있던 값 덮어쓰기도 가능 ❗

const overrides = {
	DATABASE_HOST: 'myhost.com',
  	DATABASE_PASSWORD: 'mypassword',
}

const config = {
	DATABASE_HOST: 'default.host.com',
  	DATABASE_PASSWORD: '****',
  	DATABASE_USERNAME: 'myuser',
  	...overrides,
}

overrides 위치 주의❗ 순서 주의❗

Spread operator - object rest

destructing에서도 활용 가능❗
nickname을 제외한 데이터 가져오기

const user = {
	nickname: 'SH',
  	age: 22,
  	email: 'sh@email.com',
}

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

Spread operator - array merge

배열에도 사용 가능❗
하나의 array로 병합

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

Spread operator - array rest

남은 원소들 묶어서 가져오기 ❗

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

Spread syntax의 활용

const shouldOverride = true

const user = {
  ...{
    email: 'sh@email.com',
    password: '****',
  },
  ...{
    nickname: 'SH',
  },
  ...(shouldOverride
    ? {
        email: 'abc@email.com', // shouldOverride가 ture일 때만 덮어씌움
      }
    : null),
}

console.log(user)

Spread syntax의 활용2

function fun(head, ...rest) {
  console.log(head)
  console.log(rest)
}

fun(1, 2, 3, 4)

결과
1
[ 2, 3, 4 ]