[Javascript] Rest 파라미터

가끔 함수를 작성하다보면 매개변수가 생각보다 많이 늘어나는 경우가 생긴다.

이런 경우 Rest 파라미터를 사용해서 함수에서 매개변수 받는 부분을 줄일 수도 있긴하다.

우선 정의와 활용, 예시로 살펴보자

정의 및 형태

나머지 매개변수는 매개 변수 이름 앞에 세개의 점 ...을 붙여서 정의한다.
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다

function foo(param, ...rest) {
  console.log(param) // 1
  console.log(rest) // [2, 3, 4, 5]
}
foo(1, 2, 3, 4, 5)

함수 호출 시 매개변수의 개수만큼 인수를 전달하는 것이 바람직하나 그렇지 않아도 에러가 발생하지 않는다.

자바스크립트 엔진이 매개변수의 개수와 인수의 개수를 체크하지 않기 때문이다.

인수가 전달되지 않은 매개변수의 값은 undefined이다

function sum(x, y) {
  return x + y
}
console.log(sum(1)) // NaN

function sum(x, y) {
  // 인수가 전달되지 않아 매개변수의 값이 undefined인 경우 기본 값 할당
  x = x || 0
  y = y || 0
  return x + y
}
console.log(sum(1)) // 1

주의점

• Rest 문법은 반드시 한 개만 존재해야 한다.
• 그 한 개가 마지막 매개변수에 위치해야 한다.

function foo(...rest, param1, param2) { }
foo(1, 2, 3, 4, 5) // SyntaxError: Rest parameter must be last formal parameter

// 또한 단 하나만 선언할 수 있다
function foo(...rest1, ...rest2) { }
foo(1, 2, 3, 4, 5) // SyntaxError: Rest parameter must be last formal parameter

활용 이유

1. 함수에 전달되는 인자의 수가 정해지지 않을 때 배열로 묶어서 간편하게 관리
2. 이벤트 핸들링 시 불필요한 속성을 제거하고 필요한 정보만 취합할 때

function handleEvent({ type, target, ...rest }) {
  console.log(`Event Type: ${type}`);
  console.log(`Target: ${target}`);
  console.log(`Other details:`, rest);
}

const event = {
  type: 'click',
  target: document.body,
  timestamp: 1234567890,
  isTrusted: true,
};

handleEvent(event);
// Event Type: click
// Target: [object HTMLBodyElement]
// Other details: { timestamp: 1234567890, isTrusted: true }

추가 예시

function logNames(firstName, ...otherNames) {
  console.log(`First Name: ${firstName}`);
  console.log(`Other Names: ${otherNames.join(', ')}`);
}

logNames('John', 'Doe', 'Smith', 'Johnson');
// First Name: John
// Other Names: Doe, Smith, Johnson