21

El siguiente código falla:

let obj1,obj2;
obj2 = {
  atributo: 'texto'
};

console.log(obj1.atributo);

Mostrando en consola el mensaje:

TypeError: Cannot read properties of undefined (reading 'atributo')

En Firefox (versión 111) el mensaje es:

TypeError: obj1 is undefined

¿Qué significa y cómo puedo solucionarlo?

2 respuestas 2

18

Basándonos del error

Uncaught TypeError: Cannot read property 'atributo' of undefined

Este error es muy comun estas intentando acceder a un elemento que no existe o su valor es undefined

console.info("Ejemplo de acceso a un elemento del DOM que existe")
const div_existe = document.getElementById("existe")
console.log("div=", div_existe)
console.log("atributo div=" , div_existe.innerHTML) 
//caso que no existe 
console.info("Intentando Acceder a un elemento que NO Existe")
const div_no_existe = document.getElementById("no_existe")
console.log("div=", div_no_existe)
console.log("atributo div=", div_no_existe.innerHTML) //linea de error
<div id="existe">chispas!!!</div>

El error significa que no puedes acceder a esa propiedad, pero ¿por qué?

En el ejemplo que colocastes obj1 esta declarado pero no utilizado, veamos el tipo de dato que nos arroja la prueba

let obj1,obj2;
obj2 = {
  atributo: 'texto'
};
console.log("obj1->" , typeof(obj1));
console.log("obj2->" , typeof(obj2));

¿Como solucionarlo?

Para que de este error el valor de las variables deben ser null o undefined, lo que puedes hacer es lo siguiente:

  • Verificar si el objeto esta declarado
  • La asignación a tu Objeto no reciba parámetros null o undefined
  • Si usas una librería externa verificar que este bien importada

let libreriaExterna 
libreriaExterna.top = 3;

  • Validar si el atributo existe (en el peor de los casos que tu objeto sea muy variable)

let obj1 ,obj2
obj2 = {
  atributo: 'texto'
};

console.log("obj1: ¿está definido?" , typeof obj1 !== 'undefined');
console.log("obj2: ¿está definido?" , typeof obj2 !== 'undefined');
console.log("obj2.atributo: ¿está definido?" , typeof obj2.atributo !== 'undefined');

  • Controlarlos con un Try/Cath(Javascript tiene eso? sí)

let obj1,obj2;
obj2 = {
  atributo: 'texto'
};
try{
console.log(obj1.atributo);
}catch(e){
console.error(e.message," porque no existe el objeto");

}

12

Siguiendo la serie de preguntas y respuestas de la misma temática

Vamos a aclarar su equivalente en Javascript:

¿Qué significa?

El significado del mensaje de error "Uncaught TypeError: Cannot read property 'XXX' of undefined" es:

Error TypeError no capturado: No puedo leer la propiedad 'XXX' de undefined.

Y significa que estamos intentando acceder a una propiedad (atributo o función) de un identificador que no está definido.

En el ejemplo de la pregunta el error se produce porque tenemos dos variables, obj1 y obj2, donde a obj1 no se le ha asignado ningún valor, está indefinida. Si obj1 valiese null, el error sería similar.

¿Cómo solucionarlo?

La manera de solucionarlo es buscar en nuestro código el atributo XXX al que se intenta acceder (o definir) y entonces ver por qué el objeto padre es null o undefined.

Los motivos típicos suelen ser:

  • Intentar acceder a una variable modificada por código asíncrono (la respuesta a una llamada AJAX o un evento como un click del ratón o la pulsación de una tecla) antes de que éste haya asignado un valor a dicha variable.

  • Asumir que una función siempre devuelve un valor distinto de null o undefined: por ejemplo, si esta consulta nos devuelve una lista con 2 elementos, pero estamos intentando acceder a un inexistente tercer elemento:

    let myDivs = document.getElementsByClass('myDiv');
    let text=myDivs[2].innerText;
    // Uncaught TypeError: Cannot read property 'innerText' of undefined
    

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.