자바스크립트 예외 처리

728x90

자바스크립트 예외 처리

구문 오류와 예외

📌 오류의 종류

1. 프로그램이 실행조차 되지 않는 오류

구문오류(syntaxError)

2. 프로그램 실행 중간에 발생하는 오류

런타임 오류(runtimeError)
예외(Exception)

📌 구문오류

SyntaxError

> console.log('안녕하세요'
Uncaught SyntaxError: missing ) after argument list

📌 예외

TypeError
ReferenceError
RangeError

> console.rog('안녕하세요')
Uncaught TypeError: console.rog is not a function at <anonymous>:1:9

📌 기본 예외 처리

<script>
    document.addEventListener('DOMContentLoaded', ()=> {
        const h1 = document.querySelector('h1')

        if(h1) {
            h1.textContent = '안녕하세요'
        } else {
            console.log('h1 태그를 추출할 수 없습니다.')
        }
    })
</script>
<body>

</body>

querySelector() 메소드에서 body에 h1태그가 없으니 예외가 발생한다. 그러므로 조건문을 사용해 h1태그가 없을 경우, console창에 알려주는 예외처리를 해줍니다.

고급 예외 처리

예외를 조금 더 쉽게 잡을 수 있는 기능으로 try catch finally 구문이 있습니다.

이와 같은 구문을 사용해서 예외를 처리하는 방법을 고급 예외 처리라고 합니다.

try{
    // 예외가 발생할 가능성이 있는 코드
} catch (exception) {
    // 예외가 발생했을 때 실행하는 코드
} finally {
    // 무조건 실행할 코드
}

try 구문 안에서 예외가 발생하면 catch 구문에서 처리하고, finally 구문은 예외 발생 여부와 상관없이 실행해야 하는 작업이 있을 때 사용합니다.

📌 기본예외처리를 고급예외처리로 변경

<script>
    document.addEventListener('DOMContentLoaded', ()=> {
        const h1 = document.querySelector('h1')
        try{
            // 예외가 발생할 가능성이 있는 코드
            h1.textContent = '안녕하세요'
        } catch (exception) {
            // 예외가 발생했을 때 실행하는 코드
            console.log('h1 태그를 추출할 수 없습니다.')
        } finally {
            // 무조건 실행할 코드
        }
    })
</script>
<body>

</body>

예외 처리 고급

📌 예외 객체(exception object)

프로그램 언어에서도 예외가 발생하면 예외와 발생된 정보를 확인할 수 있습니다. 이러한 정보를 확인할 수 있게 해주는 것

<script>
    document.addEventListener('DOMContentLoaded', ()=> {
        const h1 = document.querySelector('h1')
        try{
            // 예외가 발생할 가능성이 있는 코드
            h1.textContent = '안녕하세요'
        } catch (exception) {
            // 예외가 발생했을 때 실행하는 코드
            console.log(exception.name)
            console.log(exception.message)
        } finally {
            // 무조건 실행할 코드
        }
    })
</script>
<body>

</body>

위 코드에서 예외 객체는 exception입니다.

모든 브라우저에서 공통적으로 가지는 예외 객체 속성으로는 name과 message 등이 있습니다.

📌 throw키워드

예외를 강제로 발생시킬 때 사용

다른 사람이 강제로 발생시킨 예외를 처리하는 경우
없는 속성에 접근해서 활용하는 경우

// 단순하게 예외를 발생시킵니다.
throw 문자열

// 조금 더 자세하게 예외를 발생시킵니다.
throw new Error(문자열)

📌 throw 예시

<script>
    const getPerimeter = (r) => {
        if(r < 0){
            throw '길이는 음수가 될 수 없습니다.'
        }

        const pi = 3.14
        return 2 * pi * r
    }

    console.log(getPerimeter(-10))
    console.log('프로그램이 정상적으로 종료되었습니다.')
</script>

반지름이 음수가 들어오면 프로그램이 강제로 종료 된다.

<script>
    const getPerimeter = (r) => {
        if(r < 0){
            throw '길이는 음수가 될 수 없습니다.'
        }

        const pi = 3.14
        return 2 * pi * r
    }

    try{
        console.log(getPerimeter(-10))
    } catch(e){
        console.log('어떤 문제가 발생했습니다.')
    } 

    console.log('프로그램이 정상적으로 종료되었습니다.')
</script>

trycatch를 이용해 프로그램이 강제로 종료되는 것을 막을 수 있다.

📌 예외처리의 가장 힘든 점

예외처리를 하는 노동(돈과 시간)
이걸 안 해서 발생하는 위험성

이 균형을 잡는 것이 굉장히 힘듦

참고한 책 : 혼자 공부하는 자바스크립트

저작자표시

'JavaScript' 카테고리의 다른 글

자바스크립트 클래스의 고급 기능 (0)	2022.11.10
자바스크립트 클래스의 기본 기능 (0)	2022.11.10
자바스크립트 localStorage 객체 (0)	2022.11.09
자바스크립트 to do list 만들기 (0)	2022.11.08
자바스크립트 이벤트 활용2 (0)	2022.11.08

팽이의 개발일기

자바스크립트 예외 처리