• Register
110,660 points
12 7 5

In order to simultaneously compare if a variable is null and undefined, we use the following expression:

<script>
      if (variable == null) {
           // Do something
      }
</script>

Behind this simple expression many concepts are hidden, let's see them.

First of all, we must know the difference between an undefined variable and a null variable.

Undefined variable

When we declare a variable but don't assign a value to it, automatically this variable will be undefined .

<script>

      const name;
      console.log (name); // Show the value undefined by console

</script>

Null variable

In Javascript, the null value is a value that can be assigned to a variable representing the absence of value:

<script>

      const name = null;
      console.log (name); // Displays the null value by console

</script>

Also, it is very common when we try to access DOM elements. If these elements do not exist, the return value will be null :

<script>

      let variable = document.getElementById ('non-existent selector'); // Assuming there is no element whose id is non-existent selector ...
      console.log (variable); // ... Displays the null value by console

</script>

You should bear in mind that when you try to access a method or property of a null object, we will get an error. For example, if in the following example there is no element with the selectorInexistent identifier :

<script>

      let variable = document.getElementById ('non-existent selector'). value;

</script>

We would get the error Uncaught TypeError: Cannot read property 'value' of null .

Difference between null and undefined

Although for practical purposes a null variable and an undefined variable have similar implications, the data type of both variables is different:

<script>

      let variable1;
      let variable2 = document.getElementById ('non-existent selector')
      console.log (typeof variable1); // Show undefined
      console.log (typeof variable2); // Show object

</script>

Therefore, as the data type of an undefined variable and a null variable are different, if we take into account the data type in the comparison, it will tell us that the variables are different.

The difference between === and == is that with the triple equal we compare the type of data, while with the double equal we do not take into account the type of data in the comparison.

<script>

      let variable1;
      let variable2 = document.getElementById ('non-existent selector')
      console.log (variable1 === variable2); // Show false
      console.log (variable1 == variable2); // Show true

</script>

But our goal was to evaluate if a variable is undefined and null simultaneously. To do this, we can simply evaluate both types of data:

<script>

      if (variable === undefined || variable === null) {
           // do something
      }

</script>

Or even easier: not taking into account the type of data:

<script>

      if (variable == null) {
           // do something
      }

</script>

 

110,660 points
12 7 5