📖 정의
코드 실행 중에 예기치 못한 에러가 발생했을 때, 코드의 실행 흐름을 복구할 수 있는 기능
⏳ 오류의 종류
1️⃣ 코드가 실행조차 되지 않는 오류
프로그램 실행 전에 발생하는 오류를 구문 오류(syntax error)라고 부름.
2️⃣ 코드 실행 중간에 발생하는 오류
프로그램 실행 중에 발생하는 오류를 예외(exception) 또는 런타임 오류(runtime error)라고 부름.
📚 예외 처리
1️⃣ 기본 예외처리
조건문을 사용
예제
<body>
</body>
<script>
const h1 = document.querySelector('h1')
h1.textContent = '안녕하세요.'
</script>body에 h1 태그가 없는 상태이기 때문에 예외가 생길 것이다.
<body>
</body>
<script>
const h1 = document.querySelector('h1')
// h1이 존재하면 true로 변환되고, 존재하지 않으면 false로 변환된다.
if(h1) {
h1.textContent = '안녕하세요.'
} else {
console.log('h1 태그를 추출할 수 없습니다.')
}
</script>조건문을 넣어줘서 예외 처리를 해준다.
2️⃣ try catch finally
예제
try {
// 예외가 발생할 가능성이 있는 코드
} catch (e) {
// try 에서 에러 발생할 경우 실행되는 구문
} finally {
// 어떠한 상황에서도 실행
}
✍🏻 동작방식
1. 먼저, try {...} 안의 코드가 실행됩니다.
2. 에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜁니다.
3. 에러가 있다면, try 안 코드의 실행이 중단되고, catch(err) 블록으로 제어 흐름이 넘어갑니다. 변수 err(아무 이름이나 사용 가능)는 무슨 일이 일어났는지에 대한 설명이 담긴 에러 객체를 포함합니다.
💡 특징 1
try..catch는 오직 런타임 에러에만 동작합니다.
try..catch는 실행 가능한(runnable) 코드에만 동작합니다. 실행 가능한 코드는 유효한 자바스크립트 코드를 의미합니다. 중괄호 짝이 안 맞는 것처럼 코드가 문법적으로 잘못된 경우엔 try..catch가 동작하지 않습니다
try {
{{{{{{{{{{{{
} catch(e) {
alert("유효하지 않은 코드이기 때문에, 자바스크립트 엔진은 이 코드를 이해할 수 없습니다.");
}자바스크립트 엔진은 코드를 읽고 난 후 코드를 실행합니다. 코드를 읽는 중에 발생하는 에러는 'parse-time 에러’라고 부르는데, 엔진은 이 코드를 이해할 수 없기 때문에 parse-time 에러는 코드 안에서 복구가 불가능합니다.
try..catch는 유효한 코드에서 발생하는 에러만 처리할 수 있습니다. 이런 에러를 ‘런타임 에러(runtime error)’ 혹은 '예외(exception)'라고 부릅니다.
💡 특징 2
try..catch는 동기적으로 동작합니다.
setTimeout처럼 ‘스케줄 된(scheduled)’ 코드에서 발생한 예외는 try..catch에서 잡아낼 수 없습니다.
try {
setTimeout(function() {
noSuchVariable; // 스크립트는 여기서 죽습니다.
}, 1000);
} catch (e) {
alert( "작동 멈춤" );
}setTimeout에 넘겨진 익명 함수는 엔진이 try..catch를 떠난 다음에서야 실행되기 때문입니다.
스케줄 된 함수 내부의 예외를 잡으려면, try..catch를 반드시 함수 내부에 구현해야 합니다.
setTimeout(function() {
try {
noSuchVariable; // 이제 try..catch에서 에러를 핸들링 할 수 있습니다!
} catch {
alert( "에러를 잡았습니다!" );
}
}, 1000);
3️⃣ throw (직접 에러를 만들어서 던짐)
throw 연산자는 에러를 생성합니다.
문법
// 단순하게 예외를 발생
throw 문자열
// 조금 더 자세하게 예외를 발생시킴
throw new Error(문자열)예제
함수 내부에는 0으로 나눌 때 '0으로는 나눌 수 없습니다.'라는 오류를 발생하도록 작성
const divide = (a, b) => {
if (b === 0) {
throw `0으로는 나눌 수 없습니다.`;
}
return a / b;
};
console.log(divide(10, 2));
console.log(divide(10, 0));결과
5
0으로는 나눌 수 없습니다.
예제 2
const test = (object) => {
console.log(object.a + object.b);
};
test({});일반적인 프로그래밍 언어라면
- object 객체에 a 속성과 b 속성이 없으므로 예외를 발생할 것이고
- 존재하지 않는 것을 더하므로 object.a + object.b를 할 때도 예외를 발생한다.
그러면 사용자는 잘못 사용했다는 것을 인지하고 수정할 수 있다.
하지만 자바스크립트는
- object.a가 undefined로 나오고, object.b도 undefined로 나온다.
- 여기에서 undefined + undefined를 하면 NaN이 나온다.
즉 아무 오류 없이 코드가 정상적으로 실행된다.
이처럼 자바스크립트는 undefined와 NaN이라는 값이 있어서 다른 프로그래밍 언어에 비해서 예외를 많이 발생하지는 않는다. 그렇기 때문에 사용자에게 함수를 잘못 사용했다는 것을 강제로라도 인지시켜줄 필요가 있다.
안전한 코드
const test = (object) => {
if (object.a !== undefined && object.b !== undefined) {
console.log(object.a + object.b);
} else {
throw new Error("a 속성과 b 속성을 지정하지 않았다.");
}
};
test({});결과
Error: a 속성과 b 속성을 지정하지 않았다.
'JavaScript' 카테고리의 다른 글
| [JS] 2진수, 10진수, 8진수, 16진수 변환하기 (0) | 2022.06.15 |
|---|---|
| [JS] 클로저(closure) (0) | 2022.06.13 |
| [JS] 자료 다루기(객체, 배열) (1) | 2022.06.05 |
| [JS] 정규표현식(Regex) (3) | 2022.05.10 |
