Diferencia entre null y undefined: ¿por qué es importante saberlo?

¿Cuál es la diferencia entre null y undefined JavaScript, por qué existen estos valores y cómo usarlos correctamente en tu código?

Si no entiendes la diferencia entre null y undefined, este artículo es para ti. Vamos a aclarar estos dos valores “vacíos” de una vez por todas, usando una sencilla analogía con un gato en una caja.

Al final del artículo podrás hacer un test y comprobar cuánto has aprendido.

¿Qué significa undefined en JavaScript?

Imagina que un amigo tuyo pone una caja de cartón en la mesa con la etiqueta “Gatito” y se va. La caja está cerrada con cinta adhesiva, y no se puede abrir todavía; tu amigo pidió que esperaras a que volviera.

¿Hay un gato de verdad dentro, juguetes, comida o algo completamente diferente? Este es un ejemplo clásico del estado undefined.

Cuando creamos una variable en JavaScript sin valor, el sistema la llena automáticamente con “indefinición” (undefined):

let caja;
console.log(caja); // undefined

Aquí, caja existe en la memoria, ocupa espacio, pero el contenido de la caja no está definido.

Es importante entender la diferencia entre undefined y el error al acceder a una variable no declarada:

• Si la caja (caja) existe, pero el contenido no está definido, es undefined.
• Si intentamos mirar dentro de una caja que no existe (cajaNoExistente), JavaScript devolverá un error.

let caja;
console.log(caja); // undefined - la caja existe, pero está vacía
console.log(cajaNoExistente); // ReferenceError - la caja no existe

La indefinición surge, por ejemplo, cuando intentamos acceder a una propiedad inexistente de un objeto:

const cajaMascota = {
  nombre: "Michi",
  color: "naranja"
};

console.log(cajaMascota.edad); // undefined

Preguntamos: “¿Qué edad tiene la mascota de la caja?”, y JavaScript responde: “No está definido”. No “cero años” ni “la mascota es inmortal”, sino “no hay información al respecto”.

Las funciones en JavaScript también están relacionadas con el concepto de indefinición. Si una función no devuelve un valor explícito a través de return, devuelve automáticamente undefined, como si hubiéramos enviado a alguien a buscar un gato, pero regresó con las manos vacías y se encogió de hombros:

function intentarEncontrarGato() {
  // Buscamos, buscamos, pero no devolvemos nada
}

const resultadoBusqueda = intentarEncontrarGato();
console.log(resultadoBusqueda); // undefined

El comportamiento de los parámetros de las funciones es especialmente interesante. Cuando declaramos una función con parámetros, pero no pasamos valores para ellos al llamarla, reciben el valor undefined:

function ponerGatoEnCaja(gato, caja) {
  console.log(`Ponemos a ${gato} en ${caja}`);
}

ponerGatoEnCaja("Michi"); // "Ponemos a Michi en undefined"

Intentamos poner un gato en una caja, pero olvidamos especificar en cuál. JavaScript no rompió el programa, sino que simplemente marcó la caja como “indefinida”.

Otro ejemplo, pero con un array: cuando accedemos a un elemento inexistente, JavaScript no falla, sino que devuelve undefined:

const gatos = ["Michi", "Garfield", "Tom"];
console.log(gatos[10]); // undefined - no existe el gato con índice 10

¿Qué significa null en JavaScript?

¿Recuerdas nuestra caja con la etiqueta “Gatito”? Tu amigo regresó, abrió la caja y estaba vacía. Ni gato, ni juguetes, nada.

En JavaScript, este estado se llama null: un valor que significa “no hay nada aquí”. A diferencia de undefined, donde el valor existe pero no está disponible, null indica explícitamente la ausencia de valor.

Cuando hablamos de null, es importante entender que la variable (o la caja) existe, pero deliberadamente no se le ha puesto nada. Esto no es un error, es una decisión consciente.

// Creamos una caja para el gatito
let cajaGato = null;

console.log(cajaGato); // null
console.log(typeof cajaGato); // "object" - ¡una de las peculiaridades de JavaScript!

Observa un detalle interesante: typeof null devuelve “object”, aunque null no es un objeto. Este es un error histórico de JavaScript que nunca se corrigió por motivos de compatibilidad con versiones anteriores.

Diferencia entre null y undefined JavaScript en la práctica

Volvamos a nuestra analogía:

• undefined: la caja no existe o está cerrada, por lo que no sabes qué hay dentro.
• null: la caja está abierta, pero está vacía.

La diferencia entre null y undefined JavaScript es clara: el valor null se usa para indicar explícitamente “no hay nada aquí”, mientras que undefined suele aparecer cuando el valor aún no está definido.

Errores típicos y cómo evitarlos

Al trabajar con “cajas vacías” en JavaScript, es muy fácil cometer errores. Veamos los errores comunes al trabajar con null y undefined, que pueden provocar un comportamiento inesperado del programa.

Igualdad engañosa

La fuente de confusión es la diferencia entre la comparación no estricta (==) y la estricta (===). Imagina que hay dos cajas: una vacía (null) y otra que ni siquiera está abierta (undefined).

let cajaVacia = null; // Caja vacía
let cajaDesconocida = undefined; // Caja cuyo contenido se desconoce

