JavaScript에서 함수에 전달되는 인수의 개수가 정해져 있지 않은 경우, arguments 객체를 활용하면 됩니다. 이 객체는 함수가 호출될 때 전달된 모든 인수를 배열과 유사한 형태로 담고 있어, 선언된 매개변수 개수와 무관하게 실제로 넘어온 값들에 접근할 수 있습니다.
arguments 객체의 핵심 속성
- arguments.length — 함수 호출 시 실제로 전달된 인수의 개수를 반환합니다.
- 함수이름.length — 함수 정의 시 선언된 매개변수(기대되는 인수)의 개수를 반환합니다.
- arguments[i] — 인덱스를 통해 각 인수에 순서대로 접근할 수 있습니다.
예제 코드
아래 코드를 실행하면 arguments 객체를 사용해 가변 개수의 인수를 처리하는 과정을 직접 확인할 수 있습니다.
<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>실행 결과
위 예제에서는 함수가 세 개의 매개변수(val1, val2, val3)로 선언되었지만, 호출 시에는 숫자, 문자열, Date 객체까지 총 여섯 개의 인수가 전달됩니다. 실행 결과는 다음과 같습니다.
기대되는 인수 개수: 3 실제 전달된 인수 개수: 6 각 인수 = 20 50 80 Demo Text! Hello World (현재 날짜 및 시간)
참고: 최신 문법에서는 나머지 매개변수(Rest Parameter) 권장
arguments 객체는 화살표 함수(arrow function)에서 사용할 수 없다는 한계가 있습니다. ES6 이상 환경이라면 다음과 같이 나머지 매개변수(rest parameter)를 사용하는 것이 더 깔끔하고 안전한 방법입니다.
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10정리하면, 전통적인 방식으로는 arguments 객체를, 모던 JavaScript에서는 rest parameter를 활용해 가변 인수를 손쉽게 처리할 수 있습니다.