JavaScript - 예외 처리

예외 처리(Exception Handling)는 프로그램이 실행되는 동안 문제가 발생할 때 대처할 수 있게 처리하는 것을 의미한다. 예외(Exception)와 에러(Error)는 다른 것이다. 에러에 경우는 프로그래밍 언어의 문법적인 오류 예를 들면 괄호({[]})를 닫지 않았다거나 할 때 에러라고 부른다. 예외에 경우는 프로그램을 실행 중 발생하는 오류를 예외라고 한다.

예외(Exception) : 프로그램 실행 중 발생하는 오류
에러(Error) : 프로그래밍 언어의 문법적인 오류

이런 예외(Exception)를 처리하는 방법에는 두 가지가 있는데, 하나는 기본 예외 처리와 다른 하나는 고급 예외 처리의 두가지 방법이 있다.

기본 예외 처리

기본 예외 처리는 예외가 발생하지 않게 사전에 해결하는 것을 말한다.

funtion registerEventListener(node, event, listener){
if(node.addEventListener){
node.addEventListener(event, listener, false);
}
else if(node.attachEvent){
node.attachEvent('on'+event, listener);
}
}

function whenClick(e){
let event=window.event||e;
let willAlert='';

willAlert+='clientX : '+event.clientX+'\n';
willAlert+='clientY : '+event.clientY+'\n';

alert(willAlert);
}

지금은 인터넷 익스프롤러에서 엣지 브라우저로 바뀌는 추세라서 IE(인터넷 익스프롤러) 이벤트 모델을 사용하지 않지만 예시로 위의 코드는 인터넷 익스프롤러와 다른 웹 브라우저에서 사용할 때의 예외 처리를 사용한 것이다. 인터넷 익스프롤러에서는 addEventListener()를 사용할 수 없고 attachEvent()를 사용하기 때문에 오류가 발생할 수 있기 때문에 사전에 오류를 해결하는 코드이다.

고급 예외 처리

try catch 구문	try catch finally 구문
try{ <예외가 발생할 가능성이 있는 코드> } catch(exception){ <예외가 발생했을 때 처리할 코드> }	try{ <예외가 발생할 가능성이 있는 코드> } catch(exception){ <예외가 발생했을 때 처리할 코드> } finally{ <예외 여부에 상관없이 실행하는 코드> }

try 키워드, catch 키워드, finally 키워드로 예외를 처리하는 방법이다. try 구문 안에서 예외가 발생이되면 이것을 catch 구문에서 처리한다, finally 구문은 필수 사항은 아니고 예외 발생 여부와 상관없이 수행되어야 하는 작업이 있을 때 사용한다.

try{
willExcept.byeBye();
alert('try 구문 종료');
}
catch(exception){
alert('예외가 발생');
}
finally{
alert('예외 발생 가능 부분을 통과했다.');
}

try{
alert('try 구문');
abcd.run();
// 예외 발생
alert('try 구문 끝');
// 예외로 인해 실행 되지 않음
}
catch (exception) {
alert('예외 발생시 실행하는 구문');
}
finally {
alert('예외 여부 상관없이 실행하는 구문');
}

예외 객체

try catch 구문에서 catch의 괄호 안에 입력하는 식별자를 예외 객체 라고 한다. 일반적으로는 e 또는 exception 식별자를 사용한다. 예외 객체의 속성은 브라우저마다 다른데 공통적으로 사용하는 것은 아래의 3개가 있다.

속성 이름	설명
message	예외 메세지
description	예외 설명
name	예외 이름

자바스크립트는 배열의 크기가 4,294,967,295까지 가능하다. 따라서 아래의 코드를 실행하면 예외가 발생하게 된다.

try{
let array=new Array(9999999999);
}
catch{
let output='';
for(let i in exception){
output+=i+' : '+exception[i]+'\n';
}
alert(output);
}

자바스크립트는 다른 언어에 비해 예외 객체를 많이 사용하지 않는다.

예외 처리를 한다고 모든 문제를 해결할 수 있는 것은 아니다. 위에서 설명한 에러(Error)가 발생한 경우에는 예외 처리를 한다고 해도 에러가 발생한다.

예외 : try catch 구문으로 해결할 수 있는 것
에러 : try catch 구문으로 해결할 수 없는 것

예외와 에러의 차이점을 확실하게 알아야 한다.

