Javascript(자바스크립트) 에러를 잡는 try catch

---

목차

1. try catch란?
2. try catch 사용법
3. 에러 메세지 보기
4. 커스텀 에러 만들기
5. 주의사항

---

1. try catch 란?

try catch는 자바스크립트를 작성하던 중 오류가 발생하였을때 프로그램이 중지되는 것을 방지하며 그 오류를 표시해주는 역할을 가진 코드이다.

---

2. 사용법

try {
 // 코드실행
 } catch (error) {
 // 에러 발생시 작동할 코드
 }

 

기본 문법은 위와 같다.

 

try 안에 있는 코드를 작동시키다가(일반적으로 한줄 한줄) 오류가 발생하는 순간 그 아래에 있는 모든 코드들은 무시되고 바로 catch문으로 빠지게 되는데 이때 오류의 정보는 error 매개변수로 들어가게 된다. error의 경우 변수명이기 때문에 아무 이름이나 써도 된다.

 

2 - 1 사용 예제

try {
  let a = 10;
  let b = 20;
  let c = a * b;
  console.log("문제 없는 코드");
} catch (e) {
  console.log("에러발생!);
}

 

위의 코드 중 try 안에 있는 코드들은 아무 문제가 없기 때문에 catch 문으로 빠지지 않고 따라서 콘솔창에 "문제 없는 코드"라고 나오게 된다.

 

문제가 있는 코드를 작성하면 어떻게 될까?

 

try {
  let a = 10;
  b; // 잘못된 구문
  let c = a + b;
  console.log("문제 없는 코드");
} catch (e) {
  console.log("에러 발생!");
}

 

이번에는 let, const, var와 같은 선언이 없는 변수 b를 만들었다. 이는 인식되는 순간 바로 오류로 판된되어 이후의 코드는 작동하지 않고 catch문으로 빠지게 된다.

 

실제로 콘솔창에 "에러 발생!"이라고 뜨는 것을 볼 수 있다.

---

3. 에러 메세지 보기

try catch을 사용하는 가장 큰 이유는 오류가 발생해도 프로그램이 멈추지 않기를 바라서일 것이다. 실제로 위의 잘못된 코드를 try catch 없이 실행하면 잘못된 구문을 만나는 순간 오류창을 띄우고 프로그램은 종료가 될 것이다.

 

여기서 오류창을 띄우지 않는다는 사실에 주목해야 한다. 대부분의 오류는 코드만 보아도 무엇이 오류인지 알기 쉽지만 코드가 길고 복잡해질 수록 어느 부분이 오류가 발생하는지 알면 좋을 것이다. 이때 catch문에 들어온 에러객체를 이용해 그 값을 볼 수가 있다.

 

사용법은 간단하다 그냥 콘솔창에 에러객체를 띄우면 된다.

 

try {
  let a = 10;
  b; // 잘못된 구문
  let c = a + b;
  console.log("문제 없는 코드");
} catch (e) {
  console.log(e);
}

 

다음과 같이 사용하면 콘솔창에

ReferenceError: b is not defined     at ...     at ...     at ...

 

이렇게 뜨는 것을 볼 수가있다. 해당 에러는 레퍼런스에러로 b가 정의되지 않았다는 것을 나타낸다. 이렇게 에러객체를 띄움으로써 쉽게 에러의 종류를 확인하고 디버깅을 원활히 할 수 있게 해준다.

 

3 - 1 특정 에러 메세지 보기

에러를 보는 것은 좋지만 굳이 모든 에러메세지가 필요할 수도 있다. 레퍼런스에러인지, 신텍스 에러인지만 궁금할 수도 있고 아니면 그냥 오류 메세지만 알고 싶을 수도 있다.

 

이때 원하는 에러의 내용을 보는 방법은 다음과 같다.

try {
  //...
} catch (error) {
  console.log(error.name);
  console.log(error.message);
}

 

name : 에러의 이름이 무엇인지 나타낸다. (syntax error, reference error...)

message : 에러의 내용을 나타낸다. (b is not defined...)

 

이렇게 하면 자신이 원하는 오류 메세지를 볼 수 있다.

---

4. 에러 만들기

원하는 에러를 만들어 보낼 수도 있다. 그 전에 오류를 굳이 만들어야하는 상황이 무엇일까? 다음과 같은 상황을 보자.

try {
  let a = 10;
  let b;
  let c = a + b;
  console.log(c) // NaN
} catch(e) {
  console.log(e.message);
}

 

위와 같은 코드는 b에 아무런 값이 없기 때문에 당연히 + 연산자도 안될 것이고 그렇기에 에러로 넘어갈 것 같다. 실제로 다른 언어(C언어 등)에서 이 부분은 실행은 커녕 컴파일러 단위에서 오류가 발생하였다고 알려주겠지만 자바스크립트는 이러한 불가능한 연산도 시도하고 심지어 결과도 나온다.

 

하지만 이는 명백한 오류이고 그렇기에 이런 상황에 오류가 나오게 하여야한다. 이때 사용하는 것이 바로 throw 연산자이다.

 

throw의 사용법은 다음과 같다.

throw new Error("에러메세지");

 

throw new 까지는 동일하고 이후 Error 부분은 자신이 원하는 에러 종류를 적으면 된다. 보통은 Error를 사용하는 것이 가장 좋은데 그 이유는 대부분의 오류들이 어떤 이유로 발생하는지 사전에 파악하기 힘들기 때문이다.

 

Error 외에도 SyntaxError, TypeError 등등 많은 에러 종류가 있다.

 

그리고 그 뒤에 에러 발생시 띄울 메세지를 적으면 된다.

 

4 - 1 커스텀 에러 사용

이제 커스텀 에러를 실제로 사용해보자.

try {
  let a = 10;
  let b;
  if (a === undefined || b === undefined)
  {
    throw new Error("a 또는 b의 값이 없습니다");
  }
  let c = a + b;
  console.log(c)
} catch(e) {
  console.log(e);
}

 

위와 같은 구문을 작성하면 if 부분에서 throw가 생성되고 이후 말그대로 new Error("a 또는 b의 값이 없습니다");  부분을 던져서 catch 구문을 넘긴다.

 

이렇게 하면 콘솔창에 

Error: a 또는 b의 값이 없습니다     at ...

 

와 같이 나타나게 된다. 여기서 Error는 throw를 Error로 하였기에 뜬 것이고 이후의 메세지는 우리가 직접 적은 메세지이다. 이를 다시 분석하면

 

e.name === Error

e.message === "a 또는 b의 값이 없습니다"

 

이렇게 된다고 볼 수 있다. 뿐만 아니라 함수 안에 throw를 넣어서도 만들 수도 있고 throw를 활용하는 방법은 정말 많다.

---

5. 주의사항

이렇게 편리한 기능이 많은 try catch 이지만 한가지 알아두어야할 사항이 있다.

 

try catch는 많은 자원을 사용하는 구문이기 때문에 사용을 최대한 자제하여야 한다는 점이다. 특히 if else 문으로 처리할 수 있는 부분을 굳이 try catch로 만들지 말아햐 한다.

 

당장 위의 예제만 하더라도 다음과 같이 수정할 수 있다.

let a = 10;
let b;
if (a === undefined || b === undefined)
{
  console.log("a 또는 b의 값이 없습니다")
}
else
{
  let c = a + b;
  console.log(c);
}

 

이 구문과 4-1 에서 사용한 구문과 다른 점은 오류가 발생한 지점을 알려주냐 아니냐 차이뿐으로 그 외에 프로그래머가 원하는 결과(a나 b의 값이 없으면 + 연산자를 시행하지 않음)는 동일하게 나온다.

 

이렇게 if로 쓸 수 있는 곳은 최대한 if문으로 작성해야하며 정말 try 구문 아니면 코드를 작성하기 곤란한 부분에서만 try 구문을 사용할 필요가 있다.