How to check undefined null value in Javascript ?

how to check undefined value in javascript

One of the most basic problems encountered by beginners is checking whether the object/ variable value is undefined or null and then proceeding with some logic accordingly.

Many times you are given APIs in which the response is not constant. In such situation, you need to check for undefined and null values.

Before jumping onto the important part. Let's first understand 

- What are False Values in Javascript? 

- How many False Values are there in Javascript?


What are Falsy Values in Javascript?


falsy (sometimes written falsey) value is a value that is considered false when encountered in a Boolean context. - Mozilla Developer Network

Falsy values when coerced in Javascript's Engine into a boolean value evaluate as false, but they are not necessarily equal to each other.
 

7 Falsy Values in Javascript - 

  • null (keyword)
  • undefined (keyword)
  • NaN (number)
  • 0n (BigInt)
  • string ("") (equivalent to '' or ``)
  • 0 (number)
  • false (boolean)

Now that we know Falsy values we can jump onto are the main topic of handling undefined and null value in javascript.



If Else (Most Common)  Method


This one is the easiest and the lengthiest at the same time. 

In this method, we have created a function checkUndefinedNull which checks the undefined and null. 


function checkUndefinedNull(val){
  return (val === undefined || val == null) ? true : false;
}



Using Logical OR Operator ( || ) ( Pipe)


Yes, you read it right. We can check for null and undefined using Logical Operator. Today also this method is widely implemented because of its ease of use. 

Let's check this in the next example.


var _value = ""; 
console.log(_value || "empty string is a falsy value")
Output -> "empty string is a falsy value"

var _value = null;
console.log(_value || "null is a falsy value")
Output -> "null is a falsy value"

var _value;
console.log(_value || "undefined is a falsy value")
Output -> "undefined is a falsy value"

// We can chain false values as well
var _value;
var _secondValue = 0;
console.log(_value || _secondValue || "Both undefined and 0 are falsy value")
Output -> "Both undefined and 0 are falsy value"

Disadvantage 

All the falsy values are checked. It can create an issue when we want to check only undefined and null like 0 can be returned in normal use case also.

To overcome this issue Nullish Coalescing Operator ( ?? ) was introduced in ECMA 6. 

Now let's understand how can we check undefined and null using Nullish Coalescing Operator and its benefits over Pipe/ Logical Or Operator.


Nullish Coalescing Operator ( ?? ) Method


This method was introduced in ECMA 2020 to make the life of developers hell lot easier. I consider this a groundbreaking feature of ECMA 2020.



var _value = ""; 
console.log(_value || "empty string is a falsy value") 
Output -> "empty string is a falsy value"
console.log(_value ?? "empty string is a falsy value")
Output -> ""

var _value = null;
console.log(_value || "null is a falsy value")
Output -> "null is a falsy value"
console.log(_value ?? "null is a falsy value")
Output -> "null is a falsy value"

var _value;
console.log(_value || "undefined is a falsy value")
Output -> "undefined is a falsy value"
console.log(_value ?? "null is a falsy value")
Output -> "undefined is a falsy value"

// We can chain false values as well
var _value;
var _secondValue = 0;
console.log(_value || _secondValue || "Both undefined and 0 are falsy value")
Output -> "Both undefined and 0 are falsy value"
console.log(_value ?? _secondValue ?? "Both undefined and 0 are falsy value")
Output -> 0




Thanks for reading, please feel free to contact me. 

Click to visit our Facebook Page

Click to join our Telegram Channel

Click to join our Facebook Group


You can check out our most active blogs as well.







Post a Comment

0 Comments