JavaScript ES6에서는 함수 매개변수를 훨씬 유연하고 편리하게 다룰 수 있는 다양한 문법이 도입되었습니다. 대표적으로 기본 매개변수(Default Parameters), 나머지 매개변수(Rest Parameters), 구조 분해 할당(Destructuring)이 있으며, 이번 글에서는 각각의 개념과 실제 활용 예제를 살펴보겠습니다.
1. 기본 매개변수 (Default Parameters)
기본 매개변수는 함수 호출 시 인수가 전달되지 않거나 undefined가 전달될 경우, 매개변수가 미리 정해진 기본값으로 초기화되도록 하는 기능입니다. 이를 통해 별도의 조건문 없이도 안전하게 기본값을 처리할 수 있습니다.
예제
<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)); // 기본값 1이 적용되어 11 출력
</script>
</body>
</html>
실행 결과:
20 11
위 예제에서 inc(10, 10)은 두 번째 인수가 명시적으로 전달되었기 때문에 10 + 10 = 20이 출력됩니다. 반면 inc(10)처럼 두 번째 인수가 생략되면 기본값 1이 적용되어 10 + 1 = 11이 출력됩니다.
2. 나머지 매개변수 (Rest Parameters)
ES6에서 도입된 나머지 매개변수는 개발자의 작업을 크게 단순화해 주는 기능입니다. 세 개의 점(...)을 매개변수 이름 앞에 붙이면, 함수에 전달된 여러 개의 인수들이 하나의 배열로 묶여 해당 매개변수에 저장됩니다. 이는 기존의 arguments 객체를 대체하는 더 깔끔한 방식으로 널리 사용됩니다.
예제
<html>
<body>
<script>
function addition(...numbers) {
var res = 0;
numbers.forEach(function (number) {
res += number;
});
return res;
}
document.write(addition(3)); // 3 출력
document.write("<br>");
document.write(addition(5, 6, 7, 8, 9)); // 35 출력
</script>
</body>
</html>
실행 결과:
3 35
addition 함수는 인수의 개수에 상관없이 모든 값을 더할 수 있습니다. 전달된 인수들은 numbers라는 하나의 배열로 수집되며, forEach를 통해 순회하면서 합계를 계산합니다.
3. 구조 분해 할당 (Destructuring)
구조 분해 할당 역시 ES6에서 도입된 기능으로, 패턴 매칭 방식을 통해 배열이나 객체의 값을 개별 변수에 손쉽게 바인딩할 수 있습니다. 만약 해당 위치에 값이 존재하지 않으면 undefined가 반환됩니다.
아래 예제는 배열의 요소들을 개별 변수로 분해하는 과정을 보여줍니다.
예제
<html>
<body>
<script>
let marks = [92, 95, 85];
let [val1, val2, val3] = marks;
document.write("Value 1: " + val1); // 92
document.write("<br>Value 2: " + val2); // 95
document.write("<br>Value 3: " + val3); // 85
</script>
</body>
</html>
실행 결과:
Value 1: 92 Value 2: 95 Value 3: 85
배열 marks의 각 요소가 순서대로 val1, val2, val3 변수에 할당됩니다. 이처럼 구조 분해 할당을 활용하면 인덱스로 일일이 접근하지 않고도 코드를 간결하고 가독성 높게 작성할 수 있습니다.
마무리
기본 매개변수, 나머지 매개변수, 구조 분해 할당은 현대 JavaScript 개발에서 필수적인 문법입니다. 이 세 가지 기능을 잘 활용하면 함수의 인수 처리 로직을 크게 단순화하고, 코드의 안정성과 가독성을 동시에 향상시킬 수 있습니다.