Variables nulas o indefinidas en javascript

Para poder comparar simultáneamente si una variable es nula e indefinida, usamos la siguiente expresión:

<script>
     if(variable == null){
          // Hacer algo
     }
</script>

Detras de esta simple expresión se esconden bastantes conceptos, vamos ha verlos.

Antes de nada, debemos conocer la diferencia entre una variable indefinida y una variable nula.

Variable indefinida

Cuando declaramos una variable pero no le asignamos un valor, automáticamente esta variable será undefined.

<script>

     const nombre;
     console.log(nombre); // Muestra por consola el valor undefined

</script>

Variable nula

En Javascript, el valor null es un valor que puede ser asignado a una variable en representación de la ausencia de valor:

<script>

     const nombre = null;
     console.log(nombre); // Muestra por consola el valor null

</script>

Además, es muy común cuando intentamos acceder a elementos del DOM. Si dichos elementos no existen, el valor devuelto será null:

<script>

     let variable= document.getElementById('selectorInexistente'); //     Suponiendo que no hay ningún elemento cuya id sea selectorInexistente... 
     console.log(variable); // ... Muestra por consola el valor null

</script>

Debes tener en cuentra que cuando intentas acceder a un método o propiedad de un objeto nulo, obtendremos un error. Por ejemplo, si en el siguiente ejemplo no existise ningún elemento con el identificador selectorInexistente:

<script>     

     let variable = document.getElementById('selectorInexistente').value;

</script>

Obtendríamos el error Uncaught TypeError: Cannot read property ‘value’ of null.

Diferencia entre null y undefined

Aunque a efectos prácticos una variable nula y una variable indefinida tienen implicaciones similares, el tipo de dato de ambas variables es diferente:

<script>

     let variable1;
     let variable2 = document.getElementById('selectorInexistente')
     console.log(typeof variable1); // Muestra undefined
     console.log(typeof variable2); // Muestra object

</script>

Por tanto, como el tipo de dato de una variable indefinida y de una variable nula son diferentes, si en la comparación tenemos en cuenta el tipo de dato, nos dirá que las variables son diferentes.

La diferencia entre === y == es que con el triple igual comparamos el tipo de dato, mientras que con el doble igual no tenemos en cuenta el tipo de dato en la comparación.

<script>

     let variable1;
     let variable2 = document.getElementById('selectorInexistente')
     console.log(variable1 === variable2); // Muestra false
     console.log(variable1 == variable2); // Muestra true

</script>

Pero nuestro objetivo era evaluar si una variable es indefinida y nula simultáneamente. Para ello, podemos simplemente evaluar ambos tipos de dato:

<script>

     if (variable === undefined || variable === null) {
          // hacer algo
     }

</script>

O más fácil aún: no tener en cuenta el tipo de dato:

<script>

     if (variable == null) {
          // hacer algo
     }

</script>