JavaScript: compruebe si la variable no está definida o es nula

En esta breve guía, aprenderá cómo verificar si una variable es indefinida, nula o nula en JavaScript estándar y con Lodash, con ejemplos prácticos y consejos sobre cuándo usar qué enfoque.

Introducción

Los valores undefined y null se cuelan en el flujo de código todo el tiempo. Ya sea que perdamos una referencia debido a efectos secundarios, olvidemos asignar una variable de referencia a un objeto en la memoria, u obtengamos una respuesta vacía de otro recurso, base de datos o API, tenemos que lidiar con valores indefinidos y nulos todos el tiempo.

En esta breve guía, veremos cómo comprobar si una variable es indefinida o nula en JavaScript.

Diferencia entre indefinido y null

Las variables indefinidas y null a menudo van de la mano, y algunas usan los términos indistintamente. Sin embargo, hay una diferencia entre ellos:

  • indefinido es una variable que se refiere a algo que no existe, y la variable no está definida para ser nada.
  • null es una variable que está definida pero le falta un valor.

La diferencia entre los dos es quizás un poco más clara a través del código:

1
2
3
4
5
let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

a no está definido: no está asignado a nada y no hay una definición clara de lo que realmente es. b está definido como un valor nulo.

Si b se definió directamente como nulo o se definió como el valor devuelto de una función (que resulta que devuelve un valor nulo) no importa, está definido como *algo *.

Por otro lado, a es literalmente nada. No se realizó ninguna asignación y no está del todo claro qué debería o podría ser.

En la práctica, la mayoría de los valores nulos e indefinidos surgen de un error humano durante la programación, y estos dos van juntos en la mayoría de los casos. Al buscar uno, normalmente también buscamos el otro.

