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?

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

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/javascript-null-vs-undefined-vs-empty/” title=”Javascript NULL vs UNDEFINED vs EMPTY” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

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;         // The funny part, 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?

EMPTY STRING

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

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

 

EMPTY ARRAY

var myVar = [, null, "", 123];
console.log(myVar[0], typeof myVar[0]); // undefined, undefined
console.log(myVar[1], typeof myVar[1]); // null, object
console.log(myVar[2], typeof myVar[2]); // nothing, string
console.log(myVar[3], typeof myVar[3]); // 123, number

Lastly, the confusing part. We can put undefined, null, and "" into arrays as well.

• An undefined array element is called an empty element.
• Not sure if people also call "" and null “empty array elements”, since they technically have a data type.

I will keep my fingers crossed and just call them “nothing values in the array”. Let the “experts” fight among themselves. 😆

 

 

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 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 table = document.createElement("table"),
    row, cell;
for (let r=0; r<10; r++) {
  row = table.insertRow();
  cell = row.insertCell();
  cell.innerHTML = "...";
}
console.log(row); // last row
console.log(cell); // last cell

undefined is simply a variable without an assigned value. So yes, it is what it is – An empty “placeholder or temporary 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.

 

 

 

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