1. Rest 파라미터

---

• Rest 파라미터(나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다.
• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
• 파라미터의 개수가 가변적일 때 유용하다.

• 기본 문법

function foo(...rest) {
  // ...
}

1) 인수에서 배열로

• 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파리미터다.

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

foo(1, 2, 3, 4, 5)

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3)  // 6
sum(1,2,3,4)  // 10

2) 나머지 매개변수 사용하기

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

function foo(param1, param2, ...rest) {
    console.log(param1)  // 1
    console.log(param2)  // 2
    console.log(...rest)  // [3, 4, 5]
}

foo(1, 2, 3, 4, 5)

3) 위치

• Rest 파라미터는 이름 그대로 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

function foo(...rest, param1, param2) {
    console.log(param1)
}

// SyntaxError: Rest parameter must be last formal parameter
foo(1, 2, 3, 4, 5)

4) 선언 횟수

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

function foo(...rest1, ...rest2) {
    console.log(param1)
}

// SyntaxError: Rest parameter must be last formal parameter
foo(1, 2, 3, 4, 5)

5) 매개변수 길이

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

function foo(...rest1) {
    console.log(foo.length)  // 0
}

function foo(a, ...rest1) {
    console.log(foo.length)  // 1
}

function foo(a, b, ...rest1) {
    console.log(foo.length)  // 2
}

foo(1, 2, 3, 4, 5)

2. Rest 파라미터와 arguments 객체

---

• ES5에서는 함수를 정의할 때 매개변수의 개수를 확정할 수 없는 가변 인자 함수의 경우 매개변수를 통해 인수를 전달받는 것이 불가능하므로 arguments 객체를 활용하여 인수를 전달받았다.
• arguments 객체는 호출 시 전달된 인수(argument)들의 정보를 담고 있는 순회 가능한 유사 배열 객체(array-like object)이며, 함수 내부에서 지역 변수처럼 사용할 수 있다.

function sum() {
    console.log(arguments)
}

sum(1, 2)  // {length: 2, '0': 1, '1': 2}

• 하지만 arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 Function.prototype.call 이나 Function.prototype.apply 메서드를 사용해 arguments 객체를 배열로 변환해야 하는 번거로움이 있었다.

function sum() {
    var array = Array.prototype.slice.call(arguments);

    return array.reduce(function (arr, cur) {
        return arr + cur;
    }, 0)
}

sum(1, 2, 3, 4, 5)  // 15

• ES6에서는 rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있다. 이를 통해 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있다.

function sum(...args) {
    return args.reduce(function (arr, cur) {
        return arr + cur;
    }, 0)
}

sum(1, 2, 3, 4, 5)  // 15