null vs undefined en JavaScript: Diferencias y Cuándo Usar Cada Uno

¿Qué son null y undefined?

null y undefined son dos tipos primitivos de JavaScript que representan ausencia de valor, pero con significados sutilmente diferentes. undefined significa que una variable ha sido declarada pero no se le ha asignado un valor, o que se intentó acceder a algo que no existe. null es una asignación explícita que significa "sin valor" o "vacío intencionalmente".

La confusión entre null y undefined es común porque ambos representan "nada", pero la distinción es importante: undefined es lo que JavaScript asigna automáticamente cuando falta un valor, mientras que null es lo que tú asignas intencionalmente para indicar que algo está vacío. Esta diferencia semántica ayuda a distinguir entre valores que faltan por error (undefined) y valores que intencionalmente están vacíos (null).

undefined: Ausencia No Intencional de Valor

undefined es un tipo primitivo con un único valor: undefined. JavaScript asigna automáticamente undefined en varias situaciones: variables declaradas sin inicializar, parámetros de función que no se pasaron, propiedades de objeto que no existen, y funciones que no retornan nada explícitamente. Es la forma que tiene JavaScript de decir "aquí debería haber un valor pero no lo hay".

El ejemplo muestra los cuatro casos principales donde JavaScript asigna undefined automáticamente. Variables declaradas pero no inicializadas, parámetros de función omitidos, propiedades de objeto que no existen, y funciones sin return explícito. En todos estos casos, JavaScript usa undefined para indicar que falta un valor. No necesitas asignar undefined manualmente - JavaScript lo hace por ti.

null: Ausencia Intencional de Valor

null es un tipo primitivo con un único valor: null. A diferencia de undefined que JavaScript asigna automáticamente, null debe ser asignado explícitamente por el programador. Representa la ausencia intencional de cualquier valor de objeto - es una forma de decir "este valor existe, pero intencionalmente está vacío" o "aún no tengo este valor pero lo tendré más tarde".

null se usa cuando quieres indicar explícitamente que un valor está vacío o que aún no existe. Por ejemplo, si un usuario puede o no tener una foto de perfil, usarías null cuando no tiene foto (en lugar de undefined). Si una variable contendrá un objeto más tarde pero aún no lo tienes, inicialízala en null. Es una señal clara de intención: "sé que esto debería tener un valor, pero ahora está vacío".

Diferencias Clave entre null y undefined

Aunque null y undefined representan ausencia de valor, tienen diferencias importantes en significado, origen, tipo y uso. Entender estas diferencias te ayudará a escribir código más claro y evitar bugs sutiles donde usas uno cuando deberías usar el otro.

Las diferencias principales son:

• undefined es asignado automáticamente por JavaScript, null debe asignarse explícitamente
• typeof undefined es 'undefined', typeof null es 'object'
• undefined significa 'no inicializado', null significa 'intencionalmente vacío'
• En operaciones matemáticas, undefined produce NaN, null se convierte a 0

Estas diferencias afectan cómo y cuándo debes usar cada uno en tu código.

Comparación y Igualdad

La comparación entre null y undefined tiene reglas específicas que pueden causar confusión. Con comparación suelta (==), null y undefined son considerados iguales entre sí pero diferentes de todo lo demás. Con comparación estricta (===), son diferentes porque son tipos diferentes.

Este comportamiento especial de == con null y undefined es único - son los únicos valores que son == entre sí sin ser === iguales. null == undefined es true por diseño del lenguaje, para facilitar verificar si un valor es "nulo o no definido" sin importar cuál. Sin embargo, la mejor práctica es usar === para evitar confusión. Ambos son falsy, así que en condiciones booleanas se comportan igual.

Verificar null y undefined de Forma Segura

Hay varias formas de verificar si un valor es null, undefined, o ambos. La forma más clara es la comparación directa con ===. También puedes usar operadores modernos como optional chaining (?.) y nullish coalescing (??) que manejan ambos casos elegantemente.

Las formas modernas de manejar null/undefined son más seguras y legibles. Optional chaining (?.) evita errores cuando accedes a propiedades anidadas que pueden no existir. Nullish coalescing (??) proporciona valores por defecto solo cuando el valor es null o undefined (a diferencia de || que también trata 0, "", y false como falsy). Estas son las formas preferidas en código moderno.

Cuándo Usar null vs undefined

Aunque puedes usar null y undefined intercambiablemente en muchos casos, seguir convenciones claras hace tu código más legible y predecible. La regla general es: deja que JavaScript use undefined automáticamente para valores no inicializados, y usa null explícitamente cuando quieres indicar que algo está intencionalmente vacío.

Usa null cuando: (1) Inicializas una variable que contendrá un objeto más tarde, (2) Quieres indicar explícitamente que un valor está vacío o desconocido, (3) Resetas una variable para liberar memoria, (4) Una propiedad opcional puede estar presente o ausente intencionalmente. Usa undefined cuando: (1) Dejas que JavaScript maneje valores no inicializados, (2) Retornas de funciones que no tienen valor de retorno, (3) Parámetros opcionales de función.

Errores Comunes con null y undefined

Los errores más comunes con null y undefined vienen de no verificarlos antes de acceder a propiedades, confundir == con ===, usar typeof para verificar null, y no entender que ambos son falsy pero no son intercambiables en todas las situaciones.

El error más común es "Cannot read property of undefined/null" al intentar acceder a propiedades sin verificar primero. Usa optional chaining (?.) para evitarlo. Otro error es usar typeof para verificar null - no funciona porque typeof null es "object". También es común confundir el comportamiento de || vs ?? - || trata 0 y "" como falsy, ?? solo null/undefined.