JavaScript에서 임의 개수의 인수를 함수에 전달하는 방법

JavaScript에서 함수를 호출할 때는 원하는 만큼 자유롭게 인수를 전달할 수 있습니다. 함수 매개변수의 개수에는 제한이 없으며, 이러한 특성 때문에 JavaScript에서는 다른 언어에서 흔히 볼 수 있는 전통적인 방식의 함수 오버로딩(overloading)이 지원되지 않습니다.

arguments 객체란?

arguments 객체는 화살표 함수(arrow function)가 아닌 모든 함수 내부에서 사용할 수 있는 지역 변수입니다. 함수 내부에서 arguments 객체를 참조하면 해당 함수가 호출될 때 전달받은 인수들에 접근할 수 있으며, 각 인수는 0부터 시작하는 인덱스로 저장됩니다.

예를 들어, 함수에 3개의 인수가 전달되었다면 다음과 같이 각각의 값에 접근할 수 있습니다.

arguments[0] // 첫 번째 인수
arguments[1] // 두 번째 인수
arguments[2] // 세 번째 인수

참고: arguments는 함수 내부에서 접근할 수 있는 유사 배열(Array-like) 객체로, 해당 함수에 전달된 인수들의 값을 담고 있습니다. 여기서 '유사 배열'이라는 것은 arguments가 length 속성과 0부터 시작하는 인덱스 속성을 가지고 있지만, forEach()나 map() 같은 Array의 기본 내장 메서드는 제공하지 않는다는 의미입니다.

예제

임의 개수의 인수를 받아 처리하려면 다음과 같이 함수를 작성할 수 있습니다.

function printAllArguments(a, b) {
    console.log("First arg: " + a)
    console.log("Second arg: " + b)
    console.log("All args: " + arguments)
}
printAllArguments(1)
printAllArguments(1, "hello")
printAllArguments(1, "hello", 1, "hello")

실행 결과

First arg: 1 
Second arg: undefined 
All args: {"0":1}
First arg: 1
Second arg: hello 
All args: {"0":1,"1":"hello"} 
First arg: 1
Second arg: hello 
All args: {"0":1,"1":"hello","2":1,"3":"hello"} 

위 실행 결과에서 볼 수 있듯이, 함수에 선언된 매개변수보다 적은 인수를 전달하면 해당 매개변수는 undefined가 되고, 더 많은 인수를 전달하면 초과된 인수들은 arguments 객체에 추가로 저장됩니다.

최신 문법: 나머지 매개변수(Rest Parameter)

ES6부터는 arguments 객체 대신 나머지 매개변수 문법을 사용하는 것이 권장됩니다. function sum(...numbers)처럼 선언하면 전달된 인수들이 실제 배열(Array)로 수집되기 때문에 map(), filter(), reduce() 등 다양한 배열 메서드를 바로 활용할 수 있다는 장점이 있습니다. 새로운 코드를 작성할 때는 가독성과 편의성 면에서 나머지 매개변수를 우선적으로 고려해 보세요.