TIL 19 | 에러 처리 (Exception Handling)

자바스크리트는 에러가 나면 자동으로 에러에 대한 정보를 담은 에러객체를 생성한다. 에러 객체는 공통적으로 에러의 이름이 담긴 name 프로퍼티와 에러에 대한 자세한 정보를 담은 message 라는 프로퍼티로 존재한다. 우리가 자주 보게 되는 에러 객체는 존재하지 않는 번수나 함수를 호출할 때 생성되는 ReferenceError, 잘못된 방식으로 자료형을 다룰 때 발생하는 TypeError, 문법에 맞지 않는 코드 작성시 발생하는 SyntxError가 있다. SyntexError는 에러가 나기 전까지는 작동하다가 에러 이후에는 작동을 멈추는 다른 에러들과는 달리 코드가 실행하기도 전에 에러가 발생한다는 점에서 차이가 있다.

에러 객체의 이름과 형식을 사용하면 직접 에러 객체를 생성할 수도 있다.

1. 에러 객체 생성 (생성자 함수 활용)

const error = new TypeError('타입 에러가 발생했습니다.') // 이건 에러 객체를 생성만 했을 뿐 실행되는 코드는 아니다. 

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

2. 에러 객체 실행 (throw)

throw error; // 의도적으로 에러 객체를 실행하는 방법, 에러 객체 발생 이후 코드는 동작하지 않게 된다. 

3. try catch 문

에러가 발생했을 시 상황을 제어하는 문법

try {
  // 코드
} catch (error){
  // 에러가 발생했을때 코드
}

try {
  console.log('에러 전')

  const codeit = '코드잇';
  console.log(codeit)

  codeit = 'codeit'; // 에러 발생, 에러 발생 시점 이후 코드는 실행되지 않는다.
  const language = 'JavaScript'
  console.log(language)
  
} catch(error){ // 에러가 발생되면 catch문 실행
  console.log('에러 후')
  console.error(error) // 실제 에러 메세지 처럼 콘솔창에서 확인 가능
  console.log(error.name) // 에러 이름 출력
  console.log(error.message) // 에러 내용 출력
}

try catch 문을 활용하는 상황은 다음과 같다.

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

const teamA = ['상혜','혜진','지혜','혜선'];
printMembers(teamA);

const codeit = { name: 'codeit'} 
printMembers(codeit); // 객체는 for of 문을 사용할 수 없기 때문에 TypeError 발생

const teamB = ['영훈', '재훈','종훈','정훈']
printMembers(teamB); // 위 에러로 teamB 에는 접근조차 할 수 없다. 

위의 상황을 try catch 문으로 해결하면?

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

const teamA = ['상혜','혜진','지혜','혜선'];
printMembers(teamA); // 정상적으로 실행

const codeit = { name: 'codeit'} 
printMembers(codeit); // 에러로 catch문 실행

const teamB = ['영훈', '재훈','종훈','정훈']
printMembers(teamB); // catch문 실행 이후 정상적으로 동작

try catch 문을 활용하면 에러가 발생해도 catch문 안의 코드를 실행시킬 수 있다.
이처럼 try catch 문은 실행이 가능한 코드의 에러를 다루는데 유용한 반면 syntaxError처럼 실행조차 되지 않는 코드의 에러는 다룰 수 없다. 실행가능한 코드에서 에러가 발생할 시 이를 예외(exception)이라고 부르는데 try catch문 처럼 이를 제어하는 것을 예외 처리(Exception Handling)라고 부른다.

4. finally

try catch 문은 finally라는 코드블록을 하나 더 가질 수 있다. finally는 try문에서 어떤 코드를 실행할 때 에러 여부와 상관 없이 항상 실행할 코드를 작성한다. finally 문은 try문에서 에러가 발생하지 않는다면 try문의 코드가 모두 실행된 다음에, try문에서 에러가 발생한다면 catch문의 코드가 모두 실행된 다음 실행된다.

// 에러 유무와 상관 없이 코드 실행 시각을 알려주는 코드

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

try {
  printMembers('영훈', '윤수', '동욱');
} catch (err) {
  alert('에러가 발생했습니다!');
  console.error(err);
} finally {
  const end = new Date();
  const msg = `코드 실행을 완료한 시각은 ${end.toLocaleString()}입니다.`;
  console.log(msg);
}

finally 문에서의 에러 처리는?
finally 문에서 에러가 발생할 경우 다시 catch 문으로 넘어가지 않는다.
이를 위해 try catch문을 중첩으로 활용하는 방법도 있다.

try {
  try {
    // 실행할 코드
  } catch (err) {
    // 에러가 발상했을 때 실행할 코드
  } finally {
    // 항상 실행할 코드
  }
} catch (err) {
  // finall문에서 에러가 발생했을 때 실행할 코드
}