기본 매개변수(Default Parameters)란?
기본 매개변수는 함수의 매개변수를 훨씬 편리하게 다룰 수 있도록 ES6에서 도입된 기능입니다. 매개변수에 기본값을 미리 설정해 두면, 함수 호출 시 해당 인수가 전달되지 않았거나 undefined가 전달된 경우에만 자동으로 기본값이 적용됩니다. 덕분에 함수 내부에서 일일이 값의 존재 여부를 검사하는 번거로움을 크게 줄일 수 있습니다.
예제
<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>
실행 결과
inc(10, 10)은 두 번째 인수가 전달되었으므로 그대로 20이 출력되고, inc(10)은 두 번째 인수가 없어 기본값 1이 적용되어 11이 출력됩니다.
나머지 매개변수(Rest Parameters)란?
ES6는 개발자의 작업을 한결 수월하게 만들어 주는 나머지 매개변수(Rest Parameter) 문법도 함께 선보였습니다. 나머지 매개변수는 세 개의 점(...)으로 표현하며, 매개변수 이름 앞에 붙입니다. 이를 활용하면 개수가 정해지지 않은 여러 개의 인수를 하나의 배열(Array 인스턴스)로 모아 처리할 수 있습니다.
예제
다음 코드 예제를 살펴보겠습니다.
<html>
<body>
<script>
function addition(…numbers) {
var res = 0;
numbers.forEach(function (number) {
res += number;
});
return res;
}
document.write(addition(3));
document.write(addition(5,6,7,8,9));
</script>
</body>
</html>
실행 결과
addition(3)은 인수가 하나뿐이므로 3, addition(5,6,7,8,9)는 전달된 다섯 개의 값을 모두 더해 35가 출력됩니다.
두 매개변수의 핵심 차이점
두 문법은 이름이 비슷하지만 용도와 동작 방식이 완전히 다릅니다.
- 목적: 기본 매개변수는 인수가 생략될 때 사용할 '기본값'을 지정하는 반면, 나머지 매개변수는 가변적인 개수의 인수를 하나의 '배열'로 수집합니다.
- 위치 제약: 기본 매개변수는 매개변수 목록의 어느 위치에나 올 수 있지만, 나머지 매개변수는 반드시 매개변수 목록의 맨 마지막에 위치해야 합니다.
- 데이터 형태: 기본 매개변수는 단일 값을 다루고, 나머지 매개변수는 전달된 인수들을 실제 배열로 반환하기 때문에
forEach,map등 배열 메서드를 바로 사용할 수 있습니다.
정리하자면, 기본 매개변수는 '값이 없을 때의 대안'을 제공하고, 나머지 매개변수는 '몇 개가 들어올지 모르는 값들의 묶음'을 처리한다고 기억하면 됩니다. 상황에 맞게 두 문법을 조합하면 더욱 유연하고 안전한 JavaScript 함수를 작성할 수 있습니다.