JavaScript 선택적 인수란?
JavaScript에서 함수의 매개변수를 선택적(Optional)으로 만들려면 ES6(ES2015)부터 도입된 기본 매개변수(Default Parameters) 문법을 사용하면 됩니다. 기본 매개변수는 함수를 호출할 때 해당 인수가 전달되지 않거나 undefined가 전달될 경우, 미리 지정해 둔 기본값이 자동으로 적용되는 기능입니다.
기본 문법
function 함수이름(매개변수1, 매개변수2 = 기본값) {
// 실행 코드
}위와 같이 매개변수 이름 뒤에 등호(=)를 붙여 기본값을 지정하면, 인수가 생략된 호출에도 오류 없이 안전하게 동작합니다.
예제
다음 예제는 inc 함수의 두 번째 매개변수 inc에 기본값 1을 설정한 코드입니다. 인수를 두 개 모두 전달하면 전달된 값이 사용되고, 하나만 전달하면 기본값이 대신 적용됩니다.
<html>
<body>
<script>
// inc 매개변수의 기본값은 1로 설정됨
function inc(val1, inc = 1) {
return val1 + inc;
}
document.write(inc(10, 10));
document.write("<br>");
document.write(inc(10));
</script>
</body>
</html>
실행 결과
20
11
결과 해설
inc(10, 10)은 두 번째 인수로 10이 명시적으로 전달되었기 때문에 10 + 10 = 20이 출력됩니다. 반면 inc(10)은 두 번째 인수가 생략되었으므로 기본값인 1이 적용되어 10 + 1 = 11이 출력됩니다.
이처럼 기본 매개변수를 활용하면 인수 개수가 유동적인 함수를 손쉽게 작성할 수 있으며, 과거에는 typeof 검사나 arguments 객체로 처리하던 복잡한 로직을 한 줄로 깔끔하게 대체할 수 있습니다.