본문 바로가기
Frontend/JavaScript

JavaScript : 예외처리에 대해서 알아보자

by 코딩쥐 2024. 8. 2.

예외처리란JavaScript에서 코드 실행 중에 정상적인 문법인데도 불구하고 예기치 못한 에러가 발생했을 때, 이때 코드의 실행 흐름을 복구할 수 있는 기능을 얘기한다. 

  • try{예외 발생되는 코드}catch{예외처리 코드}finally{예외가 발생하지 않아도 무조건 실행되는 코드};

 

예외처리 객체

예외에 대한 로직을 처리하면서 예외 객체를 사용하여 예외가 발생했을 때 뜨는 예외명(name), 예외설명(description), 예외메시지(message)의 값을 가져올 수 있다.

 

오류 유형

execption.name 기준으로 오류 유형을 잡아낼 수 있다. 

오류 유형 설명
EvalError 전역함수eval()에서 발생하는 오류
RangeError 숫자변수나 매개변수가 유효한범위를 벗어났음을 나타내는 오류
ReferenceError 잘못된 참조를 했음을 나타내는 오류
SynraxError eval()이 코드를 분석하는 중 잘못된 구문을 만났음을 나타내는 오류
TypeError 변수나 매개변수가 유효한 자료형이 아님을 나타내는 오류

 

아래와 같이 문법적으로는 문제가 없으나, 만약 숫자가 0이 아닌 다른 숫자를 받게 되면 <p>가 한 개 밖에 없어 에러가 발생한다. 예외처리를 하기 전과 예외 객체를 사용하여 예외처리를 했을 때의 다른 점을 발견할 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>반갑습니다.</p>
    <p>오랜만에 뵙습니다.</p>
    <script>
        try {
            let num = prompt("숫자를 입력해주세요");
            const p = document.getElementsByTagName("p")[num];
            console.log(p.textContent);
        }catch(e){
           if(e.name == 'TypeError'){
            console.log("숫자를 0~1 사이를 작성해주세요.")
           }

        }finally{   
            console.log(`예외처리 끝`);
        }
    </script>
</body>
</html>

예외처리 하기 전

 

에러가 발생하지 않아도 finally의 코드가 실행된다.

 

오류의 유형이 TypeError일 경우 예외를 처리한다.