[ES6 JavaScript] Rest Parameters

 오늘은 Rest 파라미터에 대해 알아보도록 하겠습니다. Rest 파라미터는 정해지지 않은 인수들을 배열로 나타낼수 있도록 하는 파라매터입니다. 함수의 마지막 파라미터의 앞에 ... 을 붙여 나머지 모든 파라미터를 배열로 대체합니다. 그렇기 때문에 마지막 파라미터만 Rest 파라미터가 될 수 있습니다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

 위 코드는 Rest 파라미터의 예입니다. 먼저 가장 처음 파라미터를 a로 받고, 그 다음에 오는 두번째 파라미터는 b라는 매개변수로 받았습니다. 그리고 나머지 파라미터는 Rest 파라미터로 받았습니다. 출력 결과를 보면 a는 "one", b는 "two" 그리고 manyMoreArgs는 배열 [three, four, five, six]로 출력되는 것을 확인할 수 있습니다.

 

Pixabay로부터 입수된 mohamed Hassan님의 이미지 입니다.  

 

Rest 파라미터 vs arguments

 그렇다면 함수 내에서 모든 매개변수를 참조할 수 있는 arguments 객체와는 어떤차이가 있을까요?

• 범위
  • Rest 파라미터는 구분된 이름이 주어지지 않는 나머지 매개변수가 대상
  • arguments 객체는 모든 매개변수가 대상
• type
  • Rest 파라미터는 Array의 인스턴스로 sort, map, forEach, pop등의 메서드를 사용가능
  • arguments는 실제 배열이 아니라 length빼고는 다른 메서드를 사용할 수 없다. 단, Array로 변환은 가능.
• 속성
  • arguments는 자체에 특정 추가 기능이 있음(callee 속성)

Rest 파라미터의 구조 분해 할당

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b 와 c 는 undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (4번 째 파라미터는 해체되지 않음)

 Rest 파라미터도 배열이기 때문에 구조 분해 할당이 가능합니다. 위 예제에서는 입력된 파라미터가 a, b, c의 변수로 분해 할당 된 것을 확인할 수 있습니다.

 

 

 

참고:

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

Rest 파라미터