Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트 finally 문 완벽 가이드: 오류와 무관하게 항상 실행되는 코드

자바스크립트 finally 문이란?

자바스크립트의 finally 문은 try 블록과 catch 블록이 모두 실행된 후에 오류가 발생했는지 여부와 관계없이 항상 실행되는 구문입니다. 이러한 특성 덕분에 리소스 해제, 변수 초기화, UI 업데이트 등 어떤 경우에도 반드시 수행해야 하는 정리(cleanup) 작업을 안전하게 처리할 수 있습니다.

일반적인 동작 흐름은 다음과 같습니다.

  • try 블록에서 오류가 발생하지 않으면 → try 블록 실행 후 finally 블록 실행
  • try 블록에서 오류가 발생하면 → catch 블록 실행 후 finally 블록 실행

즉, finally 블록은 프로그램의 성공·실패 여부와 상관없이 예외 처리 흐름의 마지막에 항상 호출됩니다.

finally 문 예제 코드

다음은 자바스크립트에서 finally 문을 활용한 실제 동작 예제입니다. 버튼을 클릭하면 아직 정의되지 않은 변수에 접근하여 의도적으로 ReferenceError를 발생시키고, 그 과정에서 finally 블록이 어떻게 실행되는지 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<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,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Finally in Javascript</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to call a variable before it is defined
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        try {
            resEle.innerHTML = a;
        }
        catch (err) {
            resEle.innerHTML = "Error = " + err;
        }
        finally {
            sampleEle.innerHTML = "The code inside finally has been executed";
        }
        let a = 44;
    });
</script>
</body>
</html>

코드 설명

위 예제의 핵심 로직은 다음과 같습니다.

  1. try 블록: 아직 선언되지 않은 변수 a에 접근합니다. let으로 선언된 변수는 호이스팅되더라도 초기화 전에는 접근할 수 없으므로(일시적 사각 지대, TDZ) ReferenceError가 발생합니다.
  2. catch 블록: 발생한 오류 객체를 받아 화면에 'Error = ReferenceError...' 형태로 출력합니다.
  3. finally 블록: 오류 발생 여부와 무관하게 실행되며, '.sample' 요소에 'The code inside finally has been executed'라는 문구를 표시합니다.

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

자바스크립트 finally 문 완벽 가이드: 오류와 무관하게 항상 실행되는 코드

'CLICK HERE' 버튼을 클릭하면 다음과 같이 오류 메시지와 함께 finally 블록의 실행 결과가 함께 출력됩니다.

자바스크립트 finally 문 완벽 가이드: 오류와 무관하게 항상 실행되는 코드

결과 화면에서 볼 수 있듯이, try 블록에서 오류가 발생하여 catch 블록이 실행되었음에도 불구하고 finally 블록의 코드가 정상적으로 실행된 것을 확인할 수 있습니다.

마무리: finally 문을 사용해야 하는 이유

finally 문은 다음과 같은 상황에서 특히 유용합니다.

  • 파일이나 네트워크 연결 등 외부 리소스를 해제해야 할 때
  • 오류 발생 여부와 관계없이 로딩 인디케이터를 숨기거나 UI 상태를 초기화해야 할 때
  • 테스트나 디버깅 시 특정 코드가 반드시 실행되도록 보장해야 할 때

try-catch만으로는 오류 발생 시 이후 코드가 건너뛰어질 수 있지만, finally 블록을 사용하면 어떤 상황에서도 필요한 마무리 작업이 누락되지 않도록 보장할 수 있습니다.