Borislav Hadzhiev
Sat Oct 23 2021·3 min read
Photo by Sonja Guina
There are multiple reasons the "Cannot read property push of undefined" error occurs:
push
method on a variable that stores an undefined
value.push
method in a class, without property initialization.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.
const arr = undefined; // ⛔️ Cannot read properties of undefined (reading 'push') console.log(arr.push());
To solve the "Cannot read property push of undefined" error, use the
Array.isArray()
method to check if the value is an array before calling the
push()
method, e.g. if (Array.isArray(arr)) {}
.
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/method exists on the value.
push()
method is an array. If you aren't sure, initialize the value to an array.// ✅ if you get the value from somewhere else const fromDb = undefined; const arr = fromDb || []; console.log(arr); // 👉️ []
Even if you get the value from somewhere else, you can use the logical OR (||) operator to set it to an empty array if the value is falsy.
To solve the "Cannot read property push of undefined" error, make sure you
initialize any class properties before accessing them to use the push()
method.
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 our 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 declared the languages
or colors
properties and set them to an
array, 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.
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
, on which we call the push
method, causing the error.
Instead you should make sure that the value, on which you are calling the
push()
method is an array.
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.