Skip to main content

How to Resolve "TypeError: Cannot read properties of null" Error in JavaScript

The TypeError: Cannot read properties of null (reading '...') is one of the most common and fundamental errors in JavaScript. It occurs whenever you try to access a property or call a method on a variable that holds the value null. This error is a clear signal that your code expected an object but received null instead.

This guide will explain the core reason this error happens and walk you through the most common scenarios—especially when working with the DOM—and how to write "defensive" code to prevent it.

The Core Problem: Trying to Access a Property on null​

The null value in JavaScript represents the intentional absence of any object value. Think of it as an empty box. The error occurs when you try to get something out of that empty box.

Example of problem:

// This variable is explicitly set to `null`. It's our "empty box".
const myObject = null;

// PROBLEM: We are trying to read the 'name' property from the empty box.
// This is an impossible operation.
const name = myObject.name;

Error Output:

Uncaught TypeError: Cannot read properties of null (reading 'name')
note

The error message is telling you exactly what went wrong: "I tried to read the property name, but I couldn't because the variable you gave me was null."

Cause 1 (Most Common): A DOM Element Was Not Found​

This is the most frequent cause of the error in client-side JavaScript. You use a method like document.getElementById() or document.querySelector() to find an element, but it fails and returns null.

Example of problem: HTML:

<!-- There is no element with the ID "my-button" -->

JavaScript:

// 1. The selector fails and returns `null`.
const myButton = document.getElementById('my-button');
console.log(myButton); // Output: null

// 2. The error occurs when we try to use the `null` variable.
myButton.addEventListener('click', () => {
  console.log('Button clicked!');
});

Error Output:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

This can happen for two main reasons:

  • A typo in the selector: The ID or class name in your JavaScript does not match your HTML.
  • Script execution order: Your <script> tag is in the <head> or at the top of the <body>, so it runs before the browser has created the HTML elements.

Cause 2: A Function or API Returned null Unexpectedly​

The error can also occur when you are working with the result of a function or an API call that can return null to indicate that nothing was found.

Example of problem:

function findUser(id) {
  const users = [{ id: 1, name: 'Alice' }];
  const user = users.find(u => u.id === id);
  return user || null; // Returns the user or null if not found
}

// 1. `findUser` is called with an ID that doesn't exist, so it returns `null`.
const currentUser = findUser(2);

// 2. The error occurs when we try to access a property on `null`.
console.log(currentUser.name);

Error Output:

Uncaught TypeError: Cannot read properties of null (reading 'name')

The Solution: How to Prevent the Error​

The solution is to write "defensive" code. Before you try to access a property on a variable, you must check if the variable is null (or "nullish").

This is the most common and readable pattern.

const myButton = document.getElementById('my-button');

// Add a "guard clause" to check if the element exists.
if (myButton) {
  // This code block will only run if `myButton` is a valid element.
  myButton.addEventListener('click', () => {
    console.log('Button clicked!');
  });
} else {
  console.error('Error: Could not find the button element!');
}

Solution B: Optional Chaining (?.)​

This is a modern and concise way to safely access nested properties. The ?. operator will stop the evaluation and return undefined if the value on its left is null or undefined, preventing the error.

const myButton = document.getElementById('my-button');

// If `myButton` is null, this will not throw an error.
// Instead, it will do nothing.
myButton?.addEventListener('click', () => {
  console.log('Button clicked!');
});
note

This is a great choice when you simply want to do nothing if the object doesn't exist.

Conclusion​

The TypeError: Cannot read properties of null is a fundamental error that signals an unhandled "not found" case in your code.

To solve it, follow this two-step process:

  1. Identify where the null value is coming from. Is it a failed DOM query? Is it an API response?
  2. Add a check before you use the variable.
    • Use an if (variable) block to handle the "not found" case explicitly.
    • Use optional chaining (variable?.property) for a concise way to safely access properties that might not exist.

By writing defensive code that anticipates null values, you can prevent this common error and make your applications more robust.

Table of Contents