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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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.

cannot read property push of undefined

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

index.js
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.
index.js
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.

index.js
const arr = undefined; if (arr?.push) { console.log(arr.push('test')); } else { console.log('arr is undefined or null'); }
Always make sure the value on which you access the push() method is an array. If you aren't sure, initialize the value to an array.
index.js
// ✅ 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.

index.js
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.

index.js
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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.