TIL : arguments 객체와 rest parameter(+ separate 연산자)

TIL : Arguments 객체와 rest parameter(+ separate 연산자)

 

Method를 지배하는자- / picture by 캡틴.

 

 

underbar(underscore.js) 공부는 참 어렵다.

 

유용하게 사용할 수 있는 도구로서의 underscore.js를 직접 만들어보는 것은

함수가 작동하는 원리를 알 수 있어서 도움이 되겠으나, 메소드를 하나하나 구현해 나가는 일이 결코 쉽지 않다.

 

아직 갈피를 못잡고있지만, _.extend 메소드 구현을 위해 헬프데스크를 기웃거리던 중에

'arguments객체' 와 'rest parameter' 에 대한 내용을 보게 되었다.

 

MDN문서와 블로그 포스팅을 읽고, 같은 듯 다른 두 인자들에 대해서 아래와 같이 정리해본다. 

 

 

 

 

같은 점 : 둘 다, 함수의 소괄호 안에 들어가는 매개변수와 관련된 항목이다.

 

1) arguments 객체

 

underbar의 다른 문제풀이 중에서도 한 차례 접했던 arguments 객체는,

 - func( ) 처럼 인자가 주어지지 않은 함수에 대해, arguments[0], arguments[1] 등

    배열의 인덱스에 해당하는 값을 불러온다던지,  

 - 함수에 주어진(또는 주어질) 인자의 수를 헤아리는 기능으로서,

    arguments.length를 사용하는 코드도 보게 되었다.

 

 

function abc(){
  console.log(arguments.length); // 3 -> 배열의 길이를 계산할 수 있다.
  console.log(arguments[0]); // a     -> 배열의 index값을 호출할 수 있다.
}

function(a, b, c);

 

 

 

 

2) rest parameter

 

rest parameter는, spread operator( ... )와 함께 사용되며,

함수의 지정 인자가 주어진 후 가장 마지막에 위치함을 원칙으로 한다.

naming은 자유로우며, '...rest' 와 같이 기록하여 사용한다.

 

function(a, b, ...rest)

 

함수가 미리 지정되는 인자보다 많은 수의 인자를 받게 되었을 때, 추가된 인자 각각을 요소로 받는 배열을 반환한다.

'배열(array)'로서 arguments객체와 동일하게 인덱스 값 호출 및 길이 확인이 가능하다.

 

 

function abc(a, b, ...rest){
  console.log(rest.length);  // 4 -> 배열의 길이를 계산할 수 있다.
  console.log(rest[3]);      // undefined -> 3, 4가 rest parameter의 요소가 됨.
}                            // 3번째 인덱스값은 없으므로, undefined를 출력

abc(1, 2, 3, 4);

 

 

 

 

---

 

다른 점 : 한쪽은 '진짜' 배열이 아니다.

 

1) arguments 객체

 

arguments 객체는, 유사배열(array-like object)로서 인덱스 값을 호출하거나 길이를 확인할 수 있다.

하지만, 배열 메소드(reduce, filter, map 등)를 '직접' 사용하는 것이 불가능하다는 것을 배웠다.

 

한편, Function.prototype.call 기능을 통해 메소드를 '빌려서' 사용하는 것이 가능하다는 것도 알게 되었다. 

 

 

function abc(){
  console.log(Array.isArray(arguments); // false -> 우선, '배열'이 아니라는데..
}

abc( );

function sum() {
  var array = Array.prototype.slice.call(arguments); // prototype을 통해 arguments객체를 활용가능하도록 변경.
  return array.reduce(function (pre, cur) { // reduce 메소드를 통해, 합계 계산.
    return pre + cur;
  });
}

sum(1, 2, 3, 4, 5) // 15 -> 함수 인자의 수가 바뀌어도 대응하는 sum( ) 함수의 탄생.
sum(1, 2, 3) // 6

 

 

 

 

2) rest parameter

 

출력하는 값이 지정 인자 외 추가되는 인자들을 요소로 받는 '배열' 이므로,

당연히 배열 메소드를 통해 각 요소들에 대한 처리가 가능하다.

 

 

function abc(...rests){
  console.log(Array.isArray(rests)); // true -> '배열'입니다. 배열 맞고요.
}

abc( );

function sum(...rests) {
  let result = rests.reduce(function (pre, cur) { // 주어진 'rests'를 바로 배열로 활용 가능.
  return pre + cur;
  });
  return result;
}

sum(1, 2, 3, 4, 5) // 15 -> 결과는 같다.
sum(1, 2, 3) // 6

 

 

 

 

---

 

 

 

배열인 듯, 배열 아닌, 배열 같은 arguments 객체.

실제 현업에서의 코드 작성에는 어떤 방법으로 활용되는지도 궁금해졌다.