spread와 rest -ES6도입

spread

• spread(...) : 기존 객체를 복사하고 거기에 어떤 추가적인 값을 넣어 줄 때 사용
  객체

const slime = {
	name: '슬라임'
};

const cuteSlime = {
	...slime,
	attribute: 'cute'
};

const purpleCuteSlime = {
	...cuteSlime,
	color: 'purple'
};

const greenCuteSlime = {
	...cuteSlime,
	color: 'green'
};

console.log(slime); //{name: "슬라임"}
console.log(cuteSlime); //{name: "슬라임", attribute: "cute"}
console.log(purpleCuteSlime); //{name: "슬라임", attribute: "cute", color: "purple"}
console.log(greenCuteSlime); //{name: "슬라임", attribute: "cute", color: "green"}

배열

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '염소', ...animals];

console.log(animals); //["개", "고양이", "참새"]
console.log(anotherAnimals); 
//["개", "고양이", "참새", "염소", "개", "고양이", "참새"]

---

rest

• rest(...) : 객체, 배열, 함수의 파라미터에서 사용/ 퍼져있는 것들을 다시 모아오는 역할
  객체

const purpleCuteSlime = {
	name: '슬라임',
	attribute: 'cute',
	color: 'purple'
}

const {color, ...cuteSlime} = purpleCuteSlime;
console.log(color); //purple
console.log(cuteSlime)//{name: "슬라임", attribute: "cute"}

const {attribute, ...slime} = cuteSlime;
console.log(slime); //{name: "슬라임"}

배열 : rest가 앞에 올 수 없음, 맨 마지막에 와야함

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers; 

console.log(one); //0
console.log(two); //1
console.log(rest); //[2, 3, 4, 5, 6]

---

함수 파라미터에서의 rest

function sum(...rest){
	return rest.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3, 4, 5, 6)); //21

rest와 reduce를 사용 안할 시 코드

function sum(a, b, c, d, e, f){
	let result = 0;
	if (a) result += a;
	if (b) result += b;
	if (c) result += c;
  if (d) result += d;
	if (e) result += e;
  if (f) result += f
	return result;
}

console.log(sum(1,2,3,4,5,6)); //21

함수 인자에서의 spread

function sum(...rest){
	return rest.reduce((acc, current) = > acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(sum(...numbers)); //28

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C