이번 포스팅에서는 rest parameter와 spread operator 이 두 가지에 대해서 다뤄보려고 합니다. rest parameter와 spread operator는 자바스크립트에서 배열과 객체를 다루는데 사용되는 기능입니다.

1. rest parameter

rest parameter란 앞에 ... 를 붙인 파라미터입니다.함수의 파라미터 선언 시 사용이 되며, 배열로 전달받아 묶어버릴 때 사용합니다. 이해를 돋기 위해서 mdn에 있는 예시를 가져왔습니다.

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// Expected output: 6

console.log(sum(1, 2, 3, 4));
// Expected output: 10

위 코드에서 (...theArgs) 이 부분에 집중해주세요. 파라미터(인자)위치에 들어간 점 세 개를 말한다고 생각하고, 묶어버린다는 개념으로 이해해야 합니다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// a, "one"
// b, "two"
// manyMoreArgs, ["three", "four", "five", "six"] <-- an array

위의 예제처럼 a,b 에 각각 첫번째와 두번째를 넣고 나머지는 배열로 묶어서 넣어지는 것을 볼 수 있습니다.

2. spread operator

Spread operator는 배열이나 객체를 펼쳐서 개별 요소로 확장하는 데 사용되고 있습니다. ... 로 표기는 같으나 파라미터와 다르게 연산자입니다.
"단일료소로 묶는" 것과는 완전히 다른 의미로 확장하는것 이라고 생각하시면 돕니다.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// Expected output: 6

console.log(sum.apply(null, numbers));
// Expected output: 6

배열을 병합하거나, 복사하거나, 중간에 추가할 수 있습니다.

let arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];
// arr1 is now [0, 1, 2, 3, 4, 5]

물론 객체도 아래와 같이 사용 할 수 있습니다.

const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };

const clonedObj = { ...obj1 };
// { foo: "bar", x: 42 }

const mergedObj = { ...obj1, ...obj2 };
// { foo: "baz", x: 42, y: 13 }

다만 setter 의 경우 아래와 같이 사용하면 안 돌아가니 이렇게는 쓰지말아야 합니다.

const objectAssign = Object.assign(
  {
    set foo(val) {
      console.log(val);
    },
  },
  { foo: 1 },
);
// Logs "1"; objectAssign.foo is still the original setter

const spread = {
  set foo(val) {
    console.log(val);
  },
  ...{ foo: 1 },
};
// Nothing is logged; spread.foo is 1

즉, 정리하자면 rest parameter는 함수의 파라미터로 가변 인자를 수집하는 하고 spread operator는 배열이나 객체를 확장하여 개별 요소로 분해 또는 병합하는 역할을 한다고 합니다.