WHAT IS NULL?

null is explicitly used to define nothing or a non-existent value.

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

Interestingly though, please take note that null has a data type of object, it is not “nothing”.

WHAT IS UNDEFINED?

undefined on the other hand, represents that a variable has been declared, but no value has been assigned to it.

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

As you can see here, undefined is… truly undefined. It does not even have a data type.

WHAT IS EMPTY?

Finally, empty simply means an empty string.

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

Yep, as you can expect, despite being an empty string with no data, it is still a string.

IS NULL EQUAL TO UNDEFINED?

First off, for you beginner code ninjas, you need to understand that there is a difference between == and ===.

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

As you can see, == only checks for similar values, while === does a strict type check as well. So when it comes to null and undefined:

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

Yes, null is “equal” to undefined in the sense they both have a “nothing” value, but they are of different data types. Interestingly though, when it comes comparing to an empty string:

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

CHECKING NULL, UNDEFINED, EMPTY

With the above explanation, you can rest well to safely use == to detect a null or undefined value:

var xxx;
if (xxx == null) {
  // xxx can either be null or undefined
  // Do something
}

We don’t really have to care so much, but if you want the foolproof way to detect all  null, undefined, and  empty:

var xxx = "";
if (xxx===undefined || xxx===null || xxx==="") {
  // Do something
}

WHEN TO USE NULL AND UNDEFINED

Let us use a simple AJAX call to the server as an example here:

// AJAX call
var data; // undefined
var xhr = new XMLHttpRequest();
xhr.open('POST', "server.php", true);
xhr.onload = function () {
  // SERVER RESPONSE - Do some processing
  console.log(this.response);
  data = this.response.
};
xhr.send();

// Further down the scripts, you use the data for more processing
if (data === undefined) {
  // No response receieved
} else {
  // Do something
}

Remember that null is an explicit nothing value –

• You may want to use a data variable to receive the response from the server.
• The server could give you a number, string, JSON, NULL, or even an empty string.
• A null value is still a legit response from the server.
• An undefined value will give you a good indication that there is no response from the server.

WHEN TO USE EMPTY

Well, to build a string, of course.

var data = ["John", "Jane", "Chicken", "Doge", "Cate"];
var list = "";
for (let dat of data) {
  list += "
" + dat + "
";
}
list = "
" + list + "
";
console.log(list);

IN A NUTSHELL

• null is used to explicitly define “nothing”.
• undefined refers to a value that has not been assigned.
• empty refers to an empty string.
• null is an object, empty is a string, undefined is undefined.
• It is true that null==undefined, but false when it comes to null===undefined.
• We can safely use xxx==null to check both null and undefined.
• Interestingly, an emptystring is totally not equals to null and undefined.

The post Explaining Javascript – NULL vs UNDEFINED vs EMPTY appeared first on Code Boxx.