Cómo Solucionar el Error «uncaught typeerror: cannot read property» en JavaScript

Los errores son una parte esencial del aprendizaje y el uso de cualquier lenguaje de programación. Los mensajes de error suelen ayudarte a comprender qué ha fallado en alguna parte de tu código.

Aunque algunos mensajes de error son sencillos y fáciles de entender, otros pueden resultar un poco confusos cuando los ves.

En este tutorial, hablaremos de uno de los errores más comunes de JavaScript: el error «uncaught typeerror: cannot read property».

Al final de este tutorial, deberías entender qué significa «uncaught typeerror: cannot read property», las causas más comunes y cómo solucionarlas.

¿Qué Significa «uncaught typeerror: cannot read property» en JavaScript?

El error «uncaught typeerror: cannot read property» se produce principalmente cuando intentas utilizar o acceder a una variable undefined. Este error puede aparecer cuando utilizas JavaScript vainilla o cualquier framework Javascript.

Puedes detectar fácilmente los errores mientras programas utilizando varias herramientas para desarrolladores, como las Chrome dev tools, y la herramienta de staging de un solo click de Kinsta para interceptar errores, probar tu código y mucho más.

Cómo Solucionar el Error «uncaught typeerror: cannot read property» en JavaScript

En las secciones siguientes, destacaremos algunas de las causas del error «uncaught typeerror: cannot read property» y cómo solucionarlas utilizando ejemplos de código.

Acceder a la Propiedad de un Objeto con un Valor Indefinido

En este apartado trataremos una de las posibles causas del error «uncaught typeerror: cannot read property» en JavaScript. Esto tiene que ver con el acceso a una propiedad de objeto que aún no está definida.

Aquí tienes un ejemplo:

let person;

En el código anterior, hemos creado una variable llamada person. La intención es hacer de esta variable un objeto con propiedades como name, age, hobby.

Si te olvidas de crear estas propiedades, obtendrás un error cuando intentes acceder a ellas. Es decir

let person;
console.log(person.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Como se puede ver arriba, intentamos acceder a la propiedad name que no existe, por lo que obtenemos un error que dice Uncaught TypeError: No se pueden leer propiedades de undefined (leyendo ‘nombre’).

Esto puede ocurrirle a cualquiera, ya que puedes olvidarte de crear/añadir propiedades a tu objeto.

Sigamos adelante y añadamos algunas propiedades al objeto para solucionar el error:

let person = {
  name: "John",
  age: 200,
  hobby: "coding"
}
console.log(person.name);
// John

En el código anterior, hemos añadido la propiedad name para que cuando intentes acceder a ella, te devuelva el valor de «Juan».

Acceder a un Elemento que No Existe en un Array

Al igual que hemos visto en el apartado anterior con los objetos, también te aparecerá el error «uncaught typeerror: cannot read property» si intentas acceder a un elemento de un array que aún no se ha inicializado.

Aquí tienes un ejemplo:

let arr;
console.log(arr[0]);
// Uncaught TypeError: Cannot read properties of undefined (reading '0')

En el ejemplo anterior, intentamos acceder al primer elemento de una matriz llamada arr.

El array se ha declarado pero no se ha inicializado, lo que significa que aún no se le ha asignado ningún elemento.

Para solucionarlo, añadiremos elementos a la matriz antes de acceder a ellos. Es decir:

let arr = [2,4,6,8]
console.log(arr[0]);
// 2

Acceder a un Elemento del DOM que No Existe

Cuando trabajas con el Modelo de Objetos del Documento (DOM) en JavaScript, puedes encontrarte con el error «uncaught typeerror: cannot read property».

Esto puede ocurrir por diferentes motivos, como errores ortográficos al hacer referencia al elemento del DOM, acceder a un elemento que no existe o acceder a un elemento antes de que se haya cargado el DOM (hablaremos de esto en la siguiente sección).

En esta sección, verás un ejemplo que lanza el error «uncaught typeerror: cannot read property» por acceder a un elemento del DOM inexistente.

Aquí tienes el código HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

En el código anterior, hemos creado un documento HTML básico con un elemento h1 con un ID de «contenido».

Aquí está el código JavaScript:

let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

El código anterior produce el error «uncaught typeerror: cannot read property» aunque parezca que lo hemos hecho todo bien.

Es bastante fácil pasar por alto lo que está provocando este error. Se produce porque hemos escrito «constent» en lugar de «content» al hacer referencia al ID del elemento h1.

Es decir, document.getElementById("constent"); en lugar de document.getElementById("content");.

Se producirá el mismo error si intentas hacer referencia a un ID o nombre de clase que aún no se ha creado en el DOM.

Para solucionarlo, puedes simplemente comprobar si hay errores ortográficos o asegurarte de que el elemento al que se hace referencia existe realmente en el DOM.

Colocar el Elemento Script Encima de Otros Elementos DOM Dentro de la Etiqueta Body

La posición de tu elemento script determina cómo se ejecuta tu código JavaScript en el navegador.

Si colocas el elemento script por encima de cualquier otro elemento del cuerpo de tu documento HTML, el código JavaScript se ejecutará antes de que se haya cargado el DOM.

Esto significa que JavaScript no tendrá ninguna referencia a los elementos del DOM porque no esperó a que se cargaran antes de ejecutarse.

Aquí tienes un ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="content">Hello World!</h1>
  </body>
</html>

En el código anterior, hemos colocado el elemento script encima del elemento h1.

Aquí está el código JavaScript en el que intentamos hacer referencia al elemento h1 utilizando su ID:

let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

Como era de esperar, nos saltó el error «uncaught typeerror: cannot read property» porque el código JavaScript anterior al elemento h1 podía registrarse en el DOM.

Para solucionar este problema, coloca siempre tu elemento script antes de la etiqueta de cierre body; es decir, debajo de cualquier otro elemento DOM del cuerpo del documento. De esta forma, el script empezará a ejecutarse después de que se haya cargado cada elemento del DOM.

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

Resumen

Los errores son una parte inevitable de ser desarrollador. Aunque pueden hacer que te sientas frustrado mientras programas, también pueden ayudarte a aprender más y a dominar cualquier lenguaje de programación que estés utilizando.

Cuando te enfrentes a un error, siempre debes intentar comprender el mensaje de error porque te ayudará a saber por dónde empezar y qué solucionar. También podrás solucionar otros errores con mensajes de error similares.

Si vas a construir un sitio web, hay una serie de habilidades que aprender y mucha práctica necesaria para utilizar estas habilidades de manera eficiente. DevKinsta facilita el proceso desde el diseño, el desarrollo y el despliegue, todo en tu máquina local. Más de 25.000 desarrolladores, diseñadores web y freelancers utilizan DevKinsta. Compruébalo gratis hoy mismo.