자바스크립에서의 예외 처리 1편 / 2편

코드종 유튜브 채널
#1

자바스크립트 try? catch? 이게 뭐야?

자바스크립트에서 예외처리(exception handling)에 대해서 알아보겠습니다. 그럼 예외(exception)은 무엇일까요? 예외가 무언지 알아보고 그 다음 이 예외를 다루는(처리하는) 방법에 대해 알아볼게요.

예외 : 일반적인 통례나 정해진 규칙에서 벗어남 (출처 : 다음 사전)

자바스크립트에서도 정해진 규칙을 벗어났을 경우 예외를 발생시킵니다. 문법, 참조방법등이 이 정해진 규칙에 해당합니다.

예외가 어떤 때 발생하는지 직접 살펴볼까요?

func(); // ReferenceError: undefined를 호출했을 때 
obj.myvalue; // ReferenceError: undefined의 속성에 접근 했을 때
func( ; // SyntaxError: 문법에 맞지 않게 코드작 작성되었을 때

내가 처리할수 없다고 얼렁 뚱땅 넘어가는 것이 아니라 내가 처리할 수 없으니 명확히 알리는 것이 예외를 발생시키는 행위. - codejong :slight_smile:

앞에서 설명한 예외는 자바스크립트가 내부적으로 발생 시키는 예외입니다. 또한 개발자가 직접 예외를 발생시키는 코드를 작성할 수도 있습니다. 이 때 사용하는 것이 바로 throw 명령어 입니다.

throw '나는 예외다!';

위 명령을 실행해보면 다음과 같이 에러가 납니다.

Uncaught xxx

위에 ReferenceError, SyntaxError 예외가 발생했을 때도 에러 메시지를 보면 앞에 Uncaught 라는 단어가 보일 겁니다. 아무도 잡지 않은 예외라는 겁니다. throw, catch 라는 단어에서 알수 있듯이 예외의 발생은 던지는 것이고 예외의 처리는 잡는 것입니다. 왜 던지는 것이고 왜 잡는다라는 표현을 썼을까요?

자바스크립트에서 예외가 발생하면 어떤일이 벌어지는를 살펴보면 "이래서 throw와 catch"라는 용어를 쓰는구나 하고 알수 있을 겁니다.

자바스크립트의 함수가 호출되면 콜스택에 해당 함수의 실행정보가 쌓이고 실행이 완료되면 콜스택에서 사라집니다. 콜스택에 대해서는 다른 영상에서도 설명한 적 있는데요 오른쪽 위 링크를 클릭하시면 확인 가능합니다.

호출 스택은 여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 자바스크립트 인터프리터같은)를 위한 메커니즘입니다. 현재 어떤 함수가 동작하고있는 지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는 지 등을 제어합니다. - 출처 : MDN

그럼 함수가 연속적으로 호출되는 상황을 만들어 볼게요.

function f2(){
	console.log('f2 start');
	consoel.log('f2 end');
}
function f1(){
  console.log('f1 start');
  f2();
	consoel.log('f1 end');
}
console.log('befre run - first');
f1();
console.log('after run - first');

예외 발생하면 콜스텍은 catch 되기 전까지 파괴됩니다. 예외는 폭탄 같은 애죠~ "뭐야~이거 나도 모르니까 네가 처리해"하고 던지는 거죠. 그러다가 누군가 처리(catch)하면 그 이후에는 정상적으로 코드가 동작합니다.

function f2(){
	console.log('f2 start');
	consoel.log('f2 end');
}
function f1(){
  console.log('f1 start');
  throw 'bomb'; // <----- 예외 발생 추가
  f2();
	consoel.log('f1 end');
}
console.log('befre run - first');
f1();
console.log('after run - first');

// 실행 시 콘솔 결과
befre run - first
f1 start
Uncaught bomb

이 경우를 보자면 f1이 실행되면 'f1 start’라고 로그를 찍고 바로 예외가 발생합니다. 따라서 f1의 그 다음 코드들이 실행되지 않습니다. f1코드 뿐만 아니라 f1을 호출한 after run 로그 코드도 실행되지 않습니다. 왜냐면 콜스택의 함수가 폭파하게 되는 겁니다. 콜스택에서는 각 함수가 어디까지 실행했고 해당 함수에서 다른 함수를 호출하면 어디까지 실행했는지 기억하고 새롭게 호출한 함수가 콜스택에 쌓입니다. 정확히 말하면 callsatck에 해당 함수의 실행 context가 쌓이는 겁니다.

function f2(){
	console.log('f2 start');
	throw 'bomb'; // <----- 예외 발생 추가
	consoel.log('f2 end');
}
function f1(){
  console.log('f1 start');
  f2();
	consoel.log('f1 end');
}
console.log('befre run - first');
f1();
console.log('after run - first');

throw를 f2로 올리면 이런 결과가 나옵니다.

// 실행 시 콘솔 결과
befre run - first
f1 start
f2 start
Uncaught bomb

try catch 구문은 무엇이나 try안에서 예외가 발생하면 내가 잡을께 입니다. 따라서 발생한 예외를 catch에서 잡은 것이기 때문에 콜스택은 폭파하지 않고 원래 정해진 순서대로 실행하게 됩니다.

지금까지는 함수가 동기적으로 실행될 때에 대한 예외처리에 대해 알아봤습니다. 비동기를 다루는 promise와 async/await의 예외 처리는 자바스크립트 예외처리 시리즈 3편과 4편에서 다룹니다.

좋아요 1