arguments vs rest parameter

arguments

• 함수에 전달된 모든 인수를 포함하는 유사 배열 객체
• 인덱스로 접근할 수 있고 length 속성을 가지지만, 실제 배열이 아니므로 배열 메서드(map, filter 등)는 사용할 수 없다.
• Array.from() 이나 spread 연산자를 사용해 배열로 변환 가능

var args = Array.from(arguments);
var args = [...arguments];

 

일반함수와 화살표함수에서의 arguments

■ 일반함수(함수 선언문)에서의 arguments

• arguments 객체를 통해 함수에 전달된 모든 인수에 접근할 수 있다.
• 매개변수를 명시적으로 선언하지 않아도 사용할 수 있다.
• 일반 함수(함수 선언문 및 함수 표현식)에서 사용 가능

function example() {
  console.log(arguments);
}

example(1, 2, 3); // { 0: 1, 1: 2, 2: 3, length: 3 }

 

 

■ 화살표 함수에서의 arguments

• 화살표 함수는 렉시컬 스코프를 따르므로 자체적인 arguments 객체를 가지지 않는다.
• 화살표 함수 내에서 arguments를 사용 시 에러가 발생하거나 상위 스코프의 arguments를 참조한다.

const arrowFunc = () => {
  console.log(arguments); // ReferenceError: arguments is not defined
};

function outer() {
  const inner = () => {
    console.log(arguments); // outer 함수의 arguments를 참조
  };
  inner();
}

 

* 화살표 함수에서 인수에 접근하는 방법

 

■ rest parameter (ES6 도입)

• 함수에 전달된 인수들의 목록을 배열로 전달받는 방식
• `...`구문을 사용해서 표현
• 화살표 함수에서도 사용 가능

function example(...args) {
    console.log(args); // [1, 2, 3, 4, 5]
    console.log(Array.isArray(args)); // true
}
example(1, 2, 3, 4, 5);

 

 

■ rest parameter 의 특징

• 실제 배열이므로 배열 메서드를 사용할 수 있다.
• 마지막 파라미터여야 하고, 하나의 함수에 하나의 rest 파라미터만 사용가능하다.
• TypeScript에서도 rest 파라미터를 권장하며, 타입 정의가 더 명확하므로 인수 처리 시 rest 파라미터 사용 권장

// 마지막 파라미터여야함
function example(a, b, ...rest) { }
function example(...rest, a, b) { } // SyntaxError

// 하나의 함수에 하나의 rest 파라미터만 사용 가능
function example(...rest1, ...rest2) { } // SyntaxError