스프레드 문법과 레스트 문법의 차이점은 무엇인가요?

스프레드와 레스트는 똑같이 ... 기호를 쓰지만 방향이 정반대입니다. 스프레드는 묶인 것을 펼치고, 레스트는 흩어진 것을 모읍니다. 어디에 쓰였는지로 구분합니다.

스프레드 (spread): 펼치기

배열·객체·이터러블을 개별 요소로 펼칩니다. 함수 호출의 인자, 배열·객체 리터럴 안에서 쓰입니다.

// 배열 펼치기
const a = [1, 2];
const b = [...a, 3, 4]; // [1, 2, 3, 4]
 
// 객체 펼치기 (얕은 복사 + 병합)
const base = { x: 1, y: 2 };
const merged = { ...base, y: 3 }; // { x: 1, y: 3 } — 뒤가 덮어씀
 
// 함수 인자로 펼치기
const nums = [5, 1, 9];
Math.max(...nums); // 9

객체 스프레드는 얕은 복사라 중첩 객체는 참조를 공유한다는 점에 주의합니다.

레스트 (rest): 모으기

여러 개의 값을 하나의 배열(또는 객체)로 모읍니다. 함수 매개변수나 구조 분해 할당의 왼쪽에서 쓰입니다.

// 나머지 인자를 배열로 모으기
function sum(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3); // 6 — nums는 [1, 2, 3]
 
// 구조 분해에서 나머지 모으기
const [first, ...others] = [1, 2, 3, 4];
// first = 1, others = [2, 3, 4]
 
const { id, ...rest } = { id: 1, name: '단북', age: 3 };
// id = 1, rest = { name: '단북', age: 3 }

구분하는 법

방향으로 기억하면 쉽습니다.

펼치기(스프레드) — 리터럴이나 함수 호출의 인자 자리(= [...], fn(...))에서 값을 펼침.
모으기(레스트) — 함수 매개변수나 구조 분해의 대상 자리(function f(...x), const [...x] =)에서 값을 모음.

레스트 매개변수는 반드시 마지막에 와야 합니다.

다음 중 레스트(rest) 문법이 쓰인 것은?

const arr = [...list, 4];function f(a, ...rest) { }Math.max(...numbers);