Solve - Cannot read Property 'push' of Undefined in JS

Solve - Cannot read Property Push of Undefined #

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;

// ⛔️ 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)) {}.

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/method exists on the value.

Copied!
// ✅ 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.

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

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, 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.

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.