try & catch

try & catch는 서버 통신 시 실패 이유를 쉽게 파악할 수 있는 메서드다. 더불어 finally까지 사용한다면 성공 여부에 상관 없이 통신 완료 시 원하는 이벤트를 설정할 수도 있다.

사용 방법

try {
  console.log("통신 성공1");
  console.log("통신 성공2");
  console.log("통신 성공3");
} catch (error) {
  console.error(error);
}

사용방법은 간단하다. 실패 여부를 알아아하는 코드를 try {}에 넣고, 바로 catch{}를 사용한다. 이때 catch는 try 실행에 대한 성공 여부를 확인하고 성공 시 패스하고, 실패 시 실패에 대한 이유를 error 매개변수에 담아온다. 위 코드대로면 별다른 통신 없이 콘솔로 찍었기 때문에 정상 실행되겠지만, 실패 했다고 가정한다면 콘솔에 error를 표기한다.

function getMonthName(mo) {
  mo--;
  const months = [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
  ];
  if (months[mo]) {
    return months[mo];
  } else {
    throw new Error('유효하지 않은 월입니다.'); 
  }
}

try { // statements to try
  monthName = getMonthName(myMonth); 
} catch (e) {
  monthName = '실패';
  logMyErrors(e); 
}

catch에 들어갈 오류 이유를 프론트에서도 설정할 수 있다. 미리 위 코드는 숫자로 월을 받으면 영어로 해당 월을 표시하는 함수다. 조건문을 사용해 해당월의 숫자가 올바르지 않을 경우 throw를 통해 new Error를 던지도록 했다. try catch문에서 해당 함수를 실행해보자. 0보다 작은 숫자 혹으 12보다 큰 숫자를 널을 경우 getMonthName 함수 if문을 통해 에러가 던져진다. 이때 catch는 해당 오류를 인지하고 바로 monthName에 '실패' 문자열을 반환하고 if문에서 던진 오류 '유호하지 않은 월입니다.'를 표기한다.

주의점

try 실행 시 중간에 오류가 발생한다면 catch가 그 즉시 실행된다 즉 위 코드에서 console.log("통신 성공2");에서 오류가 났다면 console.log("통신 성공3");은 실행하지 않고 바로 catch로 넘어간다.

try catch를 사용하는 이유는 하나 더 있다. try catch 없이 통신이나 코드가 실행 실패 했을 경우 스크립트는 거기서 멈춘다. 화면을 그리지도 못한 채 오류만 떡하니 떠있을 수 있다는 이야기다. 다만 try catch를 사용한다면 오류는 catch에서 잡고, 아래 스크립트를 그대로 실행한다.

finally

try catch로 흔히 부르지만 이 문법에는 finally가 하나 더 있다. finally는 try에 쓴 실행 코드가 성공하든 실패하든 무조건 실행되는 메서드다.

try {
  console.log("통신 성공");
} catch (error) {
  console.error(error);
} finally {
  console.log("성공하든 실패하든 띄웁니다")
}

결론

중요한 코드거나, 통신 시 오류를 컨트롤 해야할 경우, 오류가 나더라도 화면을 먼저 띄워야할 경우 try catch문을 꼭 사용해야할 듯하다. 예상치 못한 상황에서 빠르게 상황을 인지할 수 있고, 사용자에게도 덜 당황스러운 화면을 나타낼 수 있기 때문이다.

[MDN] try...catch

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)