NULL vs UNDEFINED vs EMPTY In Javascript – A Simple Guide

When it comes to defining “nothing” in Javascript, we have null, undefined, and empty. Just why do we need so many ways to define “nothing” in Javascript and what is the difference?

  • null is used to explicitly define “nothing”. For example, var foo = null;
  • undefined happens when we don’t assign a value to a variable. For example, var foo;
  • empty is an explicit way to define an empty string. For example, var foo = "";

That covers the basics, but just what are the differences? Read on to find out!

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

The Basics Comparison When to Use
Summary The End

 

THE BASICS

Let us start with some of the raw basics – Just what are NULL, UNDEFINED, and EMPTY in Javascript? They may look very similar at first, but they are all actually different creatures.

 

WHAT IS NULL?

var myVar = null;
console.log(myVar); // null
console.log(typeof myVar); // object

We use null to explicitly define “this has a value of nothing”. But interestingly, please take note that null has a data type of object.

 

WHAT IS UNDEFINED?

var myVar;
console.log(myVar); // undefined
myVar = undefined; // Yep, the funny part where we can also define undefined...
console.log(myVar); // undefined
console.log(typeof myVar); // undefined

This should be pretty self-explanatory, undefined simply represents a variable that no assigned value. As you can see here, undefined is… truly undefined. It does not even have a data type.

 

 

WHAT IS EMPTY?

var myVar = "";
console.log(myVar); // Nothing. Not even a white space, not even a line break.
console.log(typeof myVar); // string

Finally, "" simply means an empty string. Yep, this is still a string even though it is an empty one.

 

COMPARISON

Now that you have a basic idea of these 3 “nothing” values – Here comes the rather confusing part of comparing them.

 

EQUAL & TYPE CHECKING

var xxx = "123"; // This is a STRING 
var yyy = 123; // This is a NUMBER
console.log(xxx == yyy); // true
console.log(xxx === yyy); // false

A quick recap for the beginner code ninjas, there is a difference between == and ===.

  • == only checks for similar values, it does not care if the data type is different.
  • === does a strict data type check. For this to be true, both the values and data type must be the same.

 

COMPARING NULL, UNDEFINED, EMPTY

console.log(null == undefined); // true
console.log(null === undefined); // false
 
console.log("" == null); // false
console.log("" == undefined); // false
console.log("" === null); // false
console.log("" === undefined); // false

So when it comes to comparing null, undefined, and "":

  • null == undefined in the sense that they both have a “nothing” value.
  • null !== undefined because one is an object while the other is undefined.
  • The empty string is the “odd one” that will not match with null and undefined.

 

 

CHECKING FOR NULL, UNDEFINED, EMPTY

var demoA;
if (demoA == null) {
  alert("NULL or UNDEFINED");
}

var demoB = "";
if (demoB === null || demoB === undefined || demoB === "") {
  alert("NULL or UNDEFINED or EMPTY");
}

As with the above explanation, we can safely use == to detect either a null or undefined value. But the foolproof way is to use === to check for the “exact nothing value”.

 

WHEN TO USE?

Now that you have the ninja knowledge of all the 3 nothing values, let us go into a few possible examples on when we should use each.

 

WHEN TO USE NULL

var members = ["Jon", "Joy", "Joe", null];

Remember that null is assigned to explicitly state “nothing” or “absent”. So let’s say that we have a simple chat application in Javascript, and we allow up to 4 members in a chat room. If there are only 3 members, we can use null to indicate a “missing” fourth member or an open slot for chatting.

 

WHEN TO USE UNDEFINED

var result;
var xhr = new XMLHttpRequest();
xhr.open("POST", "SERVER.PHP");
xhr.onload = function () {
  result = this.response=="true" ? 123 : 456 ;
  // More processing
};
xhr.send();

undefined is simply a variable without an assigned value. So yes, it is what it is – An empty “placeholder variable”.

 

WHEN TO USE EMPTY STRING

var data = ["John", "Jane", "Chicken", "Doge", "Cate"];
var list = "";
for (let dat of data) {
  list += "<li>" + dat + "</li>";
}
list = "<ul>" + list + "</ul>";

Empty strings are very handy when it comes to building content strings. For example, building an HTML list or table.

 

 

USEFUL BITS & LINKS

That’s it for all the examples and explanations. Let us now wrap it up into a few simple points.

 

THE SUMMARY

NULL UNDEFINED EMPTY
USED FOR Explicitly define “nothing” or “absent”. A variable without an assigned value. An empty string.
EXAMPLE var members = ["Jon", "Joy", null]; var result; var table = "";
DATA TYPE Object. Undefined. String.
COMPARISON null == undefined
null !== undefined
null != ""
null !== ""
undefined == null
undefined !== null
undefined != ""
undefined !== ""
"" != null
"" !== null
"" != undefined
"" !== undefined

 

INFOGRAPHIC CHEAT SHEET

NULL vs UNDEFINED vs EMPTY in Javascript (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “NULL vs UNDEFINED vs EMPTY In Javascript – A Simple Guide”

Leave a Comment

Your email address will not be published. Required fields are marked *