ES6알아보기 05 - Rest Parameter

Rest Parameter 와 Arguments 의 사용법에 대해서 알아보겠습니다.

Arguments 의 사용법

function foo(arr) {
  console.log(arguments.length);
  console.log(arguments);
}

foo([1,2,3], 4, 5, 6);
// 출력결과
// length:  4
// argument:
// 0 : (3) [1, 2, 3]
// 1 : 4
// 2 : 5
// 3 : 6

위의 결과 에서 알 수 있듯이 arguments 는 함수의 인수가 몇개 정의 되있는지 상관없이 들어온 인수에 모두 접근 할 수 있습니다. 여기서 중요한 점은 얼핏 argument 가 Array 형식으로 보일 수 있지만 Object 타입 이라는 점 입니다. 때문에 Array 객체의 메소드들(Map이나 forEach, push 등) 은 사용할 수 없습니다. 하지만 Array like object(유사배열) 이기 때문에 필요하다면 변환해서 사용할 수 있습니다.

위에서 출력한 arguments 의 객체구조는 아래와 같은 형태 입니다.

{
  0: [1, 2, 3],
  1: 4,
  2: 5,
  3: 6,
  length: 4
}

rest Parameter (나머지 매개변수)

function foo(arr, ...rest) {
  // ...rest로 선언된 부분이 나머지 매개변수 입니다.
  // 변수명은 아무거나 넣으셔도 상관 없습니다.
  console.log(rest);
}

foo([1,2,3], 4, 5, 6);
// 출력결과
// (3) [4, 5, 6]

위에서 볼 수 있듯이 rest 인수는 arr인수를 제외한 나머지 변수들만 가지게 됩니다. arguments와의 가장 큰 차이라고 할 수 있습니다. 또 한가지 다른점은 Array 타입의 객체이기 때문에 Array 메소드 들도 사용할 수 있습니다.

Arguments 의 경우는 기존 ES5에서도 있던 걔념이고 (…) 으로 표현되는 나머지 연산자는 ES6 에서부터 추가 되었습니다. 그렇다면 왜? arguments로도 충분이 가능한데 나머지 연산자가 추가 되었을까요? 개인적으로는 arguments를 많이 사용하게 되면 가독성이 많이 떨어질 것 같다는 생각이 듭니다. 함수는 인수를 하나만 가지도록 선언되어 있는데 arguments를 뜬금없이 사용함으로써 원래 설계의도와 맞지 않는 구조를 가지게 되고, 보든 사람도 한눈에 의도를 파악하기 힘들게 되지 않을까 생각합니다. 되도록이면 argument 보다는 rest parameter 를 사용하는 것이 좋을 듯 합니다.

다음에는 나머지 연산자의 추가적인 활용법에 대해서 써 보도록 하겠습니다.