How to check for null, undefined, or blank variables in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to check for null, undefined, or blank variables in JavaScript. There is no particular built-in library function to check whether a variable is undefined or null. Still, we can use some operators such as typeof operator and equality operator to check the variable.

Before we proceed with the tutorial, let’s clear the doubt between the null, undefined, or blank variable.

Null VS Undefined

We can say that the Null and undefined variables are almost the same but not identical.

Undefined variable − It is a variable not declared in the program, and the compiler doesn’t know anything about that variable.
Null variable − It is a declared variable, but we haven’t assigned any value to it.

The type of the Null variable is an object, and when we don’t assign any value to the Null variable, it automatically assigns the ‘undefined’ value. Also, we can intentionally assign the null value to the variable to keep it empty, also called the null variable. Below, users can see that value of null and undefined is the same, but the data type is not the same.

let result = null == undefined // returns true
let result = null === undefined // returns false

The blank variable is identical to Null variable which doesn’t contains any value.

Check for null variable using strict equality operator (===)

In this method, we will use the strict equality operator to check whether a variable is null, empty, or undefined. If we don’t assign the value to the variable while declaring, the JavaScript compiler assigns it to the ‘undefined’ value. So, we can check that if the variable contains the null value or undefined value, it means we have a null variable.

Syntax

if (variable == null || variable === 'undefined') {
   
   // variable is undefined or null
}

Example

In the below example, we have declared two variables. In the first variable, we have assigned the null value, and in another variable, we haven’t assigned the value. We are checking if it is null or not using the above method, and users can see the result in the output.


<html>
<body>
   <h2>Check for variable is undefined or null using <i>strict equality operator</i></h2>
   <h4>output for let var1 = null;</h4>
   <div id = "output1"></div>
   <h4>output for let var1;</h4>
   <div id = "output2"> </div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      function checkVar( variable ) {
         if (variable == null || variable === 'undefined') {
            return " varaible is undefined or null; "
         } else {
            return " variable is properly defined and its value is " + variable;
         }
      }
      let var1 = null;
      let var2;
      output1.innerHTML = checkVar(var1);
      output2.innerHTML = checkVar(var2);
   </script>
</body>
</html>

Using the typeof operator

When the variable is undefined, it means the variable is not declared. Users can’t use it in the ‘if-else’ conditional statement like the above method. To check the type of the undeclared variables, we can use the typeof operator. The typeof operator takes the variable as an operand and returns the variable type. As the operand of typeof, we can use undeclared variables also.

Syntax

let type = typeof ( variable ) // returns ‘undefined’ for undeclare variable.

Example

In the example below, we have created a single variable and assigned a null value. We are using the typeof operator with a null valued variable, which returns the ‘object.’ Also, we are using the typeof operator with the second variable, which is not declared; it returns the ‘undefined.’


<html>
<head>
   <title>Check for variable is undefined or null in JavaScript.</title>
</head>
<body>
   <h2>Check for variable is undefined or using <i> typeof operator</i>.
   </h2>
   <h4>output for let var1 = null;</h4>
   <div id = "output1"> </div>
   <h4>output for undeclared variable;</h4>
   <div id = "output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let var1 = null;
      output1.innerHTML = typeof ( var1 );
      output2.innerHTML = typeof ( var2 ); // checking the type of undeclared variable
   </script>
</body>
</html>

In the above output, users can see that the typeof operator returns the object data type for the null variable.

We have learned to check whether a variable is undefined or null. The difference between null and undefined variables is the data type of both variables; the null variable is of object type and the undefined is of undefined data type.

If users are checking for the null variable, they can use the first approach using the if-else conditional statement. To check for the undeclared variable, users must use the second approach. Otherwise, JavaScript code gives an error when we use the undeclared variable.