자바스크립트로 안정적인 프로그램을 만들기 위해서는
에러를 다루는 방법을 알아두는 것이 중요하다.
자바스크립트에서 에러를 다루기 위해서는 먼저 에러 객체에 대한 이해가 필요한데
코드가 실행되는 도중에 에러가 발생하면 아래와 같이
자동으로 해당 에러에 대한 정보가 담긴 에러 객체를 생성한다.
콘솔창에 나와있는 것도 에러 객체의 정보를 가져온 것이며
메시지를 조금 더 살펴보자면
에러 메시지는 크게 에러 객체의 이름과 그 뒤에 구체적인 내용이 담긴 메시지로 나뉘어져 있다.
그래서 에러 객체는 공통적으로 에러 객체의 이름을 담고있는 "name" 프로퍼티와
구체적인 에러 내용을 담고 있는 "message" 프로퍼티가 존재하는데
일반적으로 자주 접하는 에러 객체는 크게 3가지 정도로 요약할 수 있다.
대표적인 에러 객체 3가지
첫 번째는 존재하지 않는 변수나 함수를 호출할 때 발생하며
일명 레퍼런스 에러 (ReferenceError) 라고 부른다.
// 에러 객체 (name, message)
//1. ReferenceError
console.log("Start");
const title = "섭이";
console.log(title);
console.log(myName);
console.log("End");
두 번째는 문자열이 담긴 변수를 함수처럼 사용하는 등
잘못된 방식으로 자료형을 다루려고 할 때 발생하며
일명 타입에러(TypeError) 라고 부른다.
//2.TypeError
console.log("Start");
const title2 = "섭이";
console.log(title());
console.log(myName);
console.log("End");
마지막 세 번째는 문법에 맞지않는 코드를 작성하면 발생하며
일명 신텍스에러(SyntaxError) 라고 부른다.
//3.SyntaxError
console.log("Start");
const ti-tle3 = "섭이";
console.log(title);
console.log(myName);
console.log("End");
위 두 가지의 에러와 마지막 신텍스에러의 차이가 보이는 것을 느낄 수 있을텐데
신텍스에러는 코드 자체에서 발생하는 부분이 있다면
아예 코드를 실행하기도 전에 에러를 발생 시킨다.
이외에도 특별한 경우에 만들어지는 다양한 에러 객체가 존재하며
또다른 에러 객체의 종류가 궁금하다면 아래 링크를 참고하자.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error
의도치 않게 발생하는 에러가 아닌
의도적으로 에러를 발생하는 방법이 있다.
에러 객체 생성하기
에러 객체의 이름과 내용이라는 형식을 맞추면
직접 에러 객체를 만들어 낼 수 있다. 예시를 살펴보면
// 에러 객체 만들기
console.log("Start");
const error = new TypeError("타입 에러 발생");
console.log(error.name);
console.log(error.message);
console.log("End");
앞쪽에 "new" 키워드를 붙이고
에러 객체의 이름을 함수처럼 호출 (TypeError)해서
아규먼트로 원하는 메시지를 전달해주면
새로운 에러 객체를 생성할 수 있다.
그런데 이건 그냥 에러 객체를 만든 것이지 에러를 발생시킨 것은 아니다.
그렇기 때문에 에러 객체를 활용해서 직접 에러를 발생시키는 방법을 알아야한다.
에러 발생 시키기 - throw
의도적으로 에러를 발생시키는 방법은 "throw" 키워드를 활용한다.
방법은 아래와 같이 throw 키워드 작성하고 에러 객체를 작성하면 된다.
// 에러 객체 만들기
console.log("Start");
const error = new TypeError("타입 에러 발생");
throw error;
console.log(error.name);
console.log(error.message);
console.log("End");
코드를 실행하면 작성한 에러 객체가 에러로 발생하고
에러가 발생한 시점 이후의 코드는 동작하지 않는 모습을 확인할 수 있다.
또한 이렇게 에러가 발생했을 때 코드가 동작하지 않는걸 방지하고
좀 더 에러를 자유자재로 다룰 수있는 "try catch" 문이 존재하는데
해당 문법은 다음 글에서 확인.
'JS' 카테고리의 다른 글
모던 자바스크립트 (15) ~ (23) 정리 (0) | 2024.12.09 |
---|---|
(23) Modern JavaScript - try...catch 문 (0) | 2024.12.09 |
(21) Modern JavaScript - 함수와 구조 분해 (Destructuring) (0) | 2024.12.05 |
(20) Modern JavaScript - 구조 분해 (Destructuring) (0) | 2024.12.04 |
(19) Modern JavaScript - 옵셔널 체이닝 (Optional Chaining) (0) | 2024.12.03 |