스프레드 문법과 Rest 파라미터의 차이점

스프레드 문법과 Rest 파라미터 모두 이름 앞에 '...'을 붙여 헷갈릴 수 있으므로 둘의 정확한 개념과 차이점을 알아보자.

1. 스프레드 문법과 Rest 파라미터의 개념

스프레드 문법

• 스프레드 문법을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를(이터러블) 0개 이상의 인수 또는 요소로 확장하여, 0개 이상의 키-값의 쌍인 객체로 확장시킬 수 있다. (MDN 정의)

  // 배열 [1, 2, 3]을 개별 요소로 분리 
  console.log(...[1, 2, 3]);    // 1 2 3
  
  // 문자열 'Hello'를 개별 요소로 분리
  console.log(...'Hello');    // H e l l o

• 스프레드 문법은 배열, 문자열, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for...of 문으로 순회할 수 있는 이터러블에서만 사용 가능

  // 일반 객체는 이터러블이 아니기 때문에 스프레드 문법 사용 불가
  console.log(...{ a: 1, b: 2 });    // TypeError

Rest 파라미터

• 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 ...을 붙여서 정의한 매개변수

• Rest 파라미터 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. (MDN 정의)

  function foo(...rest) {
    console.log(rest);    // [1, 2, 3]
  }
  
  foo(1, 2, 3);

2. 스프레드 문법과 Rest 파라미터의 차이점

스프레드 문법은 배열을 개별 요소로 '확장'하고, Rest 파라미터는 개별 요소를 수집하여 하나의 요소로 '압축'한다.

// Rest 파라미터
function foo(...rest) {
  console.log(rest);    // 1, 2, 3 -> [1, 2, 3]
}

// 스프레드 문법
foo(...[1, 2, 3]);    // [1, 2, 3] -> 1, 2, 3

• 스프레드 문법은 값의 목록을 사용하는 곳에서만 사용
  • 함수 호출문의 인수 목록
  • 배열 리터럴의 요소 목록
  • 객체 리터럴의 프로퍼티 목록
• Rest 파라미터는 함수의 인수들의 목록을 전달받을 때 사용