Null y undefined en

Acerca de Null y undefined

A diferencia de muchos otros lenguajes, en JavaScript hay dos entidades diferentes que representan la ausencia de un valor (significativo). Existen null y undefined.

Null

El valor primitivo null se usa como un «valor vacío» intencionado para una variable. En otros lenguajes, una construcción similar podría usarse solo para objetos (ausentes) o tipos de puntero. En JavaScript, null generalmente representa un valor vacío para cualquier tipo.

let name = null;
// name is intentionally set to "empty" because it is not
// available

Puedes comprobar si una variable es null usando el operador de igualdad estricta ===. Aunque null es un valor primitivo, el operador typeof devuelve object «erróneamente» por razones históricas. Eso significa que no se puede usar por sí solo para comprobar si una variable es null.

let name = null;

name === null;
// => true

// Pitfall:
typeof name;
// => 'object'

Undefined

Una variable a la que no se le ha asignado un valor es de tipo undefined.¹

Eso significa que, mientras que null representa un valor vacío (pero sigue siendo un valor), undefined representa la ausencia total de un valor. 🤯

undefined aparece en distintos contextos.

• Si una variable se declara sin un valor (inicialización), es undefined.
• Si intentas acceder al valor de una clave que no existe en un objeto, obtienes undefined.
• Si una función no devuelve un valor, el resultado es undefined.
• Si no se pasa un argumento a una función, ese argumento es undefined, a menos que tenga un valor por defecto.

let name;
console.log(name);
// => undefined

let obj = { greeting: 'hello world' };
console.log(obj.missingKey);
// => undefined

function returnNothing() {
  return;
}
console.log(returnNothing());
// => undefined

Puedes comprobar si una variable es undefined usando el operador de igualdad estricta === o el operador typeof.

let name;

name === undefined;
// => true

typeof name === 'undefined';
// => true

No se recomienda asignar undefined manualmente a una variable; usa siempre null en su lugar para dejar claro que estableces un valor vacío de forma intencionada.

Encadenamiento opcional

Como se ha mencionado antes, acceder a una clave que no existe en un objeto devuelve undefined en JavaScript. Sin embargo, si intentas recuperar un valor anidado y la clave padre no existe, la evaluación de la clave anidada se realiza sobre undefined y provoca TypeError: Cannot read property ... of undefined. En teoría, siempre tendrías que comprobar que la clave padre existe antes de poder intentar recuperar la clave anidada. Esto se hacía a menudo con el operador AND &&, pero para valores con muchos niveles de anidamiento da lugar a expresiones muy largas.

obj.level1 && obj.level1.level2 && obj.level1.level2.level3;

Para resolver este problema, el encadenamiento opcional se añadió a la especificación del lenguaje en 2020. Con el operador de encadenamiento opcional ?. puedes asegurarte de que JavaScript solo intente acceder a la clave anidada si la padre no era null ni undefined. En caso contrario, se devuelve undefined.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.residence;
// => undefined

obj.address.zipCode;
// => undefined

obj.residence.street;
// => TypeError: Cannot read property 'street' of undefined

obj.residence?.street;
// => undefined

obj.residence?.street?.number;
// => undefined

Coalescencia nula

Hay situaciones en las que quieres aplicar un valor por defecto en caso de que una variable sea null o undefined. En el pasado esto se hacía a menudo con un operador ternario ? o aprovechando la evaluación perezosa del operador OR ||. Esto tiene la desventaja de que el valor por defecto se aplica en todos los casos en que la variable es falsy (por ejemplo, '' o 0), no solo cuando es null o undefined. Esto puede provocar fácilmente resultados inesperados.

let amount = null;
amount = amount || 1;
// => 1

amount = 0;
amount = amount || 1;
// => 1

amount = 0;
amount ? amount : 1;
// => 1

Para solucionar esto, se introdujo el operador de coalescencia nula ??. Al igual que el encadenamiento opcional, se añadió a la especificación del lenguaje en 2020. El operador de coalescencia nula ?? devuelve el operando de la derecha solo cuando el operando de la izquierda es null o undefined. En caso contrario, se devuelve el operando de la izquierda. Con esto, ahora se puede aplicar un valor por defecto de forma más precisa.

let amount = null;
amount = amount ?? 1;
// => 1

amount = 0;
amount = amount ?? 1;
// => 0

---

[1] Undefined, MDN. (2021). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined (consultado el 4 de junio de 2021).