자바스크립트에서 함수를 호출할 때 필요한 인수를 전달하지 않으면 해당 매개변수에는 undefined가 할당됩니다. 이 경우 산술 연산 결과가 NaN이 되거나 프로그램이 비정상적으로 동작할 수 있습니다. 이러한 문제를 방지하기 위해 매개변수에 기본값을 미리 지정해 두는 기법을 의사 필수(pseudo mandatory) 매개변수라고 합니다. 인수가 생략되더라도 함수가 안전하게 동작하도록 만드는 것이 핵심입니다.
구현 방법
의사 필수 매개변수는 크게 두 가지 방식으로 구현할 수 있습니다.
- ES6 기본 매개변수(Default Parameter) —
function add(a = 0, b = 0)처럼 매개변수를 선언하는 단계에서 기본값을 지정합니다. 가장 권장되는 현대적인 방식입니다. - 논리 OR(&&/||) 연산자 활용 — 함수 본문 내부에서
a = a || 0;과 같이 인수가 전달되지 않았을 때 기본값을 대입합니다. 구버전 환경과의 호환성이 필요할 때 유용합니다.
예제 코드
다음은 버튼 클릭 시 add() 함수와 multiply() 함수를 인수 없이 호출하고, 기본값 덕분에 오류 없이 결과가 출력되도록 구현한 전체 코드입니다.
<!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>Optional function parameters</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the add() and multiply() function</h3>
<script>
let resEle = document.querySelector(".result");
function add(a = 0, b = 0) {
return a + b;
}
function multiply(a, b) {
a = a || 0;
b = b || 0;
return a * b;
}
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = "Sum of the numbers = " + add() + "<br>";
resEle.innerHTML +=
"Multiplication of the numbers = " + multiply() + "<br>";
});
</script>
</body>
</html>
코드 설명
add()함수는 ES6 기본 매개변수 문법을 사용하여 인수가 전달되지 않으면0을 사용합니다.multiply()함수는 함수 본문에서 논리 OR(||) 연산자로 인수를 검사하여, 값이 없을 경우0으로 초기화합니다.- 두 함수 모두 인수 없이 호출되어도
undefined로 인한 오류 없이 정상적인 숫자 결과를 반환합니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 add()와 multiply() 함수가 각각 호출되고, 인수가 전달되지 않았음에도 기본값이 적용된 덧셈과 곱셈 결과가 화면에 표시됩니다.
