spread

기존의 객체가 가지고 있는 값을 새로운 객체에 그대로 추가하고 싶을때 사용한다.
객체가 아닌 배열에서도 동일하게 작동된다
함수의 파라미터가 아닌 인자에서도 사용 한다.

기본형

const info = {
  name: 'kim'
}
const info2 = {
  ...info,	//spread 연산자
  age: 29
}
const info3 = {
  ...info2,	//spread 연산자
  hobby: 'hiking' 
}
console.log(info);   // {name: 'kim'}
console.log(info2);  // {name: 'kim', age: 29}
console.log(info3);  // {name: 'kim', age: 29, hobby: 'hiking'}

함수 인자 안에서의 spread

참고로 파라미터는 함수에서 받아오는 값이고, 인자는 함수를 호출할 때 넣어주는 값을 인자라고 한다!

function subTract(x, y) {
	return x - y;
} 
const numbers = [1, 2];
const result = subTract(...numbers);
console.log(result);  // -1

subTract(1, 2) === subTract(...numbers)
같은 의미이다.

rest

객체와 배열에서 사용 할 때에는 비구조화 할당 문법을 사용할 때 사용 할 수 있다.
영어의 뜻 그대로 나머지를 뜻하는데,

기본형

const food = {
  noodle: '신라면',
  rice: '백미',
  soup: '미역국',
  drink: '맥주'
};
// 객체의 비구조화 할당을 하면서 ...rest를 넣어 주었다. 
const { noodle, ...rest  } = food;
console.log(noodle); // 신라면
console.log(rest);  // {rice: '백미', soup: '미역국', drink: '맥주'}
// 비구조화할당으로 추출한 noddle을 제외한 나머지를 추출한다 
const { rice, ...rest2 } = rest;
console.log(rest2); // {soup: '미역국', drink: '맥주'}

이렇게 구조분해식으로 코드를 작성했을때 사용할 수 있다.
비구조화 할당을 할때 noodle을 먼저 넣고 그 뒤의 rest는
noodle을 제외한 나머지값을 객체로 반환 한다.

반환 한 객체값은 rest가 되고,
rest에서 또 rice를 제외한 나머지 값을 rest2에 객체로 반환 한다.

파라미터에서의 rest

함수에서는 rest 파라미터 라고들 한다.
함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 받아 준다.
마지막 파라미터 자리에 와야 한다.

function test(a, b, c, ...rest) {
	console.log(a, b, c);   // 1, 2, 3
	console.log(rest);  // [4,5]
}
test(1,2,3,4,5);

함수에 선언된 파라미터와 그 파라미터에 할당된 인자를 제외한 나머지
인자들을 모두 배열에 담는다.