[Javascript] 구문 오류 및 예외 처리

구문오류 (Syntax error)

• 프로그램 실행 전에 발생하는 오류
• 괄호, 문자열 기재 누락으로 인한 오류 

---

예외 / 런타임 오류

• 오타 등으로 인해 코드 실행 중간에 발생하는 오류
• 자바스크립트에서 구문 오류 이외의 모든 오류는 예외로 분리(Type Error, Reference Error, Range Error)

---

예외 처리

기본 예외 처리

: 조건문을 사용하여 에러가 발생하지 않게 만드는 것

document.addEventListener('DOMContentLoaded', () => {
		const h1 = document.querySelector('h1')
		if (h1) {
			h1.textContext = 'hi'
		} else { // 기본 예외 처리
			return 0
		}
	})

고급 예외 처리

: try catch finally 구문을 사용한 예외 처리 방법

 

try catch finally 기본 형태

• finally 구문은 옵셔널한 구문으로 예외 발생 여부와 상관없이 무조건 실행되어야할 코드를 입력
• try 문 내에 코드가 에러 발생한 경우 더 이상  코드가 실행되지 않고 catch문으로 넘어감

try {
	// 예외 발생 가능 코드
} catch(exception) {
	// 예외 발생 시 실행될 코드
} fanally { //  (필요한 경우에만 사용)
	// 무조건 실행되는 코드
}

---

 예외 객체

• 예외가 발생 할 떄 해당 정보를 확인 가능하도록 해줌
• try catch 구문 사용시 catch() 괄호안에 입력하는 식별자를 예외 객체라고 함
• 일반적으로 e 또는 exception으로 사용
• 브라우저에 따라 속성이 조금씩 다르며, 공통적인 예외 객체 속성은 name(예외이름), message(예외 메시지)

try {

 } catch(exception) {

 }

try {
  const arr = new Array(9999999999999999999); // 배열의 크기가 한정되어 있어 지나치게 크게 선언할 경우 발생하는 에러 생성
} catch (exception) {
  console.log(`exception : ${exception}`); // exception : RangeError: Invalid array length
  console.log(`name: ${exception.name}`); // 	name: RangeError
  console.log(`message: ${exception.message}`); // 	message: Invalid array length
}

 

---

강제 예외 발생

• 강제 예외 발생 시에는 throw 키워드 사용
• 강제로 예외를 발생시키는 이유는 선언한 함수를 의도와 다르게 사용하여 발생하는 오류를 대처하기 위함
• 자바스크립트의 유연성으로 인해 오류가 발생한 코드에 대해 강제로 인지할 필요가 있음

// [형식]
// 1. throw 형태1(단순형태)
throw 문자열

// 2. throw 형태2
throw new Error(문자열)

// 3. try cath
try {
	throw '에러 메시지' // 강제 에러 발생 시 catch문으로 넘어감
} catch {
}

 

// (예제 1)
throw '문자열' // Uncaught 문자열

throw new Error('문자열') // Uncaught Error: 문자열

// (예제 2)
function devide(a,b){
	if(b===0){
		throw '나누는 값이 0이 될 수 없음'
	}
	return a/b
}

devide(10,0) // ⇒ Uncaught 나누는 값이 0이 될 수 없음