[JS/React] 뒤늦게 정리하는 예외 처리 방식 중 하나인 try/catch/finally

J.A.Y·2024년 3월 29일
0

javaScript

목록 보기
21/21

지난번 프로젝트때 거의 모든 로직에 들어갔던 try, catch문... 대충 이 구문이 해주는 역할은 알고 있지만 자세히 공부해본 적은 없었습니다. 이것 말고도 공부해야 할 것들이 많았는데 try, catch는 우선순위에서 밀려났기 때문이죠. 근데 이번 react 프로젝트에서도 try catch문을 거의 모든 로직에 사용할 것 같다는 생각이 들면서 이번엔 제대로 공부해야겠다는 결심을 하게 됐습니다. 그래서 커스텀 훅을 만들다가 멈추고 try, catch에 대해 알아보려 합니다.

예외 처리의 필요성

개발을 하다보면 예상하지 못한 버그들이 많이 발생하곤 하는데, 특히 JS는 유동적인 언어라 버그지만 에러가 발생하지 않거나 어디에서 구체적으로 발생한 것인지 알기 어려울 때가 많습니다. 이럴 때 예외 처리 구문을 활용하면 에러 내용, 에러 발생 위치를 알 수 있어 버그를 잡기 쉽습니다.

예외 처리 방식

프로그래밍에서 예외를 처리하는 방법에는 여러 가지 있습니다. 대표적으로 사용하는 방법이 바로 If조건문과 try, catch, finally입니다. 전자는 일반적인 예외 처리 방법이라면, 후자는 고급 예외 처리에 속한다고 합니다.

Throw

"try, catch, finally"를 알아보기 전에 throw에 대해서도 간단히 알아보겠습니다.

앞서 말씀드렸다시피 JS는 굉장히 유동적이어서 다른 언어였으면 에러가 발생했을 것도 에러없이 그냥 넘어가는 경우가 있습니다. 예를 들면, 함수 표현식에서 파라미터 개수보다 더 많은 인수를 전달해도 에러가 발생하지 않습니다. 이럴 때, 정해진 파라미터 개수에 맞춰 인수를 전달하고 싶다면 조건을 걸고, 조건을 지키지 않았을 때 고의적으로 에러를 발생시키게 하면 되겠죠.

이처럼 고의적으로 예외를 발생시켜 예외를 처리하도록 돕는 키워드에 Throw가 있습니다.

function sum(a, b) {
	// 만약 전달인자가 유효하지 않으면 예외를 발생시킨다!!!
	if (a !== number || b !== number) {
		throw new Error('a와 b는 모두 숫자여야 합니다.')
	}
  
	return a + b
}

자 그럼 이제 이 에러가 발생했을 때 프로그램이 어떤 행동을 취해야 하는지에 관한 '예외 처리'방법을 알아보도록 하겠습니다.

Try/Catch/Finally

Try는 프로그램이 일반적으로 실행될 코드 블록을 정의하는 역할을 합니다. 그리고 catch는 try 블록 안에서 예외가 발생할 때 해당 예외를 '잡아내는' 역할을 합니다. 마지막으로 finally는 try 블록과 관계 없이 항상 실행이 보장되어야 하는 코드를 실행하는 역할을 합니다.

여기서 Try는 필수, catch나 finally는 생략 가능하지만, 둘 중 하나와 반드시 같이 사용되어야 합니다. Try 구문을 사용하는 목적을 고려하면 당연히 그래야겠죠?

Try, catch, finally를 작성하는 기본 형식은 다음과 같습니다.

try {
	//일반적으로 실행되는 코드
  	// 예외가 발생할 수도 있고, 아닐 수도 있다.
} catch(error) {
	// try 블록에서 예외가 발생할 경우 실행
  	// 지역 변수 error (e 여도 되고)를 사용해서 예외를 처리한다.
    // 필요에 따라 또 다른 예외를 발생시키거나, 예외를 무시하기도 한다.
} finally {
	// try 블록이 종료되면 실행되는 부분
    // try 블록과 관계없이 무조건 실행된다.
}
function sum(a, b) {
  try {
  		if (a !== number || b !== number) {
			throw new Error('a와 b는 모두 숫자여야 합니다.')
		}
  
		return a + b
    
  } catch(error){
  		console.log('함수 sum', error);
  } finally{
  		console.log('함수 동작 완료')
  }

}

console.log(sum(5, 3)) // 8, '함수 동작 완료'
console.log(sum('5', 3))
// 함수 sum에서 에러 발생: Error: 'a와 b는 모두 숫자여야 합니다.'
// '함수 동작 완료'
profile
Done is better than perfect🏃‍♀️

0개의 댓글