JavaScript에서 함수에 개수에 제한 없이 여러 개의 인수를 전달하고 싶다면 arguments 객체를 사용하면 됩니다.
arguments 객체란?
arguments 객체는 모든 일반 함수 내부에서 자동으로 사용할 수 있는 배열 형태(array-like)의 객체입니다. 함수 호출 시 실제로 전달된 인수들이 순서대로 저장되며, arguments.length로 전달된 인수의 개수를 확인할 수 있습니다.
한 가지 주목할 점은 함수이름.length가 반환하는 값과 arguments.length가 다르다는 것입니다. 전자는 함수를 정의할 때 선언된 매개변수의 개수를, 후자는 실제 호출 시 전달된 인수의 개수를 나타냅니다.
예제 코드
아래 예제를 실행하면 JavaScript 함수에서 무제한 인수를 처리하는 과정을 직접 확인할 수 있습니다.
<html>
<body>
<script>
function functionArgument(val1, val2, val3){
var res = "";
res += "선언된 매개변수 개수: " + functionArgument.length;
res += "<br />";
res += "전달된 인수 개수 : " + arguments.length;
res += "<br />";
res += "각각의 인수 = "
for (p = 0; p < arguments.length; p++){
res += "<br />";
res += functionArgument.arguments[p];
res += " ";
}
document.write(res);
}
functionArgument(20, 50, 80, "Demo Text!","Hello World", new Date())
</script>
</body>
</html>
출력 결과
선언된 매개변수 개수: 3 전달된 인수 개수 : 6 각각의 인수 = 20 50 80 Demo Text! Hello World [현재 날짜와 시간]
함수는 3개의 매개변수(val1, val2, val3)만 선언되어 있지만, 실제로는 6개의 인수가 전달되었고 for 반복문을 통해 모든 인수에 접근하여 출력한 것을 볼 수 있습니다.
모던한 대안: 나머지 매개변수(Rest Parameters)
ES6(ES2015)부터는 나머지 매개변수(Rest Parameters) 문법(...)을 사용하는 것이 권장됩니다. 이 방식은 진짜 배열을 반환하기 때문에 map, filter 같은 배열 메서드를 바로 사용할 수 있다는 장점이 있습니다.
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100
화살표 함수(arrow function)에는 arguments 객체가 존재하지 않기 때문에, 이 경우에는 반드시 나머지 매개변수를 사용해야 합니다. 새 프로젝트라면 가변 인수 처리 시 나머지 매개변수 문법을 우선적으로 고려하는 것이 좋습니다.