JavaScript에서 기본 매개변수(Default Parameters)와 나머지 매개변수(Rest Parameters)를 함께 활용하면, 호출 시 전달되는 인자의 개수에 유연하게 대응할 수 있는 함수를 작성할 수 있습니다.
기본 매개변수는 인자가 전달되지 않거나 undefined가 넘어올 때 사용할 기본값을 지정하는 기능입니다. 반면 나머지 매개변수는 정해지지 않은 여러 개의 인자를 하나의 배열로 모아서 처리할 수 있게 해줍니다. 이 두 가지를 조합하면 복잡한 오버로딩 없이도 깔끔하고 가독성 높은 함수 시그니처를 설계할 수 있습니다.
예제 코드
다음은 기본 매개변수와 나머지 매개변수를 사용해 함수 시그니처를 구현한 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Function Signatures with Default and Rest Parameters</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the add() function with multiple parameters</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
function add(a = 0, b = 0, ...param) {
let total = 0;
total += a + b;
param.forEach((item) => {
total += item;
});
return total;
}
BtnEle.addEventListener("click", (event) => {
resEle.innerHTML =
"The total sum = " + add(2, null, 22, 11, 33, 44, 55);
});
</script>
</body>
</html>코드 설명
위 예제의 핵심은 add() 함수입니다. 이 함수는 다음과 같이 동작합니다.
a = 0, b = 0: 첫 번째와 두 번째 매개변수에 기본값 0을 설정했습니다. 인자가 전달되지 않으면 자동으로 0이 사용됩니다....param: 세 번째 위치부터 들어오는 모든 인자를 배열 형태로 수집하는 나머지 매개변수입니다.param.forEach(): 수집된 배열의 각 요소를 순회하며 합계에 더합니다.
버튼 클릭 시 add(2, null, 22, 11, 33, 44, 55)가 호출됩니다. 이때 null은 기본값이 적용되지 않고 그대로 더해져 0으로 취급되며, 나머지 값들은 param 배열에 담겨 모두 합산됩니다.
실행 결과
페이지를 처음 열면 다음과 같이 버튼과 안내 문구가 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 모든 인자가 합산된 결과가 화면에 출력됩니다.
이처럼 기본 매개변수와 나머지 매개변수를 활용하면, 인자 개수가 달라지는 상황에서도 별도의 분기 처리나 오버로딩 없이 하나의 함수로 깔끔하게 대응할 수 있습니다.