Javascript ES6 - Rest parameter

Rest parameter는 arguments와 비슷한 개념이지만 조금 차이가 있습니다.

 

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

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

 

...rest 이 부분이 rest parameter를 의미합니다. 이름이 꼭 rest일 필요는 없습니다. 여기에 나오는 이름이 rest parameter가 담기는 배열의 이름이라고 생각하시면 됩니다.

 

위 코드의 결과를 보면 함수의 parameter들이 배열에 담긴 것을 볼 수 있습니다. 즉 rest parameter는 함수를 만들 때 rest parameter가 자리하는 곳에 오는 모든 parameter를 배열에 담아주는 문법이라고 할 수 있습니다. 그래서 이것을 확장하면 다음과 같이 사용할 수도 있습니다.

 

function example (a, b, ...rest) {
  console.log(rest);
}

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

 

이 예제에서 ...rest는 앞에 두 가지 parameter 이후에 오는 모든 parameter를 의미합니다. 따라서 결과에도 1, 2를 제외한 3부터 배열에 담긴 것을 확인할 수 있습니다.

 

rest parameter는 arguments와 비슷하지만 다른 점이 분명합니다. arguments를 사용하기 위해서는 함수를 만들 때 parameter를 몇 개 넣을지 미리 지정해야되지만 rest parameter는 그렇게 할 필요가 없습니다.

 

#1 arguments

function argumentsExample(a,b,c) {
  console.log(arguments);
}

argumentsExample(1,2,3); // [1,2,3]




#2 rest parameter

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

restParameterExample(1,2,3,4,5) // [1,2,3,4,5]

 

rest parameter를 사용할 때 주의할 점은 함수의 parameter중 맨 나중에 사용해야되는 것입니다. rest parameter를 사용하고 그 뒤에 또 다른 parameter를 사용하면 에러가 발생합니다.

 

참고로 비슷하게 생긴 spread operator랑 헷갈릴 수 있습니다. 구분하는 방법은 함수의 parameter 자리에 들어가는 ...은 모두 rest parameter를 의미하고 그 이외에는 다 spread operator로 생각하면 됩니다.