[Javascript 강의]19강 에러 처리

에러 처리

 

에러 처리의 필요성

에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. 따라서 에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.

예제1) 에러 처리를 하지 않는 경우
console.log('[Start]');
foo(); //ReferenceError: foo is not defined

console.log('[End]'); //에러에 의해 프로그램이 종료되어 코드가 실행되지 않는다.

예제2) try...catch문을 사용해 에러 처리를 하면 계속해서 코드를 실행시킬 수 있다.
console.log('[Start]');

try{
  foo();
}catch(error){
  console.error('[에러발생]',error); //[에러발생] ReferenceError: foo is not defined
}

console.log('[End]'); //프로그램이 실행된다.

 

예제1) 에러 발생
// DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null 반환
const $button = document.querySelector('button'); //null
$button.classList.add('disabled'); //TypeError: Cannot read property 'callList' of null

예제2) 에러 처리 (옵셔널 체이닝 연산자)
//querySelector 메서드의 반환값을 확인하거나 단축 평가 또는 옵셔널 체이닝 연산자 ?.를 사용해서 처리
const $button = document.querySelector('button'); //null
$button?.classList.add('disabled');

## 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 
그렇지 않으면 우항의 프로퍼티 참조를 이어갑니다.

 

try...catch...finally문

에러 처리를 하는 방법
1. try...catch...finally문 사용
2. if문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법
3. 에러 처리 코드를 미리 등록해 두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법

try{
  // 실행할 코드(에러가 발생할 가능성이 있는 코드)
}catch(err) {
  // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다.
  // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다.
}finally{
  // 에러 발생과 상관없이 반드시 한 번 실행된다.
}

 

 Error 객체

Error 생성자 함수는 에러 객체를 생성한다.  Error 생성자 함수에는 에러를 상세히 설명하는 에러 메시지를 인수로 전달할 수 있다.

const error = new Error('invalid');

#자바 스크립트는 Error 생성자 함수를 포함해 7가지의 에러 객체를 생성할 수 있는 Error 생성자 함수를
제공한다.

Error: 일반적 에러 객체
SyntaxError: 자바스크립트 문법에 맞지 않는 문을 해석할 때 발생하는 에러 객체
ReferenceError: 참조할 수 없는 식별자를 참조했을 때 발생하는 에러 객체
TypeError: 피연산자 또는 인수의 데이터 타입이 유효하지 않을 때 발생하는 에러 객체
RangeError: 숫자값의 허용 범위를 벗어났을 때 발생하는 에러 객체
URIError: encodeURI 또는 decodeURI 함수에 부적절한 인수를 전달했을 때 발생하는 여러 객체
EvalError: eval 함수에서 발생하는 에러 객체

1 @ 1; //SyntaxError: Invalid or unexpected token
foo(); //ReferenceError: foo is not defined
null.foo; //TypeError: Cannot read property 'foo' or null
new Array(-1); //RangeError: Invalid array length
decodeURIComponent('%'); //URIError: URI malformed

 

throw 문

Error 생성자 함수로 에러 객체를 생성한다고 에러가 발생하는 것은 아니다. 즉, 에러 객체 생성과 에러 발생은 의미가 다르다.

예제1)에러 객체를 생성한다고 에러가 발생하는 것은 아니다
try{
  new Error('something wrong');
}catch(error){
  console.log(error);
}

예제2)에러 객체를 던지면 catch 코드 블록이 실행되기 시작한다.
try{
 throw new Error('something wrong');
}catch(error){
 console.log(error);
}

 

에러의 전파

에러는 호출자 방향으로 전파된다. 즉, 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파된다.

const foo = () => {
  throw Error('foo에서 발생한 에러');
};

const bar  = () => {
  foo();
};

const baz  = () => {
  bar();
};

try{
 baz();
}catch(err){
  console.error(err);
}

baz 함수를 호출하면 bar 함수가 호출되고 foo함수가 호출되고 foo 함수에서 에러를 throw한다. 이때 foo 함수가 throw한 에러는 다음과 같이 호출자에게 전파되어 전역에서 캐치된다. 이처럼 throw된 에러를 캐지하지 않으면 호출자 방향으로 전파된다. 이때 throw된 에러를 캐치하여 적절히 대응하면 프로그램을 강제 종료시키지 않고 코드의 실행 흐름을 복구할 수 있다.  throw된 에러를 어디에서도 캐지하지 않으면 프로그램은 강제 종료된다.

주의할 것은 비동기 함수인 setTimeout이나 프로미스 후속 처리 메서드의 콜백 함수는 호출자가 없다는 것이다. 콜백함수는 태스크 큐나 마이크로태스크 큐에 일시 저장되었다가 콜 스택이 비면 이벤트 루프에 의해 콜 스택으로 푸시되어 실행된다. 이때 콜 스택에 푸시된 콜백 함수의 실행 컨텍스트는 콜 스택의 가장 하부에 존재하게 된다. 따라서 에러를 전파할 호출자가 존재하지 않는다.