// Comparación no estricta
console.log(cajaVacia == cajaDesconocida); // true - ¡Espera, ¿qué?!

¿Sorprendido? Al usar la comparación no estricta, null y undefined se consideran iguales. Por esta razón, se utiliza la comparación estricta:

console.log(cajaVacia === cajaDesconocida); // false - ¡Mucho mejor!

Errores en la lógica de verificación de valores

Otro error común está relacionado con la verificación de la presencia de valores:

let cajaGato = null;

// Incorrecto:
if (!cajaGato) {
  console.log("La caja está vacía"); // Funciona para null, undefined, 0, "" y false
}

// Correcto:
if (cajaGato === null || cajaGato === undefined) {
  console.log("No hay un gatito en la caja o no lo sabemos");
}

Cero y una cadena vacía no son lo mismo que la ausencia de valor. Verifica los valores correctamente para evitar errores en la lógica del programa. Para acceder de forma segura a las propiedades de los objetos, utiliza la cadena opcional.

function describirGato(caja) {
  // No producirá un error, incluso si caja es null
  console.log(`Nombre del gatito: ${caja?.gato?.nombre ?? "desconocido"}`);
}

undefined en operaciones lógicas

En las operaciones lógicas, JavaScript siempre convierte el valor undefined a false. Esto es intuitivamente comprensible: si una variable no tiene un valor definido, ninguna condición con su participación puede considerarse cumplida.

Por ejemplo, si comprobamos if (variable), con el valor undefined, la condición no se cumplirá, lo que corresponde a la lógica del lenguaje: no se puede afirmar la existencia de algo que no está definido.

Características de la comparación con undefined

Y lo último que debes saber sobre la indefinición es que solo es igual a sí misma en una comparación estricta. En una comparación no estricta, también es igual a null:

console.log(undefined === undefined); // true - la indefinición es idéntica a sí misma
console.log(undefined === null); // false - estos son conceptos diferentes
console.log(undefined == null); // true - pero en el sentido no estricto son similares

Cómo usar correctamente null y undefined

Cuándo usar null

Imagina una caja en la que deliberadamente no has puesto un gato. Has comprobado que no hay ningún gato y has marcado la caja como “sin gato”. Así funciona null: es una indicación consciente de la ausencia de valor:

const registroMascotas = {
  dueño: "María",
  perro: {nombre: "Firulais", edad: 3},
  gato: null  // María definitivamente no tiene gato
};

El uso de null hace que el código sea autodocumentativo: cualquier desarrollador entenderá que la ausencia de gato aquí no es casualidad, sino una intención.

Cuándo usar undefined

A diferencia de la vacuidad intencionada, undefined aparece de forma natural cuando JavaScript no sabe qué debería haber en la “caja”.

No debes asignar explícitamente undefined a las variables:

// No recomendado
let contenidoCaja = undefined;

// Mejor simplemente:
let contenidoCaja;

Esto no es una cuestión de estilo: usar undefined en lugar de null puede confundir a otros desarrolladores, haciéndoles preguntarse: “¿es este un valor indefinido accidental o una indicación intencionada de su ausencia?”

Qué recordar

Comprender la diferencia entre null y undefined JavaScript te ayuda a escribir código más claro, seguro y fácil de mantener.

Undefined surge de forma natural cuando el valor aún no está definido: la variable está declarada, pero no inicializada.

Null, por el contrario, indica intencionadamente la ausencia de valor.

Al trabajar, evita los errores comunes:

• Utiliza la comparación estricta (===), ya que en la comparación no estricta null == undefined dará true.
• Recuerda que en contextos lógicos, ambos valores se comportan como false.
• Aplica la cadena opcional (?.) y el operador de fusión nula (??) para acceder de forma segura a las propiedades y manejar los valores ausentes.
• Usa null para indicar explícitamente la ausencia de valor, y deja que undefined surja de forma natural. Esto hace que el código sea más comprensible y reduce la probabilidad de errores inesperados.

Test de JavaScript: null vs undefined

1. ¿Cuál es el valor de una variable en JavaScript antes de la asignación?
   A) null
   B) undefined
   C) 0
2. ¿Qué devuelve la expresión typeof undefined?
   A) object
   B) undefined
   C) null
3. ¿Qué devuelve la expresión typeof null?
   A) object
   B) undefined
   C) null
4. ¿Qué ocurre al comparar null == undefined?
   A) Devuelve false
   B) Devuelve true
   C) Devuelve un error
5. ¿Qué ocurre en una comparación estricta null === undefined?
   A) Devuelve false
   B) Devuelve true
   C) Devuelve un error
6. ¿Cuál es el resultado de Boolean(null)?
   A) true
   B) false
   C) undefined
7. ¿Qué valor devuelve una función si no tiene un operador return?
   A) null
   B) undefined
   C) TypeError
8. Acceder a una propiedad inexistente de un objeto devuelve:
   A) null
   B) undefined
   C) false
9. ¿Qué valor es mejor usar para indicar explícitamente la ausencia de un valor?
   A) undefined
   B) null
   C) ""
10. ¿Cuál es el resultado de "5" + null?
    A) 5
    B) "5null"
    C) NaN