4. 인자로 들어올 미정의 수를 배열로 표현, 나머지 매개변수 (rest parameter)

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 저번 포스팅(전개연산자)과 비슷하지만 쓰임이 약간은 다른 나머지 매개변수에 대해서 알아보도록 하겠습니다.

나머지 매개변수는 정해지지 않은 수(부정수) 인수를 배열로 나타낼 수 있도록 하는 표현법입니다.

표현식은 다음과 같습니다.

function(a, b, ...theArgs) {
  // ...
}

함수를 선언 할 때, 해당 함수가 호출될 때 값으로 들어올 인자를 정하는 것을 매개변수라고 합니다.

이 매개변수를 지정할 때 매개변수의 이름 앞에 ...을 붙이면 이는 나머지 매개변수를 의미합니다.

그리고 이는 함수내에서 배열로 인식됩니다.

이해를 돕기 위해 다음 예제를 보겠습니다.

var add = (...rest) => {
    console.log(rest);
    return rest.reduce((p, c)=>{return p+c},0);
}
add(2,3,4,5,6);
// 콘솔에 rest는 배열로 찍힘 - (5) [2, 3, 4, 5, 6]
// 함수의 호출으로 리턴되는 값은 모든 인자를 더한 값인 20

위의 예제는 인자의 값으로 들어온 값들을 모두 더하여 그 결과를 리턴하는 add라는 함수를 정의한 예제입니다.

함수를 정의하는 단계에서 매개변수는 나머지 파라미터로 두었습니다.

즉, 정의할 때 매개변수의 갯수나 유형등을 정의하지 않고 호출할 때 들어오는 값을 모두 배열로 받겠다고 정의해 둔 것입니다.

함수 안의 console.log는 호출시 값으로 들어오는 인자의 데이터타입과 값을 확인하기 위해 넣었습니다.

그리고 리턴되는 값은 해당 배열의 모든 값을 더한 값입니다.

(나머지 매개변수가 배열이기 때문에 배열의 reduce메소드를 이용)

* 배열의 reduce메서드가 익숙하지 않으신 분들은 다음의 링크를 참조하세요

<배열의 reduce메서드>

나머지 매개변수는 호출하는 시점에 들어오는 인자를 순수한 배열로 보기 때문에 reduce같은 배열의 메서드를 사용할 수 있습니다.

하지만 나머지 매개변수와 비슷한 듯 보이는 arguments 객체가 있습니다.

arguments 객체는 인자로 들어온 모든 값을 나타내는 객체로, 유사배열의 형태입니다.

나머지 매개변수와 다른점은 다음의 예제를 통하여 살펴보도록 하겠습니다.

function add2() {
    console.log(arguments);
    return arguments.reduce((p, c)=>{return p+c},0);
}
add2(2,3,4,5,6);
// Arguments(5) [2, 3, 4, 5, 6, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// Uncaught TypeError: arguments.reduce is not a function

본 예제는 위에 나머지 매개변수를 이용해 사용자가 입력한 인자들을 모두 더하는 예제와 같은 결과를 기대하고 작성한 예제입니다.

콘솔에는 arguments객체가 마치 배열과 비슷하게 찍혔지만, 유사배열입니다.

따라서 배열의 reduce매서드를 사용할 수 없기 때문에 TypeError가 찍힙니다.

(arrow function은 this 바인딩을 갖지 않기 때문에 arguments객체에 접근할 수 없습니다. 따라서 본 예제에서 function() {}을 통하여 arguments 객체를 호출했습니다)

* arrow function의 this scope와 함수 선언의 차이가 궁금하신 분은 다음의 링크를 참조하세요

<arrow function은 함수선언(function declaration)을 완벽히 같지는 않다>

즉, arguments객체는 유사배열이지만 실제 배열은 아니기 때문에 배열의 메서드들을 이용하지 못합니다.

또한, arguments 객체는 호출될 때 들어온 모든 인자를 의미하지만 나머지 매개변수는 사용자가 원하는 인자만 배열로 정의할 수 있습니다.

이것 또한 예제를 통해 살펴보겠습니다.

function add2(a, b, ...rest) {
    console.log(arguments);
    console.log(rest);
}
add2(2,3,4,5,6);
// Arguments(5) [2, 3, 4, 5, 6, callee: (...), Symbol(Symbol.iterator): ƒ]
// (3) [4, 5, 6]

첫번째 콘솔은 arguments 객체를 찍고, 그 아랫줄의 콘솔은 나머지 매개변수인 rest를 찍습니다.

첫 번째는 유사배열로 호출될때 들어온 2, 3, 4, 5, 6 모두를 찍지만,

두 번째는 나머지 매개변수로 정의한 4, 5, 6 만을 찍습니다.

나머지 매개변수의 효용은 인자로 들어온 값에 대해서 배열의 매서드를 이용해 어떤 작업을 하려고 할 때나 정해지지 않은 부정수인 인자들을 배열로 처리하고자 할 때 사용됩니다. arguments 객체와 분명히 다른, 좀 더 활용성이 높은 표현이다 라고 생각하시면 좋을 것 같습니다.

여기까지 나머지 매개변수에 대해서 알아봤습니다. 

다음 포스팅에서는 ES6의 default parameter에 대해서 알아보도록 하겠습니다. 

감사합니다.

**참고 자료 (항상 감사드립니다)

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

짱구의 기술블로그 - Chap27. 알쓸 ES6 

https://appear.github.io/2018/03/14/JavaScript/javascript_28/

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)