❮ JS Type Conversion JS Error Handling ❯

JavaScript Errors

JavaScript has several built-in error types that are thrown when different kinds of runtime mistakes occur. Understanding these error types helps you diagnose and fix problems faster.

The Error Object

All errors in JavaScript are objects. The base Error object has three important properties: name (the type of error), message (a human-readable description), and stack (a trace of where the error occurred).

Error Object Properties

try {
  throw new Error('Something went wrong');
} catch (e) {
  console.log(e.name);    // 'Error'
  console.log(e.message); // 'Something went wrong'
  console.log(typeof e.stack); // 'string'
}

// Error with no message
const err = new Error();
console.log(err.message); // ''
console.log(err.name);    // 'Error'

Property	Description
name	The name/type of the error (e.g., 'TypeError', 'RangeError')
message	A human-readable description of what went wrong
stack	A string showing the call stack at the point the error was created

SyntaxError

A SyntaxError is thrown when the JavaScript engine encounters code that does not conform to the language syntax. These are parsing errors that prevent the code from running at all.

SyntaxError Examples

// SyntaxErrors are caught at parse time, so they can't be
// caught with try/catch in the same script.
// But eval() lets us demonstrate:

try {
  eval('if (true {');
} catch (e) {
  console.log(e.name);    // 'SyntaxError'
  console.log(e.message); // 'Unexpected token {'
}

try {
  eval('const = 5;');
} catch (e) {
  console.log(e.name);    // 'SyntaxError'
  console.log(e.message); // 'Unexpected token ='
}

// JSON.parse also throws SyntaxError
try {
  JSON.parse('{invalid}');
} catch (e) {
  console.log(e.name); // 'SyntaxError'
}

TypeError

A TypeError is thrown when a value is not of the expected type. This commonly occurs when calling a non-function, accessing properties of null/undefined, or using an operator on an incompatible type.

TypeError Examples

// Calling a non-function
try {
  const x = 5;
  x();
} catch (e) {
  console.log(e.name);    // 'TypeError'
  console.log(e.message); // 'x is not a function'
}

// Accessing property of null
try {
  const obj = null;
  obj.property;
} catch (e) {
  console.log(e.name);    // 'TypeError'
  console.log(e.message); // Cannot read properties of null
}

// Accessing property of undefined
try {
  let val;
  val.toString();
} catch (e) {
  console.log(e.name); // 'TypeError'
}

ReferenceError

A ReferenceError is thrown when trying to access a variable that has not been declared or is not in scope.

ReferenceError Examples

// Using an undeclared variable
try {
  console.log(nonExistentVar);
} catch (e) {
  console.log(e.name);    // 'ReferenceError'
  console.log(e.message); // 'nonExistentVar is not defined'
}

// Accessing let/const before declaration (temporal dead zone)
try {
  console.log(myVar);
  let myVar = 10;
} catch (e) {
  console.log(e.name); // 'ReferenceError'
  console.log(e.message); // Cannot access 'myVar' before initialization
}

RangeError and URIError

A RangeError occurs when a value is outside the allowed range. A URIError occurs when URI encoding/decoding functions are used incorrectly.

RangeError and URIError

// RangeError - invalid array length
try {
  const arr = new Array(-1);
} catch (e) {
  console.log(e.name);    // 'RangeError'
  console.log(e.message); // 'Invalid array length'
}

// RangeError - recursion depth
try {
  function infinite() { return infinite(); }
  infinite();
} catch (e) {
  console.log(e.name); // 'RangeError'
  console.log(e.message); // 'Maximum call stack size exceeded'
}

// RangeError - toFixed range
try {
  (1.5).toFixed(200);
} catch (e) {
  console.log(e.name); // 'RangeError'
}

// URIError - malformed URI
try {
  decodeURIComponent('%');
} catch (e) {
  console.log(e.name);    // 'URIError'
  console.log(e.message); // 'URI malformed'
}

📝 Note: All built-in error types (TypeError, RangeError, ReferenceError, SyntaxError, URIError) inherit from the base Error object. They all have name, message, and stack properties.

Error Type	Common Cause
SyntaxError	Invalid syntax, bad JSON, missing brackets
TypeError	Calling non-function, accessing null/undefined property
ReferenceError	Using undeclared variable, temporal dead zone
RangeError	Invalid array length, stack overflow, invalid argument
URIError	Malformed URI in encodeURI/decodeURI
EvalError	Legacy: errors in eval() (rarely used today)

Exercise:

Which error type is thrown when you try to access a property of null?

ReferenceErrorSyntaxErrorTypeErrorRangeError

❮ JS Type Conversion JS Error Handling ❯