Original article: How to Fix TypeError: Cannot read Property 'push' of Undefined in JavaScript

Cuando trabajes con arreglos en JavaScript, debes tener cuidado de no llamar a los métodos push(), pop(), shift(), unshift() o splice() en una variable que pretende ser un arreglo que que tiene el valor undefined.

Si haces esto, obtendrás este error:

s_E70A1833F8285C7F5412DCD9531F13EA1E92CB215392E2D976AD0B6D0DFB9AA0_1665231049694_image

Si llamas a pop() o a cualquiera de estos métodos en lugar de push(), (como en el ejemplo anterior), el error se mostrará con pop(), (o cualquier otro método mencionado que este usando) en su lugar. Esto significa que el enfoque que aprenderás en este artículo funcionará para todos los métodos.

Para comprender bien este artículo y este error, es esencial resaltar las diversas razones que pueden disparar este problema:

  • Llamar al método en una variable previamente establecida como undefined.
  • Llamar al método en una variable antes de que sea inicializada como un arreglo.
  • Llamar al método en un elemento del arreglo en lugar del arreglo en sí mismo.
  • Llamar al método en una propiedad de objeto que no existe o tiene un valor de undefined.

Recuerda que este método puede ser push(), pop(), shift(), unshift() o splice(). Analizaremos ahora cada escenario y aprendamos a solucionar el error.

Llamar al método en una variable previamente establecida como undefined

Cuando trabajamos con variables y tipos de datos como cadenas, tendemos que asignar valores de variable como undefined y null antes de pasar el valor original. A veces hacemos esto cuando llamamos a funciones o manejamos ciertas acciones.

Para arreglos, no funciona de esta manera, obtendrás este error:

let miArray = undefined;
miArray.push("John Doe"); // TypeError: no se pueden leer las propiedades de undefined
console.log(miArray);

Para arreglar esto, debes declarar que la variable es un arreglo antes de que los métodos como push(), pop() y otros funcionen en ella:

let miArreglo = [];

miArreglo.push("John Doe");

console.log(miArreglo); // ["John Doe"]

Nota: Cuando se declara una variable no se la reconoce como una variable de arreglo hasta que se inicializa usando el constructor Array o usando la notación literal de arreglo ([]) .

Llamar al método en una variable antes de que sea inicializada como un arreglo

Como acabas de aprender, otra manera de declarar variables es crearlas sin asignarle un valor.

let miArreglo;

miArreglo.push("John Doe"); //TypeError: no se pueden leer las propiedades de undefined

console.log(miArreglo);

Esto funciona bien para tipos de datos como cadenas, números y otros, pero no funciona bien para un arreglo. Debes inicializar los arreglos con el constructor de Array o con la notación literal de arreglo ([]).

let miArreglo = [];

// o

let miArreglo = new Array();

Nuestro código ahora se verá así:

let miArreglo = [];

miArreglo.push("John Doe");

console.log(miArreglo); // ["John Doe"]

Llamar al método en un elemento del arreglo en lugar del arreglo en sí mismo

Los métodos de arreglo están destinados a ser invocados en el propio arreglo (es decir, el arreglo o la variable utilizada para almacenar el arreglo) y no en un elemento del arreglo. 

// Ejemplos de arreglos
let miArreglo = [12, 13, 17];
let miArreglo2 = [];
let miArreglo3 = new Array();

// Ejemplos de elementos de arreglos
miArreglo[0];
miArreglo[1];
miArreglo[2];

Es posible que se quiera agregar un elemento a una posición en particular de un arreglo y pensar que usar el método push() o unshift() al elemento directamente solucionará el problema. Desafortunadamente recibirás el error "cannot read property 'push' of undefined" (no se puede leer la propiedad 'push()' de indefinido): 

let miArreglo = [12, 13, 17];

miArreglo[3].push(15); // TypeError: no se puede leer la propiedad 'push()' de undefined

console.log(miArreglo);

Para solucionar este problema, debes llamar al método push() en la variable como tal y no en su elemento:

let miArreglo = [12, 13, 17];

miArreglo.push(15);

console.log(miArreglo); // [12,13,17,15]

Llamar al método en una propiedad de objeto que no existe o tiene un valor de undefined

Finalmente cuando se intenta llamar al método en una propiedad de objeto que no existe o cuyo valor está establecido como undefined:

const usuario = { nombre: 'John Doe', puntuaciones: undefined };
const usuario2 = { nombre: 'John Doe' };

usuario.puntuaciones.push(50);
usuario2.puntuaciones.push(50); 
// TypeError: no se puede leer la propiedad 'push()' de undefined

En el escenario anterior, hay dos objetos: el primer objeto tiene puntuaciones de par clave-valor cuyo valor establecido para puntuaciones es undefined, no puede recibir un arreglo. Mientras que para el segundo objeto no existen puntuaciones. Ambas situaciones pueden provocar errores.

Para solucionarlo, todo lo que tiene que hacer es inicializar puntuaciones de modo que pueda recibir un arreglo, esto con la sintaxis de arreglo literal.

const usuario = { nombre: "John Doe", puntuaciones: [] };

usuario.puntuaciones.push(50);

console.log(usuario);

Para finalizar

En este artículo, aprendiste a cómo corregir el error "No se pueden leer las propiedades de undefined", que ocurre cuando usas estos métodos de arreglo a variables que no están declaradas o inicializadas como variables.

¡Feliz codificación!