JavaScript
null y undefined
Diferencia null y undefined, sus casos de uso y cómo interactúan con typeof, valores por defecto, optional chaining y nullish coalescing.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Diferencia null y undefined, sus casos de uso y cómo interactúan con typeof, valores por defecto, optional chaining y nullish coalescing.
null y undefined representan ausencia de valor, pero normalmente cuentan historias distintas sobre por qué ese valor no está disponible.
undefined suele indicar que un valor no fue asignado, no existe o no fue proporcionado.null suele indicar que la ausencia fue colocada de manera intencional.let ciudad;
console.log(ciudad); // undefined
const segundoNombre = null;
console.log(segundoNombre); // nullEn el primer caso todavía no hay un valor. En el segundo se decidió expresar que el valor no existe.
let resultado;
console.log(resultado); // undefinedconst usuario = {
nombre: "Ana",
};
console.log(usuario.edad); // undefinedfunction saludar(nombre) {
console.log(nombre);
}
saludar(); // undefinedfunction registrarVisita() {
console.log("Visita registrada");
}
const resultado = registrarVisita();
console.log(resultado); // undefinedToda función devuelve un valor. Cuando no existe un return con resultado, devuelve undefined.
Algunas APIs devuelven undefined cuando no encuentran un elemento.
const numeros = [10, 20, 30];
const encontrado = numeros.find((numero) => numero > 100);
console.log(encontrado); // undefinednull se asigna explícitamente.
const usuario = {
nombre: "Ana",
avatar: null,
};Aquí estamos diciendo que el usuario existe, pero no tiene avatar.
También puede representar que una búsqueda terminó correctamente y no encontró un valor, dependiendo del contrato de una API.
const sesionActual = null;Esto podría significar que la aplicación comprobó la sesión y confirmó que no hay un usuario autenticado.
Considera estos estados:
let usuario;Podría significar que todavía no hemos comprobado quién es el usuario.
let usuario = null;Podría significar que ya comprobamos la sesión y confirmamos que nadie ha iniciado sesión.
Esta diferencia permite modelar estados con mayor claridad.
let perfil;undefined: todavía no se ha cargado.null: se cargó, pero no existe un perfil.if (perfil === undefined) {
console.log("Cargando perfil...");
} else if (perfil === null) {
console.log("El perfil no existe");
} else {
console.log(`Hola, ${perfil.nombre}`);
}console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"typeof null devuelve "object" por un error histórico de los primeros días de JavaScript. No significa que null sea realmente un objeto.
Para comprobar null, utiliza una comparación directa:
valor === nullCon igualdad estricta, son valores diferentes:
console.log(null === undefined); // falseCon igualdad no estricta, JavaScript los considera equivalentes entre sí:
console.log(null == undefined); // trueEste es uno de los pocos casos donde algunos equipos usan deliberadamente valor == null para comprobar ambos valores:
if (valor == null) {
// entra si valor es null o undefined
}Sin embargo, si buscas máxima claridad, puedes expresarlo de forma explícita:
if (valor === null || valor === undefined) {
// ausencia de valor
}El operador ?? usa un valor alternativo solo cuando el valor de la izquierda es null o undefined.
const nombre = null;
const nombreVisible = nombre ?? "Sin nombre";
console.log(nombreVisible); // "Sin nombre"A diferencia de ||, conserva valores válidos como 0, false y "".
const cantidad = 0;
console.log(cantidad || 10); // 10
console.log(cantidad ?? 10); // 0Los parámetros por defecto se aplican cuando el argumento es undefined.
function crearSaludo(nombre = "Visitante") {
return `Hola, ${nombre}`;
}
crearSaludo(); // "Hola, Visitante"
crearSaludo(undefined); // "Hola, Visitante"
crearSaludo(null); // "Hola, null"null es un valor proporcionado explícitamente, así que no activa el parámetro por defecto.
El operador ?. detiene el acceso cuando encuentra null o undefined.
const usuario = null;
console.log(usuario?.perfil?.nombre); // undefinedSin optional chaining, intentar acceder a usuario.perfil produciría un error.
No existe una regla universal, pero sí conviene mantener un contrato consistente.
Una estrategia común es:
undefined para datos opcionales o todavía no proporcionados.null cuando quieres expresar una ausencia intencional y significativa.Por ejemplo:
const producto = {
descripcion: undefined,
fechaEliminacion: null,
};El significado exacto depende del contrato definido por tu aplicación o API.
Puede ser un resultado completamente válido, como cuando find no encuentra un elemento.
typeof null === "object"Utiliza valor === null.
const intentos = 0;
const mostrados = intentos || 3; // 3, posiblemente incorrectoUsa ?? cuando solo quieres reemplazar null y undefined.
Si ambos aparecen aleatoriamente, el consumidor debe manejar más casos sin obtener información adicional.
undefined suele representar un valor no asignado o no proporcionado.null representa normalmente una ausencia intencional.typeof null devuelve "object" por una peculiaridad histórica.null === undefined es false.?? solo reemplaza null y undefined.undefined, no con null.Devuelve undefined.
null === undefined // false
null == undefined // trueLa igualdad estricta no convierte tipos. La igualdad no estricta tiene una regla especial que relaciona estos dos valores.
function mostrar(valor = 10) {
console.log(valor);
}
mostrar(undefined);
mostrar(null);Imprime:
10
nulltypeof y comprobación de tipos explica cómo identificar valores correctamente y por qué typeof no es suficiente para todos los casos.