예외를 강제로 발생시킨다는 의미는 실행중에 오류를 강제로 발생시킨다는 것이다. 이때는 throw 키워드를 사용한다. 예외를 강제로 발생시켜서 개발자나 사용자에게 주의를 줄 수 있고, 예외와 관련된 처리를 해달라고 부탁할 수도 있다.

개발자가 개발단계에서 미완성인 부분을 단순히 주석으로 처리하고 나중으로 미루고 그 미룬 부분을 잊어버리게 되면, 단순 주석처리된 부분은 예외가 나오지 않고 그대로 실행이 되어서 어디서부터 실수를 했는지 모를 수 있다. throw 키워드를 이용해서 그런 특정 부분에 강제로 예외가 발생이 되게 만든다면, 쉽게 예외가 발생한 부분을 찾을 수 있다.

function divide(alpha, beta){
if(beta == 0){
throw 'FivideByZeroException';
}
else{
return alpha/beta;
}
}

try{
divide(10, 0);
}
catch(e){
alert('CATCH');
}

위의 코드를 실행하면 divide() 함수를 실행할 때 예외가 발생하게 되므로 catch 구문이 실행이 된다. 자바스크립트로 웹 어플리케이션을 구현할 때 예외 처리 기능을 많이 사용하게 된다.

마지막으로 try catch finally 구문의 finally는 반드시 실행한다는 특성을 가지고 있다.

function test(){
try{
alert('A 위치');
}
catch(e){
alert('B 위치');
return;
}
alert('C 위치');
}

test();

function test(){
try{
alert('A 위치');
}
catch(e){
alert('B 위치');
return;
}
finally{
alert('C 위치');
}
}

test();

맨 아래의 test()를 호출하게되면, 왼쪽에 있는 코드는 try의 'A 위치'와 catch의 'B 위치'가 나오고 return으로 인해 함수를 빠져나오기 때문에 마지막의 'C 위치'는 실행이 되지 않는다. 반대로 오른쪽의 코드를 실행하면 왼쪽과 같이 'A 위치'와 'B 위치'가 실행이 되고 return으로 인해 함수에서 빠져나와 finally의 'C 위치' 역시 실행이 안될 것 같지만, finally에 있는 구문은 try와 catch에 관계없이 반드시 실행이 되는 구문이기 때문에 'A 위치', 'B 위치' 그리고 'C 위치'가 차례대로 실행이 된다.

예외 처리.html

0.00MB

외부 자바스크립트 파일

지금까지는 자바스크립트 코드를 전부 HTML 페이지 내부에 작성을 했는데, 이전에 CSS3에서 스타일 시트의 개념처럼 외부에서 스타일 시트를 만들고 HTML의 head태그 안에서 외부의 스타일 시트를 불러오는 것 처럼 자바스크립트 파일도 외부에서 불러오기가 가능하다.

<head>
<title>HTML Document</title>
<script src="연결한 자바스크립트 파일.js or 경로"></script>
</head>

외부의 자바스크립트를 사용할 때 주의할 점은, 웹 브라우저는 위에서 아래로 태그를 차례대로 실행을 하는데, 이 때 외부 자바스크립트 파일을 추가하기 전에는 외부 자바스크립트 파일에 있는 변수나 함수를 사용할 수 없다는 점이다. 따라서 외부 자바스크립트 파일의 변수나 함수 등을 사용하려면 다른 script들 보다 위에 위치 시켜서 웹 브라우저가 먼저 외부 자바스크립트 파일을 읽을 수 있게 해주어야 한다.

<head>
<title>HTML Document</title>
<link rel="stylesheet" href="외부 스타일시트">
<style>

</style>
<script src="외부 자바스크립트 파일"></script>
<script>

</script>
</head>

위와 같은 순서로 작성을 해주는 것이 일반적이다.

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

JavaScript - 우클릭 방지, 키보드의 특정 키 방지 (0)	2019.12.23
JavaScript - DOM Level 2 이벤트 모델 (0)	2019.12.20
JavaScript - 인라인 이벤트 모델, 디폴트 이벤트 제거, 이벤트 전달 (0)	2019.12.20
JavaScript - 이벤트 발생 객체와 이벤트 객체 / 이벤트 강제 실행 (0)	2019.12.19
JavaScript - 고전 이벤트 모델(기본 이벤트 모델) (0)	2019.12.19