try-catch(에러핸들링)가 필요한 이유

const App = () => {
  const a = 2;
  a = 4;
  
  return(
    //...(생략)
  )
}

export default App;

npm run start를 통해 앱을 구동시켜 보면, 타입 에러가 발생하는 것을 알 수 있다.

const(상수)로 정의한 a라는 변수를 선언 후 변경을 시도했기 때문이다.

하지만 여기서 문제점은 에러가 발생하면 에러가 난 부분의 이후 로직은 실행이 되지 않는다는 것이다.

위의 경우는 에러를 핸들링하는 이유들 중 하나라고 볼 수 있다.

try-catch 사용

const App = () => {
  const a = 2;
  try{
  	a = 1;
  }catch(err) {
  	console.log(err);
  }
  a = 4;
  
  return(
    //...(생략)
  )
}

export default App; 

위와 같이 try-catch를 사용하면 에러가 발생했을 시 error를 콘솔에 찍어주고, 아래의 로직을 실행할 수 있다.

try 안의 로직을 실행하다 에러가 발생하는 구문을 만나면 바로 catch로 이동하여 catch의 로직을 실행한다.

catch 블록으로 제어흐름이 넘어간 것이다.

try-catch는 모든 에러를 잡아주는가?

아니다. try-catch는 모든 에러를 잡아주지는 못한다.
(), {}가 덜 닫혔다던지 하는 등의 parse-time error는 잡지 못한다.
자바스크립트 엔진(V8)은 코드를 실행 시 먼저 코드를 위에서 아래로 한 번 훑어보는데, parse-time error로 인해 코드를 실행 할 수 없다면 try-catch가 무용지물이 되는 것이다.

따라서 try-catch는 런타임 에러만 잡아낼 수 있다.