How to Accurately Check if a Value is Undefined or Null in JavaScript

JavaScript, the backbone of the modern web, offers a plethora of functionalities. Among these, understanding the distinction between undefined and null is crucial. Let's delve into the nuances of these two values and the methods to identify them.

Grasping the Concepts of Undefined and Null

Undefined in JavaScript

In the realm of JavaScript, undefined is a primitive value symbolizing the lack of any value. When you declare a variable without assigning a value to it, it defaults to undefined.

let exampleVar;
console.log(exampleVar); // Output: undefined

Null in JavaScript

On the other hand, null is a deliberate representation of no value. It's a way to explicitly state that a variable shouldn't hold any value.

let exampleVar = null;
console.log(exampleVar); // Output: null

Methods to Identify Undefined and Null

Utilizing the Equality Operator (==)

The simplest method to ascertain if a value is undefined or null is the equality operator (==). It undergoes type coercion, meaning it aligns the types of operands before comparison. For undefined and null, they're deemed equal with this operator.

let exampleVar;

if (exampleVar == null) {
  console.log("The value is either undefined or null");
} else {
  console.log("The value has a defined value");
}

Employing the Identity Operator (===)

For a more specific check without type coercion, the identity operator (===) is your go-to. It ensures both value and type equality.

let exampleVar;

if (exampleVar === undefined) {
  console.log("The value is undefined");
} else if (exampleVar === null) {
  console.log("The value is null");
} else {
  console.log("The value is defined and not null");
}

The typeof Operator

The typeof operator is another tool in your arsenal to detect undefined. It returns a string denoting the type of its operand. For undefined, it yields the string "undefined".

let exampleVar;

if (typeof exampleVar === "undefined") {
  console.log("The value is undefined");
} else {
  console.log("The value is defined");
}

However, for null, typeof returns "object".

Crafting a Custom Utility Function

For frequent checks in your code, a custom utility function is beneficial.

function isNullOrUndefined(val) {
  return val === undefined || val === null;
}

let exampleVar;

if (isNullOrUndefined(exampleVar)) {
  console.log("The value is either undefined or null");
} else {
  console.log("The value is defined and not null");
}

Frequently Asked Queries

Can the logical OR (||) operator detect undefined or null?

Absolutely! The logical OR (||) operator can assign a default value if a variable is undefined or null. However, it will also default if the variable is another falsy value like false, 0, or "".

let exampleVar;
let result = exampleVar || "default value";
console.log(result); // Output: "default value"