Spread Syntax(...)

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

Spread Opertaor - Object Merge (1)

const personalData = {
	nickname: 'JJ',
  	email: 'jinjubaek.dev@gmail.com',
};

const publicData = {
  age: 26,
} 

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

Spread Opertaor - Object Merge (2)

// 오버라이드 할 객체를 만들고
const overrides = {
	DATABASE_HOST: 'mypage.com',
  	DATABASE_PASSWORD: 'pass123',
}

const config = {
	DATABASE_HOST: 'default.host.com',
  	DATABASE_PASSWORD: '****',
  	DATABASE_USERNAME: 'Jinju',
  	...overrides, // ⭐뒤쪽⭐에 써주면
  // host와 password는 덮어씌워지고 username은 그대로 남는다
}

Spread Opertaor - Obeject Rest

destructuring에도 활용할 수 있다

const user = {
	nickname: 'Jinju',
  	age: 26,
  	email: 'jinjubaek.dev@gmail.com',
}

const { nickname, ...personalData } = user
console.log(personalData); // { age: 22, email: 'jinjubaek.dev@gmail.com'}
// nickname을 제외한 나머지가 출력이 된다

Spread Opertaor - Array Merge

Object뿐만 아니라 배열에도 사용할 수 있다

const pets = ['dog', 'cat'];
const predators = ['wolf', 'cougar'];
const animals = [...pets, ...predators];
console.log(animals); // ['dog', 'cat', 'wolf', 'cougar']

Spread Opertaor - Array Rest

head란 배열 맨 앞의 원소를 뜻한다

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