가변 인자 함수는 매개변수를 정의하지 않았는데 인수로 넘어온 값드을 활용하는 함수이다.
자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않고 초과된 인수는 무시한다.
다만 초과된 인수가 버려지는 것이 아닌 암묵적으로 arguments 객체의 속성으로 보관된다.
이를 활용하여 가변 인자 함수를 구현할 수 있다.
arguments 객체 : 함수 호출시 전달된 인수들의 정보를 담고 있는 배열 형태의 객체다 (함수 스코프)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function add() {
let len = arguments.length;
if (len < 2) {
// document.write("2개 이상의 숫자를 입력하세요");
return "2개 이상의 숫자를 입력하세요";
}
else {
let sum = 0;
for (let idx in arguments) {
sum += arguments[idx];
}
return sum;
}
}
document.write('add()의 결과 : ' + add() + "<br>");
document.write('add( 100 )의 결과 : ' + add(100) + "<br>");
document.write('add( 100, 200 )의 결과 : ' + add(100,200) + "<br>");
document.write('add( 100, 200, 300, 400, 50 )의 결과 : ' + add(100,200,300,400,50) + "<br>");
</script>
</body>
</html>
배열, 객체
함수의 인수에는 배열이나 객체가 올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function showMe(a,b) {
document.write(a[0] + "가 " + a[1] + "개 있습니다." +"<br>");
document.write("나는 " + b.car + "를 타고, 색상이 " + b.color + "이다.")
}
</script>
</head>
<body>
<script>
let array = ["사과", 10];
let obj = {"car":"BMW","color":"black"};
showMe(array, obj);
</script>
</body>
</html>