Verificar si la variable es indefinida o nula {#verificar si la variable es indefinida o nula}

Hay dos enfoques por los que puede optar al verificar si una variable es “indefinida” o “nula” en JavaScript estándar.

== y === Operadores

Hay una diferencia entre el Operador de igualdad flexible (==) y el Operador de igualdad estricta (===) en JavaScript. La igualdad flexible puede conducir a resultados inesperados y se comporta de manera diferente en este contexto que el operador de igualdad estricta:

1
2
console.log(null == undefined);  // true
console.log(null === undefined); // false

{.icon aria-hidden=“true”}

Nota: Esto no debe tomarse como prueba de que null e undefined son lo mismo. El operador de igualdad suelta utiliza definiciones "coloquiales" de valores verdaderos/falsos. 0, "" y [] se evalúan como falso ya que denotan la falta de datos, aunque en realidad no son iguales a un valor booleano.

Dicho esto, dado que el operador de igualdad flexible trata a null e indefinido como iguales, puede usarlo como la versión abreviada de verificar ambos:

1
2
3
4
5
6
7
8
// Undefined variable
let a;

if (a == null) {
  console.log('Null or undefined value!');
} else {
  console.log(a);
}

Esto comprobaría si a es ya sea null o indefinido. Dado que a es indefinido, esto da como resultado:

1
Null or undefined value!

Aunque, realmente no sabemos cuál de estos es. Si tuviéramos que usar el operador estricto, que verifica si a es nulo, nos sorprendería desagradablemente encontrarnos con un valor indefinido en la declaración console.log():

1
2
3
4
5
6
7
let a;

if (a === null) {
  console.log('Null or undefined value!');
} else {
  console.log(a); // undefined
}

a realmente no es nulo, pero es indefinido. En este caso, nos gustaría verificarlos por separado, pero tener la flexibilidad de conocer la verdadera razón del flujo:

1
2
3
4
5
6
7
let a;

if (a === null || a === undefined) { // true
  console.log('Null or undefined value!');
} else {
  console.log(a);
}

Aquí, los hemos combinado con un OR exclusivo, aunque también puede separarlos para diferentes operaciones de recuperación si así lo desea:

1
2
3
4
5
6
7
let a;

if (a === null) {
  console.log('Null value!');
} else if (a === undefined) { // true
  console.log('Undefined value!');
}

{.icon aria-hidden=“true”}

Nota: Vale la pena señalar que si la referencia no existe, se generará un ReferenceError. Esto se puede evitar mediante el uso del operador typeof, aunque podría no ser la mejor opción desde la perspectiva del diseño del código. Si está utilizando una variable de referencia inexistente, ignorar silenciosamente ese problema mediante el uso de typeof podría conducir a una falla silenciosa en el futuro.

tipo de operador

El operador typeof también se puede usar junto con el operador === para verificar si el tipo de una variable es igual a 'indefinido' o 'null':

1
2
3
4
5
6
7
let a;

if (typeof a === 'undefined') {
    console.log('Undefined variable');
} else if (typeof a === 'null') {
    console.log('Null-value');
}

Esto resulta en:

1
Undefined variable

Sin embargo, vale la pena señalar que si introduce una variable de referencia no existente, typeof está feliz de trabajar con ella, tratándola como indefinida:

1
2
3
4
5
if (typeof someVar === 'undefined') {
    console.log('Undefined variable');
} else if (typeof someVar === 'null') {
    console.log('Null-value');
}

Este código también da como resultado:

1
Undefined variable

Técnicamente hablando, some_var es una variable indefinida, ya que no tiene asignación. Por otro lado, esto puede hacer que typeof falle silenciosamente y señale que el valor entrante podría tener un problema, en lugar de generar un error que deja en claro que estás tratando con una variable que no existe.

Por ejemplo, imagina que cometiste un error tipográfico y accidentalmente ingresaste “algunavariable” en lugar de “algunaVariable” en la cláusula “si”:

1
2
3
4
5
6
7
8
9
let someVariable = 'Hello!'

if (typeof somevariable === 'undefined') {
    console.log('Undefined variable');
} else if (typeof somevariable === 'null') {
    console.log('Null-value');
} else {
    console.log(somevariable);
}

Aquí, estamos tratando de verificar si someVariable es null o undefined, y no lo es. Sin embargo, debido al error tipográfico, se marca somevariable y el resultado es:

1
Undefined variable

En un escenario más complejo, podría ser más difícil detectar este error tipográfico que en este. Tuvimos una falla silenciosa y podríamos pasar tiempo en un rastro falso. Por otro lado, usar solo los operadores == y === aquí nos habría alertado sobre la variable de referencia inexistente:

1
2
3
4
5
6
7
8
9
let someVariable = 'Hello!'

if (somevariable === 'undefined') {
    console.log('Undefined variable');
} else if (somevariable === 'null') {
    console.log('Null-value');
} else {
    console.log(somevariable);
}

Este código da como resultado:

1
error: Uncaught ReferenceError: somevariable is not defined

{.icon aria-hidden=“true”}

Nota: Esto no quiere decir que typeof sea inherentemente una mala elección, pero también implica esta implicación.

Uso de Lodash para verificar si la variable es nula, indefinida o nula {#usandolodash para verificar si la variable es nula, indefinida o nula}

Finalmente, puede optar por elegir bibliotecas externas además de los operadores integrados. Si bien la importación de una biblioteca externa no está justificada solo para realizar esta verificación, en cuyo caso, será mejor que solo use los operadores.

Sin embargo, Lodash ya está presente en muchos proyectos: es una biblioteca ampliamente utilizada, y cuando ya está presente, no hay pérdida de eficiencia con el uso de un par de métodos que proporciona. Lo más notable es que Lodash ofrece varios métodos útiles que comprueban si una variable es nula, indefinida o nula.

Instalar e importar Lodash

Puede importar Lodash a través de un CDN:

1
https://cdn.jsdelivr.net/npm/[correo electrónico protegido]/lodash.min.js

Importarlo localmente desde un archivo .js:

1
<script src="lodash.js"></script>

O instálelo a través de NPM:

1
$ npm install lodash

Además, se puede importar como un módulo ES6 o mediante la sintaxis require():

1
2
3
import _ from 'lodash';
// OR
const _ = require('lodash');

{.icon aria-hidden=“true”}

Nota: Es una convención nombrar la instancia de Lodash _, implícito en el nombre, sin embargo, no es necesario.

Ahora, podemos usar la biblioteca para verificar si una variable es nula, indefinida o nil, donde nil se refiere a las dos aflicciones anteriores. Se puede usar como la versión abreviada para verificar ambos:

1
2
3
4
5
let a = null;

console.log(_.isNull(a));       // true
console.log(_.isUndefined(a));  // false
console.log(_.isNil(a));        // true

Conclusión

En esta breve guía, hemos analizado cómo verificar si una variable es nula, indefinida o nil en JavaScript, usando los operadores ==, === y typeof, observando el pros y contras de cada enfoque. Finalmente, echamos un vistazo rápido al uso de Lodash, una popular biblioteca de utilidades de conveniencia para realizar las mismas comprobaciones.