예외 처리, 예외처리 활용하기

✅ 오류 처리: 외부 요인이나 구현 문제로 프로그램을 실행하는 도중에 예상하지 못한 결과가 발생할 수 있다 이런 경우에는 프로그램에서 발생한 오류를 정상으로 처리하고 다음 코드를 실행할 수 있어야 한다  

➡️ 오류 처리를 올바르게 하지 않으면 프로그램 전체가 동작하지 않는다

➡️ 오류 처리를 하고 나면 프로그램의 특정 부분(루틴)만 동작하지 않고 이후 코드는 정상으로 동작하도록 할 수 있다

 

자바스크립트에서는 throw 명령으로 오류를 발생시키고, 

try catch 구문을 이용해서 해당 오류를 받아서 처리한 다음 이후 코드가 실행되도록 할 수 있다

 

오류 처리는 try, catch, finally로 구성됨

try {
}
catch(e) {
}
finally {
}

✅ try 블록 안에는 원래 작성하고싶었던 정상으로 동작할 때 실행할 코드를 작성한다

➡️ 여기서 callback() 함수는 setTimeout() 함수를 호출하기 위해 정의한 함수일 뿐 다른 곳에서는 전혀 사용하지 않는다

✔️ 이런 경우에는 이 함수를 인자로 적을 수 있다

setTimeout{
	function callback() {
    	console.log("timeout");
        }, 3000);

 

▶️ 이 함수 역시 setTimeout() 함수에서만 사용하는 일회성 함수이므로 다음과 같이 이름을 생략할 수 있다

setTimeout{
	function() {
    	console.log("timeout");
        }, 3000);

 

✔️ 일반적으로 함수를 정의할 때 다른 함수와 이름이 겹치지 않도록 신경 써야 함

 

try {
console.log("try - 1"); // try 블록 시작
console.log("try - 2"); // try 블록 끝
    }

 

✅ catch 구문은 try 구문 안에서 오류가 발생했을 때 catch 구문에서 실행할 코드, 여기서는 잡았다는 메시지를 출력하고 넘겨 받는 오류 객체를 출력하도록 작성하였음

catch(e) {
	console.log("catch error : ", e);
    }

  

✅ finally 블록 안에는 try 구문이 정상으로 실행되거나 try 구문 실행 도중 오류가 발생해서 catch 블록이 실행되었을 때 실행할 코드를 작성한다.

즉, 항상 마지막에 실행될 코드이다

finally {
	console.log("finally - this code will always be executed");
    }

 

✅try 구문 안에 있는 구문이 정상으로 실행되면서 try - 1과 try - 2 메시지가 정상으로 출력된다

또한 try 구문이 모두 실행되고 나서 finally 구문이 실행된 것을 알 수 있다

 

✔️ 실행 결과

try - 1
try - 2
finally - this code will always be executed

이 코드 안에서 어떠한 문제 때문에 더 이상 코드를 실행하지 않고 오류를 처리하고 싶다면 throw 명령으로 오류를 발생시킬 수 있다

 

✅ throw 명령은 return 명령과 비슷하며 catch 명령에 전달할 값을 하나 받는다. 오류를 구분할 수 있도록 고유 숫자를 적을 수도 있고 오류를 나타내는 문자를 적을 수도 있다

당연히 error 라고 적는 것보다는 상황에 따라서 이 오류가 왜 발생했는지 적어 주는 것이 좋다

 

try {
	console.log("try - 1");
   	 throw "error";
    	console.log("try - 2");
}

 

✔️ 실행 결과

try - 1		// 정상적으로 출력됨
// throw 구문을 만나면서 catch 구문으로 이동 한다
catch error : error  
finally - this code will always be executed

 

throw 구문을 만나면서 catch 구문으로 이동함

그래서 try - 2 메시지는 출력되지 않는다

 

catch 블록 안에서 catch error와 e를 출력하도록 했는데, e가 문자열 error인 이유는 throw 명령 뒤에 넘긴 문자열 "error"가 catch 블록 안에 e로 전달되었기 때문

catch 구문이 모두 실행되고 나면 finally 부분이 실행됨

 

try, catch, finally 구문에서 try 구문은 항상 있어야 한다 catch, finally 구문이 둘 다 없으면 Syntax error(문법 오류)가 발생함

 

✅예외 처리 활용하기

try catch 구문은 함수 호출한 다음 호출한 함수 안에서 발생하는 오류까지 잡을 수 있음

 

function errFunc() {
	throw "error"; // errFunc() 안에서 throw 구문을 만난다 throw 구문을 만나면 자바스크립트는 가장 가까운 catch 블록을 찾아간다
    // errFunc() 안에는 catch 블록이 없으므로 해당 함수가 호출된 곳, 즉 try 블록에서 다시 catch 구문을 찾는다
    console.log("this code will not be executed");
}

