ES2019(ES10)에서 도입된 선택적 캐치 바인딩(Optional Catch Binding)은 try-catch 문에서 catch 블록의 괄호와 매개변수를 생략할 수 있도록 해주는 기능입니다. 즉, 발생한 에러 객체를 담을 변수를 더 이상 선언하지 않아도 됩니다.
이 기능은 다음과 같은 상황에서 특히 유용합니다.
- 발생할 수 있는 에러의 종류를 미리 알고 있는 경우
- 에러의 구체적인 내용과 관계없이 단순히 예외 처리 로직만 실행하면 되는 경우
기존에는 반드시 catch(err)처럼 변수를 명시해야 했지만, 이제는 아래와 같이 괄호 없이 catch만 작성하면 됩니다.
try {
// 에러가 발생할 수 있는 코드
} catch {
// 에러 객체 없이 예외 처리
}예제 코드
다음은 JavaScript에서 선택적 캐치 바인딩을 활용한 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<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;
}
</style>
</head>
<body>
<h1>JavaScript의 선택적 캐치 바인딩</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 에러가 발생합니다</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
try {
resEle.innerHTML = a;
}
catch {
resEle.innerHTML = "변수 a가 선언되지 않았습니다";
}
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'클릭하세요' 버튼을 누르면 선언되지 않은 변수 a에 접근하려다 ReferenceError가 발생하고, catch 블록이 이를 감지하여 에러 객체를 받지 않고도 아래와 같이 안내 메시지를 화면에 표시합니다.
정리
선택적 캐치 바인딩은 코드를 더 간결하게 만들어 주며, 에러 객체가 실제로 필요하지 않은 경우 불필요한 변수 선언과 메모리 낭비를 줄여줍니다. 다만 에러의 상세 정보(메시지, 스택 트레이스 등)가 필요한 디버깅 상황에서는 여전히 기존 방식대로 catch(err) 형태로 에러 객체를 받아 활용하는 것이 좋습니다.