JavaScript

Qué significa null is not an object y cómo solucionarlo

Referencia del error

null is not an object

Lenguaje

JavaScript

Severidad

Alta

Cuándo ocurre

Este error aparece en JavaScript (especialmente en Safari y React Native) cuando intentas acceder a una propiedad o llamar a un método sobre un valor que es null.

Posibles soluciones

Siempre verifica que el resultado de una consulta al DOM no sea null antes de llamar métodos sobre él. Usa optional chaining (?.) como guardia concisa. Para datos de APIs, usa renderizado condicional o estados de carga. Mueve las etiquetas script al final del body o usa DOMContentLoaded para asegurarte de que el DOM esté listo.

Errores relacionados

TypeError ReferenceError

Más detalles

Este error aparece en JavaScript (especialmente en Safari y React Native) cuando intentas acceder a una propiedad o llamar a un método sobre un valor que es null. Es una forma específica de TypeError. El escenario más común es consultar un elemento del DOM que no existe todavía.

Por qué ocurre

•Llamar a document.getElementById() o querySelector() para un elemento que no está en el DOM en ese momento.
•Una variable que debería contener una referencia a un objeto nunca fue asignada o fue establecida explícitamente a null.
•Acceder a una propiedad en el resultado de una llamada a una API antes de que los datos hayan cargado.
•Ejecutar consultas del DOM en un script que se ejecuta antes de que la página haya renderizado completamente.

Posibles soluciones

Siempre verifica que el resultado de una consulta al DOM no sea null antes de llamar métodos sobre él. Usa optional chaining (?.) como guardia concisa. Para datos de APIs, usa renderizado condicional o estados de carga. Mueve las etiquetas script al final del body o usa DOMContentLoaded para asegurarte de que el DOM esté listo.

Ejemplos

JavaScript

Código que causa el error

const button = document.getElementById("submit");
button.addEventListener("click", () => {
  console.log("clicked");
});

Error en la terminal

TypeError: null is not an object (evaluating 'button.addEventListener')

Código corregido

const button = document.getElementById("submit");

// Guard against null before calling methods
if (button) {
  button.addEventListener("click", () => {
    console.log("clicked");
  });
}

// Or with optional chaining:
button?.addEventListener("click", () => {
  console.log("clicked");
});

Practica en inglés

¿Cómo le explicarías un null is not an object a un compañero dev? Elige la frase correcta:

"I hit an error...

¿Listo para practicar tu inglés en el trabajo?

Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.

Prueba Lingua-e gratis