나머지 매개변수(Rest Parameter)

: 매개변수 이름 앞에 ...을 붙여서 정의한 매개변수

• rest parameter는 함수에 전달된 전달인자들을 배열로 전달받는다.

function func(...rest) {
  console.log(rest); // [ 1, 2, 3]
  console.log(Array.isArray(rest)); // true
}

func(1, 2, 3);

• rest parameter는 이름 그대로 먼저 선언된 매개변수에 할당된 전달인자를 제외한 나머지 전달인자들이 모두 배열에 담겨 할당된다.
• 따라서 rest parameter는 반드시 마지막 매개변수여야 한다.

function func(arg1, arg2, ...args) {
	return [arg1, arg2, args];
}

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

rest parameter의 특징

1. rest parameter는 함수 객체의 length 프로퍼티에 영향을 주지 않는다.

함수 객체의 length 프로퍼티 : 함수 정의 시 선언한 매개변수 개수를 나타낸다.

function func1(...rest) {}
func1.length; // 0

function func2(arg1, arg2, ...rest) {}
func2.length; // 2

2. 전달인자의 수가 정해져 있지 않은 경우에 사용할 수 있다.

arguments 객체

: 함수 호출 시, 함수에 전달되는 전달인자들이 배열 형태로 저장된 객체

ES5에서는 전달인자가 몇 개가 전달될지 확실하지 않은 상황에서 arguments 객체를 통해 인수를 확인했다. 하지만 arguments 객체는 유사 배열 객체이므로 Array.from() 등의 메소드를 이용해 배열로 변환하여 사용해야 했다.
Array.from(), arguments 객체

ES6에서는 rest parameter를 사용하여 전달인자가 몇 개이든 배열로 전달받을 수 있으며, 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있게 되었다.

function sum(...rest) {
	let result = 0;
  	for(let i = 0; i < rest.length; i++) { // 전달 받은 전달인자의 수만큼 반복문을 반복한다.
    	result = result + rest[i];
    }
  	return result;
}

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

3. 화살표 함수와 rest parameter

화살표 함수에는 함수 객체의 arguments 프로퍼티가 없다.
따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 rest parameter를 사용해야 한다.

const normalFunc = function () {};      // 일반 함수
normalFunc.hasOwnProperty('arguments'); // true
>
const arrowFunc = () => {};            // 화살표 함수
arrowFunc.hasOwnProperty('arguments'); // false

이 글은 아래 링크를 참고하여 작성한 글입니다.
https://poiemaweb.com/es6-extended-parameter-handling