[JS] Error

에러 메세지를 보고 무엇이 문제인지 빠르게 알아채기 위해 자바스크립트로 개발하다보면 자주 만나는 에러들을 알아보았다.

에러 메세지들은 모두 chrome 브라우저 콘솔을 기반으로 작성하였습니다.

TypeError

TypeError 객체는 일반적으로 값이 기대하던 자료형이 아니라서 연산을 할 수 없을 때 발생하는 오류입니다.
TypeError는 주로 다음과 같은 상황에 발생합니다.

• 함수에 전달된 피연산자 또는 인수가 해당 연산자나 함수가 예상하는 타입과 호환되지 않을 때
• 변경할 수 없는 값을 수정하려고 할 때
• 부적절한 방법으로 값을 사용하려고 할 때

함수에 전달된 피연산자 또는 인수가 해당 연산자나 함수가 예상하는 타입과 호환되지 않을 때

const num = '2';
console.log(num.toFixed(2));
// Uncaught TypeError: num.toFixed is not a function

Number.prototype.isFixed 메서드는 숫자 객체에서 호출해야 한다. 숫자 객체가 아닌 객체에서 해당 메서드를 호출하면 TypeError가 발생한다.

변경할 수 없는 값을 수정하려고 할 때

const constant = 100;
constant = 101;
// Uncaught TypeError: Assignment to constant variable.

const 변수에 값을 재할당하는 경우 TypeError가 발생한다. 이러한 문제는 ESLint를 사용한다면 빨리 발견할 수 있고 에러 메세지를 만나지 않는 경우가 많다.

부적절한 방법으로 값을 사용

const obj = null;
console.log(obj.name);
// Uncaught TypeError: cannot read property ‘name’ of null

obj.name = 'yeo';
// Uncaught TypeError: Cannot set properties of null

let obj2;
console.log(obj2.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

자주 만나게 되는 에러 메세지다. 해당 메세지를 만나면 내가 객체라고 기대했던 식별자가 null이나 undefined가 아닌지 확인한다.

RangeError

RangeError 객체는 어떤 값이 집합에 없거나 허용되는 범위가 아닐 때 오류를 나타냅니다.

• Array 생성자를 통해 잘못된 길이의 배열을 만드려고 시도할 때
• 숫자 메서드에 나쁜 값을 전달하는 경우.

Array 생성자를 통해 잘못된 길이의 배열을 만드려고 시도

const arr = new Array(-1);
// Uncaught RangeError: Invalid array length

숫자 메서드에 적절하지 않은 값을 전달한 경우

const num = 2;

console.log(num.toFixed(201));
// Uncaught RangeError: toFixed() digits argument must be between 0 and 100

Number.prototype.isFixed 메서드는 0 ~ 100 사이의 값을 인수로 전달받는다. 해당 범위 밖의 값을 인수로 전달하면 RangeError가 발생한다.

ReferenceError

ReferenceError 객체는 존재하지 않는 변수를 참조했을 때 발생하는 에러를 나타냅니다.

존재하지 않는 변수 참조

console.log(notDeclared);

notDeclared.name = 'yet';
// Uncaught ReferenceError: notDeclared is not defined

🚨 자바스크립트는 변수 호이스팅이 일어나기 때문에 Reference Error를 발생할 것이라 기대한 상황에서 발생하지 않을 수 있습니다.

notDecalred = 10;
console.log(notDeclared); // 10

엄격 모드를 사용한다면 해당 코드는 Reference Error가 발생합니다.

'use strict';

notDecalred = 10;
console.log(notDeclared);
// ReferenceError: notDeclared is not defined

SyntaxError

SyntaxError 객체는 문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류를 의미합니다. Javascript 엔진이 코드를 구문 분석할 때 언어의 구문에 맞지 않는 토큰이나 토큰 순서를 만나면 이 오류를 던집니다.

const syntax = 'error';

console.log(syntax;
// SyntaxError: missing ) after argument list