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(...)
: 객체, 배열, 함수의 파라미터에서 사용/ 퍼져있는 것들을 다시 모아오는 역할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]
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
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