[JS 기초] try / catch / finally

try / catch / finally 🛠

웹 개발을 하다 보면
코드 실행 중 에러가 발생하는 경우가 있습니다.

예를 들어

서버 요청 실패
API 오류
잘못된 데이터
네트워크 문제

이때 아무 처리를 하지 않으면
프로그램이 멈추거나 에러가 그대로 출력될 수 있습니다.

그래서 JavaScript에는
에러를 처리하는 문법이 존재합니다.

바로 try / catch / finally 입니다.

주요 포인트 Top3

01. try / catch 기본 구조

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

실행 흐름

코드 실행
→ 에러 없음 → 정상 실행
→ 에러 발생 → catch 실행

02. 기본 예시

try {
 
  console.log(a);
 
} catch (error) {
 
  console.log("에러 발생");
 
}

여기서

a는 선언되지 않은 변수

이기 때문에 에러가 발생합니다.

그래서 catch 코드가 실행됩니다.

03. error 객체

catch에는 에러 정보가 전달됩니다.

try {
 
  console.log(a);
 
} catch (error) {
 
  console.log(error);
 
}

error에는 다음 정보가 들어있습니다.

에러 메시지
에러 타입
에러 위치

그래서 실제 개발에서는
에러 메시지를 확인하는 용도로 많이 사용합니다.

04. finally

finally는 에러 여부와 상관없이 항상 실행되는 코드입니다.

try {
 
  console.log("코드 실행");
 
} catch (error) {
 
  console.log("에러 발생");
 
} finally {
 
  console.log("항상 실행");
 
}

실행 결과

코드 실행
항상 실행

또는

에러 발생
항상 실행

05. async / await와 함께 사용

실제 웹 개발에서는
try / catch를 async / await와 함께 사용합니다.

예

const loadData = async () => {
 
  try {
 
    const response = await fetch("API주소");
 
    const data = await response.json();
 
    console.log(data);
 
  } catch (error) {
 
    console.log("데이터 요청 실패");
 
  }
 
};

이 코드는

서버 요청
→ 성공 → 데이터 출력
→ 실패 → 에러 처리

를 수행합니다.

06. 실제 웹 개발 상황

웹 개발에서는 다음 상황에서
try / catch를 사용합니다.

API 요청 실패
데이터 처리 오류
파일 로딩 오류
로그인 요청 실패

즉

비동기 작업
→ 실패 가능성 있음
→ try / catch로 처리

이 구조가 됩니다.

GOYO.’s Tip 💡

async / await를 사용할 때
try / catch는 거의 항상 같이 사용됩니다.

실제 개발에서는 보통 이런 구조입니다.

async 함수
↓
try
↓
await fetch
↓
데이터 처리
↓
catch 에러 처리

마무리 🎯

try / catch / finally는
JavaScript에서 에러를 처리하는 문법입니다.

특히

서버 요청
API 데이터 처리
비동기 작업

같은 상황에서
에러를 안전하게 처리하기 위해 사용됩니다.