개념과 사용 방법

나머지 매개변수(Rest Parameters, '가변 인자'라고도 불리는)는
함수 정의에 사용되며, 함수의 인자 개수가 고정되지 않아 가변적으로 인자의 개수를 전달 받을 수 있는 매개변수의 한 형태입니다.

함수 호출 시 인자 개수를 고정하지 않고 필요한 만큼 전달하고 싶을 때 유용합니다.

작동 원리

  • 함수 정의 시 마지막 매개변수 앞에 점 세 개(...)를 붙여 선언합니다.
  • 이 매개변수가 '나머지 매개변수'입니다.
  • 함수 호출 시 이 위치에 단일 또는 여러 개의 인자를 콤마(,)로 구분해 원하는 개수만큼 전달할 수 있습니다.
  • 전달된 인자들은 함수 내부에서 배열로 묶여 처리됩니다.

적용

나머지 매개변수는 다음과 같은 함수 정의 방식에서 모두 사용할 수 있습니다.

JavaScript - 함수 선언식 
function fn(...rest) {
    console.log(rest); // 배열로 전달 받은 rest
}

fn(1, 2, 3); // 출력: [1, 2, 3]
fn(1, 2, 3, 4); // 출력: [1, 2, 3, 4]
fn(1, 2, 3, 4, 5); // 출력: [1, 2, 3, 4, 5]
JavaScript - 함수 표현식 
const expressionFn = function (...rest) {
    console.log(rest); // 배열로 전달 받은 rest
}

expressionFn(1, 2, 3); // 출력:  [1, 2, 3]
expressionFn(1, 2, 3, 4); // 출력:  [1, 2, 3, 4]
expressionFn(1, 2, 3, 4, 5); // 출력:  [1, 2, 3, 4, 5]
JavaScript - 화살표 함수 표현식 
const arrowFn = (...rest) => {
    console.log(rest); // 배열로 전달 받은 rest
}

arrowFn(1, 2, 3); // 출력:  [1, 2, 3]
arrowFn(1, 2, 3, 4); // 출력:  [1, 2, 3, 4]
arrowFn(1, 2, 3, 4, 5); // 출력:  [1, 2, 3, 4, 5]

구문

JavaScript 
/*  고정 인자가 있을 경우 */
function functionName(param1, [param2,] ...restParams) {
    // 함수 본문에서 restParams를 배열로 사용할 수 있습니다.
}

/*  고정 인자가 없을 경우 */
function functionName(...restParams) {
    // 함수 본문에서 restParams를 배열로 사용할 수 있습니다.
}
  • param1, param2:: 함수 파라미터로, 함수에 필요한 고정된 인자를 나타냅니다. 필수는 아니며, 필요에 따라 생략하거나 여러 개를 선언할 수 있습니다.
  • ...restParams: 나머지 매개변수로, 고정 매개변수 이후에 전달되는 추가 인자들을 하나의 배열로 수집합니다. 반드시 매개변수 목록의 맨 마지막에만 위치할 수 있습니다.

특징

  • 자바스크립트 함수 정의에 사용되는 매개변수 유형 중 하나입니다.
  • 나머지 매개변수는 반드시 매개변수 목록의 마지막에 위치해야 합니다.
  • 나머지 매개변수는 가변적인 수의 인자를 함수 내에서 배열로 받아 처리할 수 있습니다.
    (배열을 처리하는 map(), filter(), forEach() 같은 배열 메서드를 바로 사용할 수 있습니다.)
  • ‘나머지(rest)’란 이름은 함수에 전달된 고정이 아닌 '나머지로 추가된 인자라는 의미에서 유래'했으며, 개수가 변할 수 있어서 ‘가변 인자’라고도 불립니다.

예제

JavaScript 
function myFun(a, b, ...manyMoreArgs) {
    console.log("a:", a);
    console.log("b:", b);
    console.log("나머지 매개변수 manyMoreArgs:", manyMoreArgs);
}

myFun("apple", "banana", "cherry", "date", "elderberry", "fig");

// 출력:
// "a: apple"
// "b: banana"
// "나머지 매개변수 manyMoreArgs:" [ 'cherry', 'date', 'elderberry', 'fig' ]

위 에시코드는 자바스크립트에서 나머지 매개변수를 사용하는 예시입니다. 나머지 매개변수는 함수에 전달된 인자들 중에서 명시적으로 선언된 매개변수 이후의 모든 인자를 배열로 수집합니다.

여기서 함수 myFun은 세 개의 인자 a, b, ...manyMoreArgs를 받습니다. a와 b는 각각 첫 번째와 두 번째 인자를 나타냅니다. 그리고 ...manyMoreArgs는 manyMoreArgs라는 배열에 나머지 모든 인자를 저장합니다.

따라서, myFun("apple", "banana", "cherry", "date", "elderberry", "fig")를 호출하면 "a: apple", "b: banana"가 각각 출력되고, 나머지 인자들은 나머지 매개변수인 manyMoreArgs 배열에 저장되어 출력됩니다.

주의해야 할 점

  1. 함수 정의에는 나머지 매개변수가 하나만 있어야 합니다.
  2. 나머지 매개변수는 함수를 정의할 때 매개변수의 수가 하나든 여러 개든, 어떤 경우에도 반드시 매개변수 목록의 마지막에 위치해야 합니다.
JavaScript 함수 정의에는 나머지 매개변수가 하나만 있어야 합니다. 
function wrong1(...one, ...wrong) {} // 에러
JavaScript 나머지 매개변수는 함수를 정의할 때 매개변수의 수가 하나든 여러 개든, 어떤 경우에도 반드시 매개변수 목록의 마지막에 위치해야 합니다. 
function wrong2(...wrong, arg2, arg3) {} // 에러
  1. 나머지 매개변수는 함수의 length 속성에 포함되지 않습니다.
JavaScript 나머지 매개변수는 함수의 length 속성에 포함되지 않습니다. 
function exampleFunction(a, b, ...restParams) {
    // 함수 본문
}

console.log(exampleFunction.length); // 출력: 2

가변항 함수를 표현할 때 사용

가변항 함수(Variable-arity Function)는 함수가 다양한 수의 인자를 받아서 처리할 수 있는 함수를 가리킵니다. 이러한 함수는 호출될 때 전달되는 인자의 개수가 고정되지 않으며, 필요한 만큼의 인자를 받아 처리할 수 있습니다.

나머지 매개변수는 자바스크립트에서 가변항 함수를 표현하는 강력한 도구입니다. 이를 통해 함수는 다양한 수의 인자를 처리하고 다룰 수 있으며, 자바스크립트의 console.log() 함수와 같이 가변항 함수로 사용됩니다.

자바스크립트의 console.log() 함수

JavaScript 
console.log("Hello", "World", "!");
// 출력: "Hello World !"

나머지 매개변수 활용 가변항 함수 예제

JavaScript 
function sum(...numbers) {
    let total = 0;
    
    for (let number of numbers) {
        total += number;
    }
    
    return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 출력: 15

코드 부연설명
for...of 문은 값(value)으로 순회할 수 있는 객체를 위한 반복문입니다. 전달된 인자들은 함수 내부에서 배열로 묶여 처리되는데, 배열은 값(value)으로 순회할 수 있는 객체입니다.

명세서

나머지 매개변수의 명세서 사양
명세서 사양
...restParams ECMAScript Language Specification
#sec-function-definitions

브라우저 호환성

나머지 매개변수의 브라우저 호환성
구문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
...restParams 47 12 15 10

참고문헌

같이 보기