Mastering JavaScript: Easy Ways to Detect Undefined or Null

Here we learn how to check if a value is defined or null in JavaScript, and how equality works with these values.

JavaScript Null vs Undefined

  Mastering JavaScript: Easy Ways to Detect Undefined or Null  1  

Definitions

What is undefined? The undefined is a variable that is declared but not assigned any value yet. It means you declare a variable but you have not assigned a value to it. In that case it is undefined.
let a;
console.log(a); // undefined
  Mastering JavaScript: Easy Ways to Detect Undefined or Null  2   What is null? The null is a value that intentionally represents no value or empty. If you are having a variable and you do not want to leave it unassigned, you can intentionally assign no value to it.
let a = null;
console.log(a); // null
  Mastering JavaScript: Easy Ways to Detect Undefined or Null  4   This means that the variable is not having any value, but it is not undefined either. It is having a null value inside of it, which means it is empty.

Checking values

You can check for null explicitly with a strict comparison. This confirms the variable holds null and is not undefined.
let a = null;

if (a === null) {
  console.log('null is printed');
}
  Mastering JavaScript: Easy Ways to Detect Undefined or Null  6   Quick steps to try this yourself: Declare a variable without assigning a value, log it, and see undefined. Assign null to the same variable, log it, and see null. Use if (a === null) to check for an intentional empty value. Use the console to observe the output for each case.   Mastering JavaScript: Easy Ways to Detect Undefined or Null  9     Mastering JavaScript: Easy Ways to Detect Undefined or Null  7     Mastering JavaScript: Easy Ways to Detect Undefined or Null  5     Mastering JavaScript: Easy Ways to Detect Undefined or Null  3   Read More: typeof examples

Equality operators

  Mastering JavaScript: Easy Ways to Detect Undefined or Null  8   There are two different ways of comparison. Using double equals is a loose comparison. Using triple equals is a strict comparison. The loose equality treats null and undefined as equal. With loose comparison, a variable set to null will compare equal to undefined.
let a = null;

if (a == undefined) {
  console.log('null is printed'); // printed, because null == undefined
}
  Mastering JavaScript: Easy Ways to Detect Undefined or Null  10   With strict comparison, null and undefined are different. Using triple equals will not treat them as equal.
let a = null;

if (a === undefined) {
  console.log('will not print'); // not printed, because null !== undefined
}
  Mastering JavaScript: Easy Ways to Detect Undefined or Null  11   This is how you work with null and undefined in JavaScript. Read More: break/continue

Real-world use cases

  Mastering JavaScript: Easy Ways to Detect Undefined or Null  12   If you want to check that your API response is empty or not, use null and undefined appropriately. If you want to check that the user input is missing or not, a strict check against null can help you confirm an intentionally empty value. If you want to handle optional properties in objects, guard your code by checking for undefined or comparing strictly to null when you intentionally store an empty state. Read More: prototype chain

Final thoughts

Undefined means a variable is declared but not assigned yet. Null is an intentional empty value. Loose equality treats null and undefined as equal, while strict equality distinguishes them. Use strict checks to avoid confusion and make your intent clear.

Leave a Comment