spread 연산자(...)와 rest 파라미터(...)는 같은 것일까?

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

이터러블(iterable)이란, 자바스크립트에서 반복 가능한 객체를 말한다. 이는 다수의 원소(element)를 가지며, 이들을 하나씩 순회(iterate)할 수 있는 객체를 의미한다.
예를 들어, 배열, 문자열, Map, Set 등이 iterable한 객체이다.

 

spread 연산자와 rest 파라미터는 모두 ... 기호를 사용하지만, 기능과 사용 방법이 다르다.

 

spread 연산자는 iterable한(iterable) 객체를 펼쳐서(iterate) 개별 요소로 분리하는 역할을 한다. 이를테면 배열에서 원소들을 개별적인 값으로 분리하거나, 객체에서 프로퍼티들을 개별적인 값으로 추출할 수 있다.

또한 spread 연산자는 함수 호출에서도 사용될 수 있으며, 배열을 함수 인자로 전달할 때 사용된다.

 

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(...arr)); // 6

 

rest 파라미터는 함수 인자 형태로 사용되며, 인자들 중 일부를 배열(array) 형태로 받을 수 있게 해준다. 함수 정의에서 마지막 인자에 ...을 붙이면, 나머지 모든 인자들이 하나의 배열로 모아져서 해당 인자로 전달된다.

 

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

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

spread 연산자와 rest 파라미터의 공통점은 모두 ... 기호를 사용한다는 점인데, 둘 다 배열을 사용하는 경우가 많으며, spread 연산자를 사용하여 배열을 펼친 다음 rest 파라미터를 사용하여 인자로 받을 수도 있다.

 

둘의 차이점은 주로 사용되는 위치와 용도이다. spread 연산자는 배열이나 객체를 펼쳐서 개별 요소로 분리하는 역할을 하며, rest 파라미터는 함수 인자를 배열 형태로 받는 역할을 한다.

 

즉, spread 연산자는 배열을 펼칠 때 사용되는 반면, rest 파라미터는 함수 인자로 사용된다.