[JavaScript 16] 예외 처리

김헤일리·2022년 12월 3일

JavaScript 항해99

JavaScript

목록 보기

17/20

자바스크립트는 코드를 작성했을 때 "코드가 실행조차 되지 않는 오류" 와 "코드 실행 중간에 발생하는 오류" 두가지가 있다.
- 실행되지도 않는 오류 = syntax error
- 실행 도중 발생하는 오류 = exception

1. 오류의 종류

❌ 구문 오류 (Syntax Error)

괄호의 짝이 맞지 않거나 열려있는 문자열이 제대로 닫히지 않을 경우 등, 문법적 실수로부터 발생하는 오류.
- 예시:

<script>
  console.log('프로그램 시작')
  console.log("괄호를 닫지 않으면 구문 오류가 발생한다."
</script>

Uncaught SyntaxError: missing ) after argument list (at a.html:10:17) 라는 에러 메세지가 문제가 생긴 위치와 함께 콘솔에 뜬다.
- 틀린 문법의 코드 말고 맞는 문법의 코드 console.log('프로그램 시작') 조차 실행되지 않는다.
- 이런 문제가 발생한 경우엔 문제가 생긴 위치에 가서 맞는 문법으로 수정하면 된다.

❌ 예외 (Exception)

예외 혹은 runtime error는 실행 중 발생하는 오류를 의미한다.
- 예시:

<script>
  console.log('프로그램 시작')
  console.rog("log 스펠링이 틀리면 해당 코드는 함수(console.log())가 아니기 때문에 타입 에러 오류가 발생한다.");
</script>

Uncaught TypeError: console.rog is not a function at a.html:11:13 라는 에러 메세지가 생성된다.
- 예외의 경우, 맞는 문법 부분 console.log('프로그램 시작')은 실행되지만, 틀린 문법 부분은 실행되지 않는다.
- 실행이 정상적으로 되는 도중에 에러를 만나서 에러 메세지를 출력하고 멈춘 것.
자바스크립트에선 3가지 오류가 예외로 처리된다.
- Type Error, Reference Error, Range Error

2. 예외 처리

⭕️ 기본 예외 처리

조건문을 이용해서 예외가 발생하지 않게 만드는 것을 "기본 예외 처리" 라고 한다.
- 예시:

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

h1이 있을 경우 추출할 수 없다는 메세지가 콘솔에 생성된다.
추출할 문서 객체가 없을 때 출력되어야 할 textContent 속성이 변경되도록 예외 처리를 한 것.

⭕️ 고급 예외 처리

조건문을 사용해서 예외 처리했던 것이 기본 예외 처리라면, 예외를 더 쉽게 잡을 수 있는 기능으로 "try catch finally" 구문이 있다.
- try 구문 안에서 예외가 발생하면 catch 구문에서 예외를 처리한다.
  - 구문 오류는 처리할 수 없다
- finally는 필수는 아니지만 예외 발생 여부와 상관없이 수행되어야 할 작업이 있을 때 사용한다.
- 형식:
```
try {
    // 예외가 발생할 가능성이 있는 코드
} catch (exception) {
    // 예외가 발생했을 때 실행할 코드
} finally {
    // 무조건 실행할 코드
}
```
- 예시:

<script>
  try{
    willExcept.bye() 
    console.log('try 구문의 마지막 줄')
    // 일부로 발생시킨 에러 혹은, 예외가 발생할 가능성이 있는 코드
  } catch (exeption) {
    console.log('catch 구문의 마지막 줄') 
    // try 구문 내부에서 에러가 발생한다면 해당 부분의 구문을 실행하지 않고 catch 내부에 있는 구문을 대신 실행한다.
    // try 구문 내부에 에러가 없다면, try 부분이 정상적으로 출력된다.
  } finally {
    console.log('finally 구문의 마지막 줄')
    // try나 catch와 상관없이 실행될 내용
  }
</script>

어떤 예외가 발생할지 예측하기 힘든 경우에 고급 예외처리를 더 많이 사용한다.

Finally 구문을 사용하는 이유:

코드 실행 예측 시, catch 구문에서 break, continue, return과 같은 키워드를 만날 경우, 함수에서 벗어나기 때문에 그 다음에 코드가 있어도 해당 내용이 출력되지 않는다.
출력해서 확인할 코드가 break, continue, return 같은 키워드 이후에 나타난다면, 해당 코드는 finally 구문 안에서 실행 시켜야 한다.
- 예시:

<script>
  function test () {
    try {
      alert('try')
      throw // 예외를 강제로 발생 시키는 키워드
    } catch (exception) {
      alert('catch')
      return // return 키워드 이후에 나오는 코드는 출력이 안되는게 정상이지만, 
    } finally { // finally 구문이 등장하면 코드가 실행된다.
      alert('finally')
    }
  } // 결과적으로 console에 try, catch, finally 라는 문구가 모두 실행된다.
</script>

3. 예외 객체

예외 발생 시, 예외와 발생된 정보를 확인할 수 있다.
- 정보를 확인할 수 있게 하는 것이 "예외 객체 (exception object)" 다.
- try catch 구문 사용 시 catch 괄호 안에 입력하는 식별자가 예외 객체다.
  - 식별자의 이름은 상관없지만, 기본적으로 e 혹은 exception이라는 식별자 이름을 사용한다.
예외 객체가 갖고 있는 속성은 브라우저에 따라 조금씩 다르지만, 공통적으로 갖고 있는 속성은 "예외 이름 (name)"과 "예외 메세지 (message)" 이다.
- 예시:

<script>
    try {
      const arr = new Array(99999999999999);
      // 1. 자바스크립트의 배열 크기는 4,294,967,295까지 가능하기 때문에 오류 발생 
      // (RangeError: Invalid array length at a.html:11:19)
    } catch (exception) {
      // 2. try 구분에서 오류가 났기 때문에 catch 구문에 있는 부분이 실행된다.
      console.log(`예외 이름: ${exception.name}`);
      // 3. 예외 이름: RangeError
      console.log(`예외 메세지: ${exception.message}`);
      // 4. 예외 메세지: Invalid array length가 각각 콘솔에 출력된다.
    }
</script>

4. 예외 강제 발생

상황에 따라서 예외를 강제적으로 발생시킬 때도 있다.
- 예외를 강제로 발생 시킬땐 throw 키워드를 사용한다.
- throw 사용 시, Uncaught 문자열 형식으로 메세지가 출력되고,
- throw new Error ('문자열') 사용 시 Uncaught Error: 문자열 at 파일이름: 줄 번호 형식으로 에러 메세지가 출력된다.
  - 예시:

<script>
    function divide(a, b) {
  	// 1. 숫자를 나눌 수 있는 특정 함수를 설정 하고,
      if (b === 0) {
        // 2. 원래 N/0 의 값은 Infinity로 출력되지만 에러메세지를 출력하고 싶을 때,
        throw "0으로 나눌 수 없습니다.";
        // 3. 0 으로 나눌 경우 특정 에러 메세지가 뜨도록 throw 키워드를 이용해서 설정한다.
      } else {
        return a / b;
        // 4. 0으로 나누는 조건이 아니면 본래 의도대로 a/b의 값을 출력한다.
      }
    }

    console.log(divide(10, 2)); // 정상적으로 숫자 5가 출력된다.
    console.log(divide(10, 0)); // Uncaught 0으로 나눌 수 없습니다. 라는 문구가 출력된다.
  </script>