Javascript Error 종류

1) Error

자바스크립트로 코드를 구현하다보면 간혹 상황에 따라 에러가 발생하는 경우가 있다.
이때, 자바스크립트에서 가장 많이 만나는 Error 종류는 총 7가지이며, 다음과 같다.

Javascript Error 종류

• SyntaxError : 문법에 맞지 않는 코드를 해석할때 발생
• ReferenceError : 초기화 되지 않은 변수를 참조타입으로 불러올때 발생
• RangeError : 허용된 범위를 벗어난 숫자를 사용했을때 발생
• TypeError : 피연산자 또는 인수의 데이터 타입이 유효하지 않을때 발생
• InternalError : Javascript 엔진 내부와 관련한 오류가 생겼을때 발생
• EvalError : 전역 eval() 함수에 관한 오류가 생겼을때 발생
• URIError : encodeURI 또는 decodeURI 함수에 부적절한 인수를 전달했을 때 발생

2) SyntaxError

• SyntaxError는 문법적으로 잘못된 코드를 해석하려고 시도할 때 발생하는 오류이다.
  (즉, 코드에 오타가 났거나, 쉼표, 따옴표, 괄호 같은 기호 사용에 실수가 있을때 나타나는 에러를 말하는 것이다.)

SyntaxError Code)

function testError(name){
    if(name === "error"){
        return "error 라는 이름과 같습니다."
    } else {
        return "error 라는 이름과 다릅니다"
    }
}
const output = testError("error);
console.log(output); // SyntaxError 발생

결과 창)

/Users/mac/Desktop/Wecode_50th/html_css_exercise_50/main.js:8
const output = testError("error);
                         ^^^^^^^^

SyntaxError: Invalid or unexpected token

다음과 같이 코드에 인자 값을 받아서 반환해주는 코드를 작성했지만,
"error 라는 문자열 끝에 따옴표 하나가 없어서 생기는 구문 오류임을 확인할수 있다.
이때, 문자열에 따옴표를 넣어주면 해당 구문오류는 해결된다.

3) ReferenceError

• ReferenceError는 초기화 되지않은 변수를 참조타입으로 불러올 때 발생하는 오류이다.

ReferenceError Code

function testError02(name){
    if(name === "error"){
        return "error 라는 이름과 같습니다."
    } else {
        return "error 라는 이름과 다릅니다"
    }
}
const output = testError02(error);
console.log(output); // ReferenceError

결과 창)

/Users/mac/Desktop/Wecode_50th/html_css_exercise_50/main.js:8
const output = testError(error);
                         ^

ReferenceError: error is not defined

• 다음과 같이 해당 코드의 인자(name)에 문자열 타입으로 참조되지 않은 값을 넣어서,
  생기는 구문 오류임을 확인할수 있다.
  (해결방법은 인자 값을 문자열 타입으로 넣어서 실행하면 해결할 수 있다.)

4) RangeError

• RangeError는 허용되는 범위를 넘어서 값을 인수로 전달하려고 할때 발생하는 오류이다.
  (즉, 허용되는 범위를 벗어난 숫자와 데이터 값을 사용한 경우에 발생함)

RangeError Code

function check(n) {
    if (!(n >= -500 && n <= 500)) {
      throw new RangeError("The argument must be between -500 and 500.");
    }
  }
  try {
    check(2000);
  } catch (error) {
    if (error instanceof RangeError) {
      // Handle the error
    }
  }
const output = check(1000);
console.log(output); // RangeError

결과 창)

/Users/mac/Desktop/Wecode_50th/html_css_exercise_50/main.js:13
      throw new RangeError("The argument must be between -500 and 500.");
      ^

RangeError: The argument must be between -500 and 500.

• 해당 코드에 n 이라는 매개변수에 1000 이라는 값을 인수(인자)로 전해줬지만 조건식에 -500 ~ 500 사이까지의 범위를 초과해서 인수로 전해주려고 했기 때문에 생긴 오류임을 확인할수 있다.
  (해결방법은 -500 ~ 500까지의 범위안에 있는 숫자형 타입의 인수로 전해주면 해결할수 있다.)

5) TypeError

• TypeError는 변수나 인자가 참조하고 있는 인스턴스 값을 잘못 사용할때 발생하는 오류이다.

TypeError Code

function greating(){
    let a = 5;
    let b = 1;
    console.log(a,b); // 5,1
    b(); // TypeError
}
greating();

결과 창)

/Users/mac/Desktop/Wecode_50th/html_css_exercise_50/main.js:20
    b();
    ^

TypeError: b is not a function

• 즉, greating 함수안에 있는 변수 b를 함수처럼 사용하려 했기 때문에 생긴 오류임을 확인할수 있다.

해결방법

• b 변수를 사용하지 않고 외부로 b 함수를 새로 만들어 사용한다.
• b 변수를 사용한다면 greating 함수에 있는 b 함수를 제거해야 한다.

Javascript 오류는 주로, Syntax, Reterence, Type, Range Error가 중점적으로 많이 발생하므로 Javascript 에러와 관련한 공식문서는 MDN을 참조할것!