null y undefined
Ya viste los booleanos — un sí o no claro. A veces el programa también debe decir «aquí no hay valor.» JavaScript tiene dos vacíos habituales: undefined y null. Parecen parecidos, pero cada uno cuenta una historia distinta. Aquí los separamos para que las conversiones y comprobaciones posteriores tengan sentido.
¿Cuál es la diferencia entre null y undefined?
undefined suele significar «aún no hay nada» — una variable con let sin asignar, o algo que falta. null significa «vacío a propósito»: tú (o una API) asignas null para limpiar un hueco. Comprueba con typeof: typeof undefined es "undefined", pero typeof null es la rareza antigua "object". Prefiere === al comparar. Ambos son falsy, pero no son booleanos (true / false).
Kit de valores vacíos
📊 null frente a undefined para principiantes
| Idea | Ejemplo | Resultado / nota |
|---|---|---|
| Ausente / sin asignar | let x; luego x |
undefined |
| Vacío intencional | let box = null |
tú eliges vacío |
typeof ausente |
typeof undefined |
"undefined" |
typeof vacío |
typeof null |
"object" (rareza — sigue siendo vacío) |
| Comparación estricta | box === null |
true si box guarda null |
| Comparación flexible | null == undefined |
true con == — prefiere === por claridad |
undefined — aún sin asignar
Declara un nombre con let y no asignes. El valor es undefined. Registra el valor y typeof para fijar la etiqueta "undefined".
let nickname;
console.log(nickname);
console.log(typeof nickname);
null — vacío a propósito
Asigna null cuando quieras señalar con claridad «sin valor». No es lo mismo que olvidar la asignación.
let selected = null;
console.log(selected);
console.log(typeof selected);
typeof lado a lado
Pon ambos resultados juntos. Recuerda: typeof null mostrando "object" es una rareza, no una lección completa de objetos todavía.
console.log(typeof undefined);
console.log(typeof null);
let a;
let b = null;
console.log(typeof a);
console.log(typeof b);
Prefiere === con null y undefined
=== pregunta por valor y tipo. Úsalo cuando quieras decir «exactamente null» o «exactamente undefined». Con ==, null y undefined pueden coincidir — fácil de malinterpretar al aprender.
let user = null;
let title;
console.log(user === null);
console.log(title === undefined);
console.log(user === undefined);
== flexible puede mezclarlos
Con ==, null y undefined coinciden. Regístralo una vez — luego mantén las comprobaciones reales con ===.
console.log(null == undefined);
console.log(null === undefined);
La primera línea es true porque == es flexible. La segunda es false. Escribe las comprobaciones reales con === para que la intención quede clara.
Muestra ambos vacíos en la página
Guarda un nombre al estilo undefined y otro con null, luego escribe etiquetas cortas con textContent.
<!DOCTYPE html>
<html>
<head>
<title>null and undefined — labels</title>
</head>
<body>
<p id="out">…</p>
<script>
let title;
let avatar = null;
document.getElementById("out").textContent =
"title=" + title + " | avatar=" + avatar;
</script>
</body>
</html>
El párrafo muestra ambos vacíos en una línea. Cambia solo avatar a un texto corto, actualiza y comprueba que la mitad derecha cambia mientras title sigue siendo undefined.
Pruébalo tú mismo
- Declara
let city;— registracityytypeof citysin asignar. - Pon
let bag = null;— registra el valor ytypeof bag(espera la rareza"object"). - Registra
typeof undefinedytypeof nulljuntos para ver el contraste. - Compara con
===: una variablenullfrente anully frente aundefined. - Registra una vez
null == undefined; luego escribe tus comprobaciones reales con===. - En la demo HTML, pon
avataren"pic.png", actualiza y lee la nueva línea.
Errores comunes
- Tratar
nullyundefinedcomo siempre intercambiables — el significado cambia (intencional vs. sin asignar) - Entrar en pánico cuando
typeof nulles"object"— rareza;nullsigue siendo vacío intencional - Confiar en
==entre ellos sin notar la coincidencia flexible - Llamar a cualquiera booleano — son vacíos; los booleanos son solo
true/false - Confundir la cadena vacía
""connull—""sigue siendo texto
Resumen
undefined: ausente / aún sin asignar;typeof→"undefined"null: vacío intencional que asignas tú;typeof→"object"(rareza)- Prefiere
===para comprobaciones claras; ambos son falsy pero no booleanos - La cadena vacía
""es texto — no es lo mismo quenulloundefined - Siguiente: conversión de tipos — cambiar un valor de un tipo a otro a propósito
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior