JavaScript에서 기본 매개변수(Default Parameter)는 함수 매개변수를 더욱 편리하게 다룰 수 있도록 도와주는 기능입니다. 기본 매개변수를 사용하면 형식 매개변수에 기본값을 미리 지정할 수 있으며, 이 기본값은 인자가 전달되지 않았거나 undefined가 넘어온 경우에만 적용됩니다.
ES6(ECMAScript 2015)부터는 별도의 조건문 없이도 함수 선언 시 간단하게 기본 매개변수를 설정할 수 있습니다. 그렇다면 기본 매개변수 뒤에 기본값이 없는 매개변수가 오면 어떻게 동작할까요? 아래 예제를 통해 살펴보겠습니다.
기본 매개변수 기본 예제
다음 예제에서는 두 번째 매개변수 inc에 기본값 1을 설정했습니다. 인자를 생략하면 기본값이 자동으로 적용됩니다.
<html>
<body>
<script>
// inc의 기본값은 1로 설정
function inc(val1, inc = 1) {
return val1 + inc;
}
document.write(inc(10, 10)); // 20 출력
document.write("<br>");
document.write(inc(10)); // 11 출력
</script>
</body>
</html>기본 매개변수 뒤에 일반 매개변수가 오는 경우
JavaScript의 매개변수는 왼쪽에서 오른쪽 순서로 평가됩니다. 따라서 기본값이 설정된 매개변수 뒤에 기본값이 없는 매개변수를 배치하더라도 문법적으로 오류가 발생하지 않고 정상적으로 실행됩니다. 다만, 호출 시 인자를 생략하면 뒤쪽 매개변수에는 undefined가 할당된다는 점에 유의해야 합니다.
<html>
<body>
<script>
// val1에만 기본값 10을 설정
function display(val1 = 10, val2) {
return [val1, val2];
}
document.write(display()); // 10,undefined 출력
document.write(display(20)); // 20,undefined 출력
</script>
</body>
</html>위 코드를 보면 display()를 인자 없이 호출했을 때 첫 번째 매개변수 val1은 기본값 10으로 초기화되지만, 기본값이 없는 val2는 undefined가 됩니다. 마찬가지로 display(20)처럼 하나의 인자만 전달하면 해당 값이 왼쪽부터 차례대로 채워지므로 val2 역시 undefined로 남게 됩니다.
정리
- 기본 매개변수는 인자가 전달되지 않거나
undefined일 때만 기본값으로 초기화됩니다. - 매개변수는 왼쪽에서 오른쪽 순서로 평가되며, 기본값이 있는 매개변수 뒤에 기본값이 없는 매개변수가 와도 문법 오류는 발생하지 않습니다.
- 다만 가독성과 유지보수를 고려하면 기본값이 없는 매개변수를 앞쪽에, 기본값이 있는 매개변수를 뒤쪽에 배치하는 것이 권장됩니다.