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>