[ JavaScript ] spread vs rest (feat. 비구조화 할당)

Spread Operator ...spread : 펼치다, 퍼뜨리다

객체, 배열을 펼칠 수 있습니다.

• 객체에서 사용 가능합니다. (Object.assign() 대체)

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

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

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

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

const obj = { a: 1, b: 2, c: 3 }  
const obj1 = {  
...obj,  
c: 100, // 기존의 property를 한 번더 정의해줌으로써 property를 수정할 수 있다.  
d: 200, // 새로운 property를 추가할 수 있다.  
}

• 배열에서 사용 가능합니다.

const animals = ['개', '고양이', '참새']; const anotherAnimals = [...animals, '비둘기']; //['개', '고양이', '참새','비둘기']

• 배열에서 spread 연산자를 여러번 사용할 수 있습니다.

  const spreadNumbers1 = [...numbers, 1000, ...numbers];//[1,2,3,4,5,1000,1,2,3,4,5] 
  const spreadNumbers2 = [1000,...numbers,1000] //[1000,1,2,3,4,5,1000]

함수 인자와 spread

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

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

Rest Parameter ...rest

객체, 배열, 그리고 함수의 파라미터에서 사용 가능합니다.

• 객체와 사용할 때는 비구조화 할당 문법과 함께 사용됩니다.

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

console.log(color); // purple  
console.log(rest); //{name:'슬라임',attribute:'cute'}

• 배열과 사용할 때는 비구조화 할당 문법과 함께 사용됩니다.

const numbers = [0, 1, 2, 3, 4, 5, 6];  
const [one, ...rest] = numbers;  
const [...rest, last] = numbers; //SyntaxError

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

함수 파라미터에서의 rest

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

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

rest 가 꼭 함수의 인자에서만 쓰이는 건 아니다.

• rest 가 이미 선언되어 있던 변수가 아니다.
• rest 는 대입 연산자의 좌항에 존재한다.
• IDE에서 마우스 포인터를 변수명 위에 놓아서 배열이라는 것을 확인한다.

const arr = ["a", "b", "c", "d"]  
const [firstElement, ...rest] = arr  
console.log(firstElement) // "a"  
console.log(rest) // ["b", "c", "d"]

const obj = { a: 1, b: 2, c: 3 }  
const { c, ...obj2 } = obj  
// a와 b property만 가진 새로운 객체 obj2를 생성한다. 만들어진 c변수는 버린다.

정리

• spread operator는 펼치고, rest parameter는 모은다.
• spread operator는 주는 쪽이고, rest parameter는 받는 쪽이다.
• spread operator는 기존의 변수를 사용하고, rest parameter는 새로운 변수를 만든다.

---

참조

https://learnjs.vlpt.us/useful/07-spread-and-rest.html