Error Types in JS
_Khojiakbar_
Posted on June 19, 2024
# Most common error types in JS.
1. SyntaxError
What it is:
- This error occurs when there's a typo or syntax mistake in your code. It's like writing "gibberish" in a sentence.
Examples
Example 1: Missing Parenthesis
// function sayHello(){
// console.log('Hello World!'
// SyntaxError: missing ) after argument list
// }
Example 2: Unexpected Token
// a:
// let x = 5;
// let y = 5;
// let result = x * y *;
// Uncaught SyntaxError: Unexpected token ';'
// b:
// let dog = 'bark';
// let cat = 'meaw'
// console.log(dog + cat)!!!
// Uncaught SyntaxError: Unexpected token '!'
Example 3: Missing Comma
// let fruits = ['apple' 'banana', 'cherry']
// console.log(fruits)
// Uncaught SyntaxError: Unexpected string
Example 4: Improper Use of Keywords
// let return = 'Hello World'
// Uncaught SyntaxError: Unexpected token 'return'
Example 5: Unterminated String
// let word = 'Hello World !;
// console.log(word)
// Uncaught SyntaxError: Invalid or unexpected token
Summary
SyntaxError occurs when JavaScript encounters a code structure it doesn't recognize or expects something that isn't there. These errors often involve typos, missing characters, or improper use of reserved keywords. By understanding these common mistakes, you can avoid them and write cleaner, error-free code.
2. ReferenceError
What it is:
- This error happens when you try to use a variable that hasn't been declared.
- It's like calling out to someone who isn't there. ## Funny samples
Example 1: Misspelled Variable Name
let cat = 'Kitty'
console.log(kat)
ReferenceError: dog is not defined
Example 2: Using a Variable Before Declaring It
console.log(dinner);
let dinner = 'Cheese';
Uncaught ReferenceError: Cannot access 'dinner' before initialization
Example 3: Calling an Undefined Function
sayHi() // ReferenceError: sayHi is not defined
Example 4: Accessing a Variable Inside a Block
{
let myHobby = 'swimming'
}
console.log(myHobby);
Uncaught ReferenceError: myHobby is not defined
Example 5: Function Scope
function stopCar(){
let text = `Car is stopping...`;
}
console.log(text)
Uncaught ReferenceError: text is not defined
Example 6: Using a Variable Outside Its Block
{
// let phrase = 'Hey, What\'s up';
// }
// console.log(phrase)
// Uncaught ReferenceError: phrase is not defined
Summary
ReferenceError occurs when JavaScript can't find the variable or function you're trying to use. This usually happens because of typos, using variables before declaring them, or accessing variables outside their scope. By understanding these common mistakes, you can avoid them and write cleaner, error-free code.
3. TypeError
What it is:
- This error occurs when you try to perform an operation on a value of the wrong type. It's like trying to make a sandwich with a shoe instead of bread.
Example 1. Calling a Non-Function
Scenario: You tried to call something that isn't a function.
let notAFunction = 5;
notAFunction(); // Oops, 'notAFunction' is not a function
Uncaught TypeError: notAFunction is not a function
Example 2. Incorrect Type for Method
- Scenario: You tried to use an array method on a string.
let text = "hello";
text.push('!'); // Oops, 'text' is not an array
Uncaught TypeError: text.push is not a function
Example 3: Non-iterable Spread
- Scenario: You tried to use the spread operator on a non-iterable value.
let notIterable = 123;
let array = [...notIterable]; // Oops, 'notIterable' is not iterable
Uncaught TypeError: notIterable is not iterable
Example 4: Invalid Assignment
- Scenario: You tried to assign a value to a non-variable.
(10 + 5) = 15; // Oops, can't assign to an expression
Uncaught TypeError: Invalid left-hand side in assignment
Example 4: Object as Function
- Scenario: You tried to call an object as if it were a function.
let castle = { name: "Camelot" };
castle(); // Oops, 'castle' is not a function
Uncaught TypeError: castle is not a function
TypeError occurs when you perform an operation on a value of the wrong type. Common causes include calling non-functions, accessing properties of undefined or null, using methods on incorrect object types, attempting to modify read-only or frozen properties, passing incorrect argument types, and misusing constructors.
4. RangeError
What is it?
- A RangeError in JavaScript is an error that occurs when a value is not within the set or expected range. This type of error usually happens when a numeric value is outside the permissible range of values. Let's break down some common scenarios where RangeError might occur.
Examples
Example 1: Invalid Array Length
- Scenario: You tried to create an array with an invalid length.
let array = new Array(-5); // Oops, array length can't be negative
Uncaught RangeError: Invalid array length
Example 2: Maximum Call Stack Size Exceeded
- Scenario: You hit the recursion limit by calling a function too many times.
function endlessLoop() {
console.log("Still going...");
endlessLoop(); // Oops, infinite loop
}
endlessLoop();
Uncaught RangeError: Maximum call stack size exceeded
Example 3: toFixed() Argument Range
- Scenario: You tried to use the toFixed() method with an out-of-range argument.
let num = 123.456;
num.toFixed(101); // Oops, too many decimal places
Uncaught RangeError: toFixed() digits argument must be between 0 and 100
Example 4: Invalid Date
- Scenario: You tried to create a date with an invalid date string.
let timeTravel = new Date("32/13/2020"); // Oops, impossible date
console.log(timeTravel);
Invalid Date
Summary
RangeError occurs when you use a number that is outside of its allowable range in JavaScript. Common causes include creating arrays or buffers with invalid lengths, exceeding recursion limits, using out-of-range arguments in methods like toFixed() or toPrecision(), accessing data views with out-of-bounds indices, passing too many arguments to functions, and creating dates with invalid strings.
Posted on June 19, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.