Rest Parameter(나머지 매개변수)란?

2022년 01월 18일

Rest Parameter (나머지 매개변수)

매개변수 이름 앞에 점 …을 붙여서 정의한 매개변수를 의미합니다. 함수에 전달된 인수들의 목록을 배열로 전달 받습니다.

function example(...rest) {
  console.log(rest);
}

example(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

일반 매개변수와 Rest 파라미터는 함께 사용할 수 있으며, 이때 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당됩니다.

function example(param, ...rest) {
  console.log(param); // 1
  console.log(rest); // [2, 3, 4, 5]
}

example(1, 2, 3, 4, 5);

Rest 파라미터는 일반 매개변수들을 모두 대응하고 남은 인수들을 배열로 만들어 주기 때문에 항상 맨 마지막에만 올 수 있습니다.

// 틀린 예시
function example(param1,...rest, param2) {} // Uncaught SyntaxError: Rest parameter must be last formal parameter

// 옳은 예시
function example(param1,param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest); // [3, 4, 5]
}

example(1, 2, 3, 4, 5);

Rest 파라미터는 단 하나만 선언할 수 있습니다.

function example(...rest1, ...rest2) { }
example(1,2,3,4,5) // Uncaught SyntaxError: Rest parameter must be last formal parameter

Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않습니다.

function example(...rest) {}
console.log(example.length); // 0

function example(x, ...rest) {}
console.log(example.length); // 1

function example(x, y, ...rest) {}
console.log(example.length); // 2

ES5에서는 함수를 정의할 때 가변인자 함수의 경우 매개변수를 통해 인수를 전달받는 것이 불가능해서 arguments 객체를 활용하여 인수를 전달받았습니다. 하지만 arguments 객체는 유사 배열 객체이므로 배열 메서드를 사용하려면 Function.prototype.call이나 Function.prototype.apply 메서드를 사용해 배열로 변환해야해서 번거롭습니다.

유사배열 객체 : length 프로퍼티를 가진 객체로 for문으로 순회할 수 있는 객체

반면에, ES6에서는 Rest파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달을 받을 수 있습니다.