1. spread(...)

객체 spread

기존 객체의 값을 그대로 복사하고, 추가로 값을 추가 할 때 사용

const dog = {
    name: '멍멍이'
};

const dog2 = {
    ...dog,
    age: 5
};

console.log(dog);		// {name: "멍멍이"}
console.log(dog2);		// {name: "멍멍이", age: 5}

복사한 값과 같은 key값을 넣으면 덮어쓰게 됨

const dog3 = {
    ...dog2,
    age: 10
};

console.log(dog3);		// {name: "멍멍이", age: 10}

배열 spread

기존 배열의 값을 그대로 복사하고, 추가로 값을 추가 할 때 사용

const animals = ['개', '고양이'];
const animals2 = [...animals, '곰'];

console.log(animals);		// ["개", "고양이"]
console.log(animals2);		// ["개", "고양이", "곰"]

여러번 복사해서 사용 가능

const animals3 = [...animals, '곰', ...animals];

console.log(animals3);		// ["개", "고양이", "곰", "개", "고양이"]

2. ...rest

객체 rest

비구조화 할당을 할 때, 명시되지 않은 값을 모두 할당
꼭 rest라고 안써도 됨

const dog = {
    name: '멍멍이',
    age: 5,
    color: '흰색'
};

const {name, ...rest} = dog;

console.log(name);		// 멍멍이
console.log(rest);		// {age: 5, color: "흰색"}

const dog = {
    name: '멍멍이',
    age: 5,
    color: '흰색'
};

const {age, ...rest} = dog;

console.log(age);		 // 5
console.log(rest);		 // {name: '멍멍이', color: "흰색"}

배열 rest

객체와 마찬가지로 작동
...rest는 마지막에만 사용가능

const animals = ['개', '고양이', '곰', '닭'];

const [dog, ...rest] = animals;

console.log(dog);		// 개
console.log(rest);		// ["고양이", "곰", "닭"]

const animals = ['개', '고양이', '곰', '닭'];

const [dog, cat, ...rest] = animals;

console.log(dog);		// 개
console.log(cat);		// 고양이
console.log(rest);		// ["곰", "닭"]