[Javascript] Try/Catch, Error를 다루는 방법

버그는 프로그래밍 어디에나 존재하고, Unknown features(알려지지 않은 기능)이라고 까지 불리웁니다.

하지만, 버그는 언제나 우리에게 흥미로운 존재는 아닙니다.

자기 자신 스스로가 발견하는 버그보다, 클라이언트가 발견한 버그에 대해서 기분 좋게 받아들일 수만은 없을 것입니다.

Try Catch의 사용법을 알아봅시다.

 

Try Catch 블록은 무엇인가?

try/catch 블록은 기본적으로 JavaScript에서 오류를 처리하는 데 사용됩니다. 

스크립트의 오류로 인해 코드가 손상되는 것을 원하지 않을 때 이것을 사용합니다.

if문으로도 할 수 있을 것 처럼 보이지만, try/catch는 if/else에 비해서 더 많은 기능들을 제공합니다.

try { 
  getData();
} catch(e){
  alert(e);
}

코드를 try 블록에 넣으면 오류가 발생하면 즉시 JavaScript가 catch문 제어를 제공하고 사용자가 말한 대로 수행합니다.

JavaScript의 다른 모든 객체와 마찬가지로 e.name(ReferenceError) 및 e.message(getData가 정의되지 않음)와 같이 값에 다르게 액세스하도록 결정할 수 있습니다.

Try Catch 블록의 이점은?

Throw 구문의 사용

실제 try/catch의 이점은 사용자가 정의한 오류를 표시할 수 있다는 것입니다.

let num = prompt("30 이상 또는 40 이하의 숫자를 입력하세요.")
try { 
  if(isNaN(num)) { 
    throw "숫자가 아님!"
  } else if (40 < num) {
    throw "40 이하의 숫자를 입력하세요."
  } else if (num <= 30) {
    throw "30 이상의 숫자를 입력하세요."
  }
} catch(e){
  alert(e); 
}

이 방법도 괜찮지만, 우리는 생성자 Throw를 사용하여 더 나은 코드를 작성할 수 있습니다.

기본적으로 자바스크립트에서는 errors를 6가지로 나눌 수 있습니다.

 

1. EvalError - eval 함수에서 발생
2. RangeError - number가 범위를 초과했을 때 발생 ex) 1.toPrecision(500)
3. ReferenceError - 선언되지 않은 변수에 대한 사용
4. syntaxError - 문법 에러
5. TypeError - type 에러 ex) 1.toUpperCase()
6. URI (Uniform Resource Identifier) Error - URI에 포함되지 않는 문자열을 사용했을 때 발생

따라서, 이 모든 것을 통해 throw new Error("에러 입니다.")와 같은 오류를 쉽게 던질 수 있습니다. 

이 경우 오류 이름은 오류이고 메시지는 "에러 입니다." 입니다. 

다음과 같이 사용자 정의 오류 생성자를 직접 생성할 수도 있습니다.

function CustomError(message){ 
  this.value ="customError";
  this.message=message;
}

Finally 구문의 사용

Finally 구문을 사용할 수 있으므로, try/catch문과 관계 없는 반드시 실행되어야 하는 구문을 따로 작성할 수 있습니다.

Nesting(중첩) 기능 사용

if/else문도 분명히 중첩할 수 있지만, try블록을 중첩하면 여러 try문에 대해서 하나의 catch문만 사용할 수 있는 이점이 있습니다.

try { 
  try { 
    throw new Error('오류!');
  } catch(e) {
    console.log(e) 
  } finally { 
    console.log('finally'); 
  } 
} catch (error) { 
  console.log('에러: ' + error); 
}

위와 같이 작성했을 때 외부 catch는 발생하지 않습니다.

try { 
  try { 
    throw new Error('내부 에러'); 
  } catch(e) {
    console.log(e); // 내부 에러에 대한 코멘트 작성
  } finally {
    console.log('finally'); 
  } 
  throw new Error('외부 에러'); // 외부 에러 발생
} catch (error) { 
  console.log(error);
}

외부 에러를 발생시키고 싶을 때는 위와 같이 작성합니다.

Rethrow 에러 사용

catch 문은 실제로 발생하는 모든 오류를 포착하며 때로는 원하지 않을 수도 있습니다.

"use strict" 
let x = parseInt(prompt("5이하의 값을 입력하세요.")) 
try{ 
  y = x - 10; 
  if(5 <= y) {
    throw new Error(" y의 값이 5를 초과 합니다.");
  } else {
    alert(y);
  }
} catch(e) { 
  alert(e);
}

use strict모드에서는 선언되지 않은 변수를 사용할 수 없습니다. (y)

이와 같은 상황에서 오류 이름을 확인할 수 있으며, 원하는 것이 아니면 다시 던집니다.

"use strict" 
let x = parseInt(prompt("5이하의 값을 입력하세요.")) 
try{ 
  y = x - 10; 
  if(5 <= y) {
    throw new Error(" y의 값이 5를 초과 합니다.");
  } else {
    alert(y);
  }
} catch(e) { 
  if(e isntanceof ReferenceError) {
   throw e;
   return;
  }
  alert(e);
}

특정 유형의 오류만 모니터링하려는 경우에는 매우 유용합니다.

결론

try/catch를 유용하게 사용합시다.

이번 시간에 배운 것들을 정리해봅니다.

• try/catch는 무엇이고 어떻게 동작하는가
• 커스텀 에러를 만드는 방법
• finally의 장점 및 어떻게 사용하는지
• nesting try/catch의 장점
• 에러를 다시 던지는 방법

 

출처 : https://www.freecodecamp.org/news/try-catch-in-javascript/

Try/Catch in JavaScript – How to Handle Errors in JS