나머지 매개변수(REST Parameters)

우선 인수 객체에 대해서 알아봅시다.

인수 객체(Arguments Object) : 함수에 전달된 인수에 해당하는 유사 배열 객체

인수 객체는 JavaScript의 오래된 기능입니다. 

 

유사 배열 객체란 length 속성과 0부터 인덱스된 다른 속성을 가지고 있지만, 배열의 forEach, map 등과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다. 인수 객체는 실제 배열이 아닙니다. 

function sum() {
    console.log(arguments);
    console.log(arguments.length);
    console.log(arguments[0]);
}

sum(); 
// [Arguments] {}
// 0
// undefined

sum(1, 2, 3); 
// [Arguments] { '0': 1, '1': 2, '2': 3 }
// 3
// 1

 

인수 객체는 배열과 비슷하지만 배열이라고 하기엔 부족하기 때문에, 나머지 매개변수를 사용하면 배열 메서드를 바로 사용할 수 있어 코드가 더 간결해집니다. 나머지 매개변수는 실제 배열입니다. 

 

function sortArguments() {
    let sortedArgs = arguments.sort();
    return sortedArgs;
}

console.log(sortArguments(7, 9, 5, 1));
// TypeError: arguments.sort is not a function

function sortRest(...arr) {
    let sortedArr = arr.sort();
    return sortedArr;
}

console.log(sortRest(7, 9, 5, 1));
// [ 1, 5, 7, 9 ]

 

나머지 매개변수(Rest Parameters) 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있습니다. 

함수의 마지막 매개변수 앞에 "..." 을 붙이면 모든 후속 매개별수를 표준 JS 배열에 넣도록 지정합니다. 

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

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

// 콘솔 출력:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

 

위의 코드에서 myFun 함수는 3개의 매개변수를 정의하고 있으며, 그 중 마지막 매개변수는 나머지 매개변수로 지정되어 있습니다. 따라서, one은 첫 번째 인수로 a에 할당되고, two는 두 번째 인수로 b에 할당되고, three, four, five, six 나머지 인수들은 모두 나머지 매개변수 'mantMoreArgs'에 배열 형태로 저장됩니다. 

 

나머지 매개변수는 명시적인 일부 인수와 가변적인 나머지 인수들을 배열로 처리하고자 할 때 유용합니다. 

 

[ references ] 

https://yozm.wishket.com/magazine/detail/2732/

시작하는 개발자를 위한 JS 매개 변수 활용법 2가지 | 요즘IT

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

arguments 객체 - JavaScript | MDN

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

나머지 매개변수 - JavaScript | MDN