Common JavaScript Errors and How to Fix Them

Common JavaScript Errors

JavaScript is a powerful and flexible programming language widely used for building interactive web applications. However, due to its loosely typed nature and asynchronous behavior, developers often encounter various errors. Understanding these common JavaScript errors and knowing how to fix them is essential for writing robust and error-free code.

This article explores the most common JavaScript errors, their causes, and practical solutions to fix them.

JavaScript Error Handling: Try, Catch, and Finally Explained

1. Syntax Errors

What is a Syntax Error in JavaScript?

A syntax error occurs when the JavaScript interpreter encounters code that does not conform to the correct syntax rules of the language. These errors typically result from missing characters, incorrect punctuation, or improper structure, making it impossible for the browser or JavaScript engine to interpret the script.

Since JavaScript is an interpreted language, syntax errors prevent execution, meaning the script will not run until the error is corrected.

Common Causes of Syntax Errors

1. Missing or Mismatched Quotes in Strings

Strings must be enclosed in matching single (') or double (") quotes.

Incorrect Example (Syntax Error)

console.log("Hello World); // Missing closing quote

✅ Corrected Code:

console.log("Hello World");

2. Missing or Misplaced Parentheses, Brackets, or Braces

JavaScript requires correctly paired parentheses (), square brackets [], and curly braces {}. If any are missing or unbalanced, a syntax error occurs.

Incorrect Example: Missing Closing Parenthesis

console.log("Welcome to JavaScript";  // SyntaxError: Unexpected token ';'

✅ Corrected Code:

console.log("Welcome to JavaScript");

Incorrect Example: Unmatched Curly Braces in a Function

function greet() {
    console.log("Hello World";
}  // SyntaxError: Unexpected end of input

✅ Corrected Code:

function greet() {
    console.log("Hello World");
}

3. Incorrect Use of JavaScript Keywords

JavaScript has specific reserved keywords such as if, else, function, return, etc., which must be used correctly.

Incorrect Example: Improper `return` Statement

function addNumbers(a, b) {
    return a + b // SyntaxError: missing ; before statement
}

✅ Corrected Code:

function addNumbers(a, b) {
    return a + b;
}

4. Unexpected or Missing Commas in Arrays and Objects

Commas must be correctly placed when defining arrays or objects.

Incorrect Example: Missing Comma in an Array

let numbers = [1 2, 3]; // SyntaxError: Unexpected number

✅ Corrected Code:

let numbers = [1, 2, 3];

Incorrect Example: Extra Comma in an Object

let person = {
    name: "John",
    age: 30,
}; // SyntaxError in some JavaScript engines (trailing comma)

✅ Corrected Code:

let person = {
    name: "John",
    age: 30
};

5. Misuse of `if-else` Statements

An else statement should always be placed immediately after an if or else if block.

Incorrect Example: Misplaced `else`

if (x > 10) 
    console.log("Greater");
else 
    console.log("Smaller");
    else console.log("Equal"); // SyntaxError: Unexpected token 'else'

✅ Corrected Code:

if (x > 10) {
    console.log("Greater");
} else if (x === 10) {
    console.log("Equal");
} else {
    console.log("Smaller");
}

6. Forgetting the `function` Keyword

In JavaScript, functions must always be declared with the function keyword (or const, let, or var for arrow functions).

Incorrect Example: Missing `function` Keyword

greet() {
    console.log("Hello!");
}  // SyntaxError: Unexpected identifier 'greet'

✅ Corrected Code:

function greet() {
    console.log("Hello!");
}

How to Fix Syntax Errors in JavaScript

1. Check for Properly Closed Quotes, Parentheses, and Braces

Make sure that:
✅ Strings have matching opening and closing quotes ("..." or '...').
✅ Parentheses (), brackets [], and braces {} are correctly balanced.

2. Use a Code Editor with Syntax Highlighting

Modern code editors like Visual Studio Code (VS Code), WebStorm, and Sublime Text highlight syntax errors in real-time, helping developers catch mistakes early.

3. Run the Code in a Browser Console

Most modern browsers (Chrome, Firefox, Edge) provide Developer Tools (press F12 → Console) where JavaScript errors are logged.

✅ Steps to Check Errors in Chrome:

Open the Developer Tools (F12 or Ctrl + Shift + I).
Click on the Console tab.
Look for red error messages indicating syntax issues.

4. Use a JavaScript Linter (ESLint, JSHint, JSLint)

Linting tools can analyze code for syntax and logical errors before execution.

✅ How to Install ESLint in VS Code:

Open VS Code.
Go to Extensions (Ctrl + Shift + X).
Search for ESLint and install it.
Add an .eslintrc.json configuration file to define linting rules.

5. Use Online JavaScript Validators

Web-based tools like:
✅ JSHint
✅ JSFiddle
✅ JSBin

These tools allow you to paste JavaScript code and check for errors instantly.

Syntax errors in JavaScript are among the most common mistakes developers face. They prevent scripts from running, making it essential to detect and fix them quickly. By following best practices such as using proper syntax, utilizing linters, debugging in the browser console, and using modern code editors, developers can minimize syntax errors and write cleaner, error-free JavaScript code.

2. Reference Errors

What is a Reference Error in JavaScript?

A Reference Error occurs in JavaScript when you try to access a variable or function that has not been declared or is out of scope. This type of error typically happens when you attempt to reference a variable that the interpreter doesn’t know about at that point in the code.

JavaScript, being a dynamically typed language, requires that variables and functions be declared before you attempt to use them. If you try to access an undeclared variable or function, the JavaScript engine will throw a ReferenceError, preventing further execution of the script.

Common Causes of Reference Errors

Accessing an Undeclared Variable
If you reference a variable that hasn’t been defined yet, JavaScript will not know what the variable is and will throw a ReferenceError. This is common with simple typos or incorrect order of execution. Example (Reference Error): console.log(myVariable); // Uncaught ReferenceError: myVariable is not defined In the example above, we are trying to access myVariable, but it hasn’t been declared beforehand, causing a ReferenceError.
Accessing a Variable Before Initialization (for let and const)
JavaScript has a temporal dead zone (TDZ) for variables declared with let and const. This means you cannot access these variables before they are initialized. Example (Reference Error): console.log(myVariable); // ReferenceError: Cannot access 'myVariable' before initialization let myVariable = "Hello"; Even though let is used to declare myVariable, accessing it before initialization causes a ReferenceError.
Accessing a Function That Is Not Defined
Similarly, if you attempt to call a function that has not been declared, a ReferenceError will occur. Example (Reference Error): greet(); // Uncaught ReferenceError: greet is not defined function greet() { console.log("Hello!"); } In this case, calling greet() before the function definition results in a ReferenceError.
Incorrect Scope
A ReferenceError can also occur if you attempt to access a variable outside of its scope. For instance, if a variable is defined within a function, you cannot access it outside that function. Example (Reference Error due to Scope): function myFunction() { let localVar = "Hello"; } console.log(localVar); // ReferenceError: localVar is not defined

How to Fix a Reference Error in JavaScript

1. Declare the Variable Before Using It

The most straightforward way to fix a ReferenceError is by ensuring that the variable is declared before you use it. In JavaScript, variables can be declared using var, let, or const.

Example:

let myVariable = "Hello";
console.log(myVariable); // Correct output: "Hello"

By declaring the variable myVariable with let (or const), we ensure that it’s available in the current scope, and the console.log will work as expected.

2. Check for Typos in Variable Names

Sometimes, a ReferenceError occurs because of simple typographical errors in the variable name. Ensure that the name of the variable is consistent throughout the code, including capitalization, spelling, and case sensitivity.

Example:

let myVariable = "Hello";
console.log(myVarible); // ReferenceError: myVarible is not defined

In this case, the variable is named myVariable, but the typo myVarible (note the swapped “i” and “l”) causes a ReferenceError.

Fix:

let myVariable = "Hello";
console.log(myVariable); // Correct output: "Hello"

3. Use `typeof` to Check if a Variable Is Defined

Before using a variable, you can check if it exists by using the typeof operator. This ensures that the variable has been defined before you attempt to access it, preventing a ReferenceError.

Example:

if (typeof myVariable !== 'undefined') {
    console.log(myVariable);
} else {
    console.log("myVariable is not defined.");
}

In this case, the typeof check ensures that we only try to access myVariable if it has been defined, avoiding a ReferenceError.

4. Ensure Proper Initialization Order with `let` and `const`

With variables declared using let and const, ensure that you do not access them before initialization to avoid a temporal dead zone (TDZ) ReferenceError.

Example of Correct Initialization Order:

let myVariable = "Hello";
console.log(myVariable); // Correct output: "Hello"

If you attempt to access myVariable before its initialization, you will run into a ReferenceError because of the TDZ.

5. Handle Scope Carefully

Ensure that you are aware of the scope of your variables. If a variable is defined within a function, it cannot be accessed outside of that function. Use functions and closures properly to avoid scope-related ReferenceErrors.

Example:

function greet() {
    let message = "Hello, world!";
    console.log(message);
}
greet(); // Works fine
console.log(message); // ReferenceError: message is not defined

In this case, message is declared within the greet() function and cannot be accessed outside it, which leads to a ReferenceError.

6. Avoid Using Variables in the Global Scope

Global variables can lead to reference errors when they are accessed unintentionally in different parts of your code. Try to keep variables within local scopes (such as inside functions or blocks) to avoid conflicts and reference issues.

Example:

let globalVar = "I am global";

function showGlobalVar() {
    console.log(globalVar); // Accessible here
}

showGlobalVar();
console.log(globalVar); // Accessible globally

If you accidentally use a variable name that matches an existing global variable but isn’t defined within the current scope, a ReferenceError can occur.

A ReferenceError is a common issue in JavaScript that occurs when a variable or function is accessed before being defined or declared. To avoid such errors, always ensure variables are declared before use, check for typos, and carefully manage scope and initialization order.

By following best practices like using typeof to check for variable existence, avoiding unintentional global variables, and being mindful of JavaScript’s scoping rules, you can effectively manage and eliminate ReferenceErrors from your code.

3. Type Errors

What is a Type Error in JavaScript?

A Type Error occurs when an operation is performed on a value that is not of the appropriate type. This type of error typically arises when you attempt to call a method or perform an operation on a variable that doesn’t support it due to the type mismatch. For example, trying to use a string method on a number or calling a method on undefined or null will throw a TypeError.

JavaScript is a dynamically typed language, meaning you don’t need to explicitly declare the type of a variable. However, this flexibility can also lead to unexpected errors when trying to perform operations on incompatible data types.

Common Causes of Type Errors

1. Calling a Method on the Wrong Data Type

One of the most common causes of a TypeError is attempting to call a method on a value that doesn’t support that method because of its type.

Example (TypeError):

let num = 5;
num.toUpperCase(); // Uncaught TypeError: num.toUpperCase is not a function

In the example above, toUpperCase() is a method that only works on strings. However, num is a number, so JavaScript throws a TypeError because numbers don’t have a toUpperCase() method.

2. Performing Operations on `null` or `undefined`

Attempting to perform operations on null or undefined can also lead to TypeErrors because these values do not support typical operations or methods.

Example (TypeError):

let value = null;
console.log(value.toString()); // Uncaught TypeError: Cannot read property 'toString' of null

Here, null does not have the toString() method, so calling it results in a TypeError.

3. Incompatible Operations Between Different Data Types

Sometimes, performing operations like arithmetic or string concatenation with incompatible data types results in a TypeError.

Example (TypeError):

let str = "hello";
let num = 5;
console.log(str + num); // Correct output: "hello5", but...
console.log(str - num); // Uncaught TypeError: Invalid left-hand side in operation

While the first operation (str + num) works by converting num to a string, trying to subtract a number from a string (str - num) is not a valid operation and results in a TypeError.

4. Using `NaN` in Operations

NaN (Not-a-Number) is a special value in JavaScript that represents an invalid number. Operations with NaN may result in TypeErrors.

Example (TypeError):

let result = NaN + 10; // Works fine, result is NaN
console.log(result.toUpperCase()); // Uncaught TypeError: result.toUpperCase is not a function

Here, NaN is treated as a number in arithmetic, but trying to call string methods like toUpperCase() on it results in a TypeError.

5. Incorrect Type in Array Operations

JavaScript arrays can contain elements of various types, and if you perform an operation on an element that is not of the expected type, you can get a TypeError.

Example (TypeError):

let arr = [1, 2, 3];
console.log(arr[0].toUpperCase()); // Uncaught TypeError: arr[0].toUpperCase is not a function

In this case, arr[0] is a number, and calling toUpperCase() (which is a string method) on it results in a TypeError.

How to Fix a Type Error in JavaScript

1. Ensure That You Are Calling Methods on the Correct Data Type

To avoid TypeErrors, make sure you’re calling methods and performing operations on the correct data type. For instance, only call string methods like toUpperCase() on strings, and numeric methods on numbers.

Example:

let num = 5;
console.log(num.toString()); // Converts number to string: "5"

Here, instead of calling toUpperCase() on a number, we call toString() to convert the number into a string first.

2. Use Type Checking Before Performing Operations

You can check the type of a variable before calling methods or performing operations to avoid TypeErrors. The typeof operator is a simple way to ensure the variable is of the expected type.

Example:

let num = 5;
if (typeof num === 'string') {
    console.log(num.toUpperCase());
} else {
    console.log("The variable is not a string.");
}

In this example, we use typeof to check if num is a string before calling toUpperCase(). If it’s not a string, we log a message to inform the user.

3. Convert Variables When Necessary

In cases where you’re dealing with mixed data types, you can explicitly convert variables to the correct type before performing operations.

Example:

let num = 5;
console.log(num.toString()); // Converts number to string: "5"

let str = "123";
console.log(Number(str)); // Converts string to number: 123

In this case, we explicitly convert num to a string using toString() and convert a string str to a number using Number().

4. Handle `null` and `undefined` Appropriately

Always check for null and undefined values before trying to perform operations. You can use conditional checks or fallback values to avoid TypeErrors.

Example:

let value = null;
if (value !== null && value !== undefined) {
    console.log(value.toString());
} else {
    console.log("The value is null or undefined.");
}

This ensures that you don’t attempt to call methods like toString() on null or undefined.

5. Use `try-catch` Blocks for Error Handling

You can also use a try-catch block to catch TypeErrors and handle them gracefully without stopping the program execution.

Example:

let num = 5;
try {
    console.log(num.toUpperCase()); // This will throw a TypeError
} catch (error) {
    console.log("Caught an error: " + error.message);
}

In this example, we use try-catch to catch the TypeError and print a user-friendly error message instead of letting the program crash.

A TypeError in JavaScript occurs when you try to perform an operation on a value that is not of the appropriate type. These errors are common in situations where you try to call string methods on non-string values, perform arithmetic operations on incompatible data types, or use null or undefined incorrectly.

To fix a TypeError, always ensure you’re working with the correct data type, convert variables to the appropriate type when necessary, and use type-checking techniques like typeof. Additionally, using try-catch blocks for error handling can help gracefully manage TypeErrors without crashing the application. By adhering to these best practices, you can avoid and fix TypeErrors in your JavaScript code.

4. Range Errors

What is a Range Error?

A range error occurs when a value is outside the allowed range of values.

Example

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

How to Fix It

Ensure that the value passed to functions like Array(length) is within valid limits.
Use loops carefully to prevent infinite recursion: function recursiveFunction(count) { if (count > 10) return; recursiveFunction(count + 1); } recursiveFunction(0);

5. URI Errors

What is a URI Error?

A URI error occurs when encoding or decoding a URI component incorrectly.

Example

decodeURIComponent('%'); // Uncaught URIError: URI malformed

How to Fix It

Ensure that the URI string is properly encoded before decoding: let encodedURI = encodeURIComponent('Hello World!'); console.log(decodeURIComponent(encodedURI));

6. Logical Errors

What is a Logical Error?

Logical errors occur when the code runs without crashing but produces incorrect results.

Example

let price = 100;
let discount = 20;
let finalPrice = price - discount / 100; // Incorrect calculation
console.log(finalPrice); // Outputs 99.8 instead of 80

How to Fix It

Check mathematical operations for correct precedence: let finalPrice = price - (discount / 100) * price; console.log(finalPrice); // Correct calculation
Use debugging tools like console.log() and browser developer tools.

7. Asynchronous Errors

What is an Asynchronous Error?

Asynchronous errors occur when dealing with asynchronous functions such as setTimeout, fetch, and Promises.

Example

setTimeout(() => {
    console.log(myVar);
}, 1000); // Uncaught ReferenceError: myVar is not defined

How to Fix It

Ensure that all required variables are defined before accessing them in an asynchronous function.
Use proper error handling in Promises: fetch('invalid-url') .then(response => response.json()) .catch(error => console.error('Error:', error));

8. Unhandled Promise Rejections

What is an Unhandled Promise Rejection?

An unhandled rejection occurs when a Promise fails but no error handler is attached.

Example

let promise = new Promise((resolve, reject) => {
    reject("Something went wrong");
});

How to Fix It

Always handle errors using .catch(): promise.catch(error => console.error(error));
Use async/await with try-catch: async function fetchData() { try { let response = await fetch('invalid-url'); let data = await response.json(); } catch (error) { console.error("Error:", error); } }

9. NaN (Not a Number) Errors

What is a NaN Error?

A NaN error occurs when a mathematical operation results in a non-numeric value.

Example

let result = "text" * 2; // NaN

How to Fix It

Ensure inputs are numbers before performing calculations: let num = parseInt("10"); console.log(num * 2); // Correct output: 20
Use isNaN() to check for NaN values: if (isNaN(result)) { console.log("Invalid number operation"); }

10. Misuse of `this` Keyword

What is a `this` Error?

The this keyword behaves differently depending on the context, leading to unexpected results.

Example

let person = {
    name: "Alice",
    greet: function() {
        setTimeout(function() {
            console.log(this.name);
        }, 1000);
    }
};
person.greet(); // Outputs "undefined"

How to Fix It

Use arrow functions to retain this context: let person = { name: "Alice", greet: function() { setTimeout(() => { console.log(this.name); }, 1000); } }; person.greet(); // Outputs "Alice"
Use .bind(this) to explicitly set the context: setTimeout(function() { console.log(this.name); }.bind(person), 1000);

Conclusion

JavaScript errors can be frustrating, but understanding their causes and solutions makes debugging easier. By following best practices such as proper variable declaration, using debugging tools, handling asynchronous operations carefully, and testing code regularly, developers can write cleaner and more reliable JavaScript applications.

Mastering error handling and debugging techniques is a crucial skill that will help you build better applications and become a more efficient developer.