TypeError: Cannot read Property 'push' of Undefined in JS

TypeError: Cannot read Property 'push' of Undefined in JS #

There are multiple reasons the "Cannot read property push of undefined" error occurs:

• Calling the push method on a variable that stores an undefined value.
• Calling the push method in a class, without property initialization.
• Calling the push method at a specific index of an array.

Most commonly, the error occurs if you try to call the push() method on a variable that stores an undefined value.

Copied!
const arr = undefined;

// ⛔️ TypeError: Cannot read properties of undefined (reading 'push')
console.log(arr.push());

To solve the "Cannot read property push of undefined" error:

1. Use the Array.isArray() method to check if the value is an array.
2. If the value is an array, call the push() method.
3. The push() method should only be called on valid arrays.

Copied!
const arr = undefined;

// ✅ using Array.isArray
if (Array.isArray(arr)) {
  arr.push('example');
} else {
  console.log('arr variable does not store an array');
}

// ✅ using optional chaining
if (arr?.push) {
  console.log(arr.push('test'));
} else {
  console.log('arr is undefined or null');
}

The Array.isArray method allows us to check if the variable stores an array before calling the push() method.

The method returns true if the passed in value is an array.

If the value is an array, we can safely call the push() method.

The second example uses the optional chaining (?.) operator to check if the push property exists on the value.

Copied!
const arr = undefined;

if (arr?.push) {
  console.log(arr.push('test'));
} else {
  console.log('arr is undefined or null');
}

Copied!
// ✅ if you get the value from somewhere else
const fromDb = undefined;
const arr = fromDb || [];

console.log(arr); // 👉️ []

You can use the logical OR (||) operator to set the value to an empty array if it's falsy (e.g. undefined).

To solve the "Cannot read property push of undefined" error, make sure to initialize any class properties before calling the push() method.

Copied!
class Person {
  // ✅️ Initialize class property setting it to array
  languages = [];

  constructor(colors) {
    // ✅ initialize from passed in parameters
    this.colors = colors;
  }

  addLanguage(language) {
    this.languages.push(language);
  }

  addColor(color) {
    this.colors.push(color);
  }
}

const p1 = new Person(['blue', 'red']);

p1.addLanguage('spanish');
p1.addColor('green');

We initialized the languages property to an array inside of the class. This helps us avoid the error when trying to use the push method.

The same is the case for the colors property, which we initialized inside of the constructor.

Had we not set the languages or colors properties to arrays, we would get the "Cannot read property push of undefined" error when trying to use the push() method.

Another common cause of the error is trying to use the push() method after accessing a specific index.

Copied!
const arr1 = [];
// ❌ Cannot read properties of undefined (reading 'push')
arr1[0].push(); // ⛔️ BAD

arr1.push('test'); // ✅ GOOD

We try to access the array element at index 0, which returns a value of undefined. Calling the push() method on an undefined value causes the error.

Instead, you should make sure that the value, on which you call the push() method is an array.

Conclusion #

The "Cannot read property push of undefined" error occurs when trying to call the push() method on an undefined value.

Make sure the variable on which you are calling the push() method has been initialized and set to an array before calling the method.