try {
	console.log("try - 1"); // try 구문에서 코드가 실행되다가 
    errFunc();	// 직접 오류를 발생시키지 않고 errFunc() 함수를 호출
    // errFunc 함수를 호출하고
    console.log("try - 2");
}

catch(e) { // errFunc() 함수가 호출된 try 구문 아래에 catch 구문이 있으므로
	console.log("catch error : ", e); // catch 구문으로 이동해서 코드가 실행된 것이다
}

finally { // 마찬가지로 finally 코드가 출력된다
	console.log("finally - this code will always be executed");
}

 

✔️ 실행 결과

try -  1
catch error : error
finally - this code will always be executed

 

🧩 try catch 구문을 복사해서 try catch 구문이 존재하는 func() 함수

 

function errFunc() {  
	throw "error"; // throw 명령을 만난다 가장 가까운 catch 블록을 찾아야 하는데 해당 함수에는 없으므로 errFunc() 
    //를 호출한 func() 함수로 나온다
    console.log("this code will not be executed");
}

function func() {
	try {
    	console.log("function - 1"); // function - 1 메시지가 출력됨
        errFunc(); // errFunc 안으로 들어가
        console.log("function - 2"); 
       }
      catch(e) {
      console.log("catch error in function : ", e); // func() 함수에서 catch 브록을 찾아서 코드가 실행된다
      }
      finally {
      		console.log("finally in function - this code will always be executed"); // finally 코드가 실행된 이후에는 오류가 처리되었으므로 더 이상 catch 블록을 찾지 않고 코드가 정상적으로 실행된다
      }
  }
  
 try {
 	console.log("try - 1"); // try - 1 메시지가 출력되고
    func(); // func() 함수를 호출하므로
    console.log("try - 2");// try - 2가 출력되고
    }
 catch(e) {
 	console.log("catch error : ", e);
 }
 
 finally {
 	console.log("finally - this code will always be executed");// finally 구문이 실행된다
}

 

✔️ 실행 결과

try - 1
function - 1
catch error in function : error
finally in function - this code will always be executed
try - 2
finally - this code will always be executed

 

▶️ func() 함수에서 catch 구문을 지우고 실행하면 어떤 결과가 나오는 지?

function errFunc() {  
	throw "error"; // throw 명령을 만난다 가장 가까운 catch 블록을 찾아야 하는데 해당 함수에는 없으므로 errFunc() 
    //를 호출한 func() 함수로 나온다
    console.log("this code will not be executed");
}

function func() {
	try {
    	console.log("function - 1"); // function - 1 메시지가 출력됨
        errFunc(); // errFunc 안으로 들어가
        console.log("function - 2"); 
       }
      finally {
      		console.log("finally in function - this code will always be executed"); // finally 코드가 실행된 이후에는 오류가 처리되었으므로 더 이상 catch 블록을 찾지 않고 코드가 정상적으로 실행된다
      }
  }
  
 try {
 	console.log("try - 1"); // try - 1 메시지가 출력되고
    func(); // func() 함수를 호출하므로
    console.log("try - 2");// try - 2가 출력되고
    }
 catch(e) {
 	console.log("catch error : ", e);
 }
 
 finally {
 	console.log("finally - this code will always be executed");// finally 구문이 실행된다
}

 

✔️ 실행결과

try - 1
function - 1
finally in function - this code will always be executed
catch error : error
finally - this code will always be executed

 

➡️ 우선 try - 1 메시지가 출력되고 func() 함수 안으로 들어가므로 function - 1 메시지가 출력됨

그리고 errFunc() 함수 호출 과정에서 오류가 발생함

이 때 errFunc() 함수 안에는 catch 블록이 없으므로 바깥으로 나온다

그런데 func() 함수의 try catch 구문에도 catch 블록이 없고 try와 finally 구문만 있음

다시 상위 함수로 catch 구문을 찾아가는데, 그 전에 finally 구문이 실행되고 다시 func() 바깥으로 빠져 나가서 catch 구문을 찾음

그러면 가장 바깥의 catch error 부분에서 오류가 처리되고 finally 코드가 다시 실행됨

따라서 이 때는 try - 2라는 메시지가 출력되지 않는다

 

 

✅ try, catch, finally 구문을 잘 활용하면 프로그램 내부에서 오류가 발생했을 때 그 오류를 받아서 프로그램의 진행에 문제가 생기지 않도록 finally 코드에서 처리할 수 있다

최종적으로 catch 구문을 이용해서 오류를 처리한다