[JavaScript] Error와 예외관리(Exception Handling)

iberis2·2023년 1월 9일
0

에러 객체(Error Object)

코드 실행 도중 에러가 발생하면 프로그램 자체가 멈춰버리고 그 이후 코드들이 실행되지 않는 문제가 발생한다. 그래서 에러 관리가 필요하다.
자바스크립트에서 에러가 발생하면 에러의 정보가 담긴 에러 객체(Error Object)가 생성된다.
이 에러 객체에는 이름(name)메세지(message) 프로퍼티가 있다.

JS에서 가장 많이 나오는 3가지 Error
1. Reference Error
2. Type Error
3. Syntax Error

Syntax Error는 코드를 실행조차 하지 않는다.
실행이 가능한 코드에서 발생한 Error를 예외(Exception)이라고 부른다.
실행 가능한 코드에서 발생한 Error를 다루는 과정을 예외 처리(Exception Handling) 라고 한다.

새로운 에러 객체 생성

new TypeError('에러 내용');

const error = new TypeError("타입 에러가 발생했습니다.");

console.log(error.name); // TypeError
console.log(error.message); // 타입 에러가 발생했습니다.

(의도적으로) 에러 실행

throw 에러이름;

const error = new TypeError("타입 에러가 발생했습니다.");
console.log('에러 시작 전');
  
throw error;

console.lpg('에러 시작 후');
console.log(error.name);
console.log(error.message);

try catch

try{ 코드 } catch(error) { 에러 발생했을 때 동작할 코드}
에러가 발생 할 경우 동작할 코드를 만들어 에러를 관리할 수 있다.

  • 에러가 발생하면 catch 문 이후 코드가 동작하고,
    에러 발생 시점 이후의 try문 안의 코드들은 동작하지 않는다.
  • 에러가 발생하지 않으면 catch문 안의 코드들은 출력되지 않고,
    try문 안의 모든 코드들이 정상 동작한다.
try{
  console.log('에러 전');
 
  const codeit = '코드잇';
  console.log(codeit);

  codeit = 'codeit'; // const로 선언한 상수 재할당
  
  const language = 'JavaScript'; // 에러 발생 후의 코드들은 실행되지 않는다.
  connsole.log(language); 
  
}catch(err){ // 파라미터는 아무 변수나 가능하다 보통 'error', 'err', 'e' 등을 많이 사용한다. 

  console.log('에러 후');

  console.error(err);  // console.error로 출력하면 실제 Error 메세지 처럼 출력할 수 있다.

  console.log(err.name);
  console.log(err.message);
}

활용 방법

try catch 문을 통해 에러를 관리하면, 에러 발생 후에도 catch 문의 코드 동작 후 프로그램이 멈추지 않고 다음 코드들이 진행된다.

function printMember(members) {
  try {
    for (const member of members) {
      console.log(member);
    }
  } catch (err) {
    console.log(err);
    alert(`${err.name}가 발생했습니다. 콘솔을 확인해주세요`);
  }
}

const teamA = ["이나", "서현", "주희"];
printMember(teamA);

const teamB = { name: "코알라" }; // for of 문에 객체를 사용하여 에러가 발생한다.
printMember(teamB);

const teamC = ["이지", "지은", "혜진"];
printMember(teamC);


teamB에서 에러가 발생해도 프로그램이 멈추지 않고,
catch문의 코드가 실행된 후 teamC가 정상 출력되었다.

💡try catch 사용시 주의할 점
try{ 코드 } catch(error) { 코드 } 도 각각의 코드 블럭 { }으로 이루어져 있고, 블럭 스코프를 가진다.

try{
 const title = 'try catch문 활용하기'
} catch(error){
 console.error(error);
}

console.log(title); // Uncaught ReferenceError: title is not defined

finally

try catch 문에서 에러 여부와 상관 없이 항상 실행되는 코드를 작성한다.
try{ 실행할 코드 } catch(error){ 에러가 발생했을 때 실행할 코드 } finally { 항상 실행할 코드 };
try문에서 에러가 발생하지 않는다면 try문 실행 후,
try문에서 에러가 발생한다면 catch문 코드가 모두 실행 된 다음 finally문 코드가 실행된다.

function printMember(...members) {
  for (const member of members) {
    console.log(member);
  }
}


try {
  printMember("가희", "민지", "정민");
} catch (err) {
  console.log(err);
  alert(`${err.name}가 발생했습니다. 콘솔을 확인해주세요`);
} finally {
  const end = new Date();
  console.log(`코드 실행을 완료한 시간은 ${end.toLocaleString()}입니다.`);
}

/* 가희
민지
정민
코드 실행을 완료한 시간은 1/9/2023, 9:11:21 PM입니다.*/

finally문에서 예외 처리

finally 문에서 에러가 발생한 경우 다시 그 위에 있는 catch문으로 넘어가지는 않는다.
만약 finally 문에서 예외 처리가 필요한 경우 try catch 문을 중첩해서 활용해야 한다.

try {
  try{
     실행할 코드
  } catch(err){
    에러가 발생했을 때 실행할 코드
  } finally {
    항상 실행할 코드
  }
} catch(err){
  finally 문에서 에러가 발생했을 때 실행할 코드
}
profile
React, Next.js, TypeScript 로 개발 중인 프론트엔드 개발자

0개의 댓글