[자바스크립트] ES6(ECMA Script 6) - 나머지 매개변수(Rest parameter)

나머지 매개변수(Rest parameter)

---

rest parameter은 이름을 정주지 않은 파라미터의 배열을 말합니다.

1. 문법

var test = function(a, b, ...theArgs) {
    console.log(a);
    console.log(b);
    console.log(theArgs);
}
test(1, 2, 3, 4, 5);

rest parameter은 ...으로 시작되는 마지막 매개변수를 말합니다. 함수에 실제로 전달되는 인수는 제외됩니다. (1과 2는 rest parameter에서 제외)

2. arguments와 rest parameter의 차이

rest parameter은 이름을 정해주지 않은 파라미터를 말합니다. 반면에 arguments는 함수로 전달되는 모든 파라미터를 말합니다.

arguments는 Array가 아닙니다(Array 메소드와 유사한 lenght만 존재). 하지만 rest parameter은 Array이기 때문에, sort, map, forEach, pop 메소드 사용이 가능합니다.

arguments는 callee 같은 추가된 기능들이 존재합니다.

arguments를 이용하여 rest parameter을 흉내낼 수 있습니다.

// Before rest parameters, the following could be found:
function f(a, b){
    var args = Array.prototype.slice.call(arguments, f.length);

    // …
}

// to be equivalent of

function f(a, b, ...args) {
  
}

3. rest parameter를 변수에 담기

rest parameter을 각각의 변수에 담을 수 있습니다.

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

console.log(f(1))          // NaN (b and c are undefined)
console.log(f(1, 2, 3))    // 6
console.log(f(1, 2, 3, 4)) // 6 (the fourth parameter is not destructured)

rest parameter를 변수에 담기

첫번째 로그는 a의 값만 정해지고, b와 c는 undefined이기 때문에, NaN(Not a Number)가 출력됩니다.

두번째 로그는 a, b, c의 값 모두 지정해줬기 때문에 합친 6의 결과가 정상 출력됩니다.

세번째 로그는 a, b, c의 3개의 파라미터만 명시해 두었기 때문에 3개 이후에 온 4는 무시되어 3개의 숫자가 합쳐진 6이 출력됩니다.

4. rest parameter 예제

length

function fun1(...theArgs) {
    console.log(theArgs.length);
}

fun1();  // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

lenght

Array의 메소드인 length가 정상적으로 동작하는 것을 확인 할 수 있습니다.

map

function multiply(multiplier, ...theArgs) {
    return theArgs.map(function (element) {
        return multiplier * element;
    });
}

var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

map

첫번재 파라미터인 2가 각각의 1, 2, 3에 곱해진 결과값을 map 메소드를 통해 로그로 출력되는 것을 확인 할 수 있습니다.

sort

function sortRestArgs(...theArgs) {
    var sortedArgs = theArgs.sort();
    return sortedArgs;
}

console.log(sortRestArgs(5,3,7,1)); // shows 1,3,5,7

function sortArguments() {
    var sortedArgs = arguments.sort(); 
    return sortedArgs; // this will never happen
}

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

sort

rest parameter는 Array이기 때문에 sort된 결과가 1, 3, 5, 7로 출력되는 것을 확인 할 수 있습니다.

하지만 arguments는 Array이가 아니기 때문에 sort 메소드를 호출할 때, TypeError가 발생됩니다.