Get my new tutorials in your inbox every week

JavaScript Undefined vs Null – in Details

JavaScript undefined vs null

JavaScript has two special types of values – undefined and null. Understanding the differences between them and when to use what is very important for a beginner to the JavaScript language. Let’s find out the details about undefined and null in this tutorial.

The Definition

undefined – is when a variable has been defined but not assigned any value. Yes, that’s possible in JavaScript. Let’s see an example,

var n;
console.log(n); //undefined

Here, I have declared a variable named n. But I have not given it any value. So by default, it will contain a value of undefined.

We can check that by printing a log.

null – is a special value in JavaScript that can be assigned as an initial value to a variable. For example, when you do not know the value initially you can assign a null to a variable. Let’s see an example,

var n = null;
//later in your program
n = array.slice(0,2); // example

Here, in the example above, I have created a variable named n and given it an initial value of null. Later, in my program, I have the value calculated from an expression.

Differences – undefined vs null

Here are some basic differences:

1. Data Types

The data type of undefined is undefined. Whereas the type of null is object.

You can use the typeof operator to find the data type of a JavaScript variable.

typeof undefined; // “undefined”
typeof null; //“object”

Please note that the result of using the typeof operator is a string. So you get the data type in a string format.

Here’s a screenshot from the ECMA-262 documentation (draft of the standardized JavaScript language) that describes the typeof operator results. See the table.

javascript typeof operator values

Using the typeof operator, you can use comparison to write conditional code logic. Something like this,

var n;
if(typeof n !== 'undefined') {
  //if n is defined then do something...
} else {
  //n is undefined...

Why is typeof null is an “object”? – I have tried to answer that in the last section of this article.

2. When used in arithmetic operations

undefined when used in an arithmetic operation will result in NaN(Not a Number). Whereas null is converted to 0 behind the scenes.

undefined + 1; // NaN
null + 1; // 1

Let’s see another example,

var p = 10000,  //principal amount
    r=14, //rate of interest
    t; //time period. 
//calculate simple interest
function simpleInterest() {
  var si = (p * r * t) / 100;
  return si;
simpleInterest(); //NaN

In this example, the time period variable is undefined.

Comparing undefined and null

Let’s see what happens when you compare undefined and null using the JavaScript equality operators.

undefined == null; //true
undefined === null; //false

As you can see, when the equality operator is used it compares only the values. Both of undefined and null are falsy by default. So == returns true.

But when we use the strict equality operator (===) it checks both type and value. From the typeof operator, we figured out that the type of undefined and null are different. Hence it returns false.

Both undefined and null are falsy

Both are falsy values by the way. When used in conditional logic both will return false.

!!undefined; //false
!!null; //false

Here, I am using the JavaScript double negation (!!) or the Bang Bang operator to check the Boolean equivalent of a value.

var t, a = null;
if(t) {
  console.log('t is defined');
} else if(a) {
  console.log('a is defined');
} else {
  console.log('both t and a are not defined with a value');

Why typeof null is an “object”?

That’s a pretty weird thing in JavaScript. The type of null is an “object”, which indicates that it must be an object. But that’s not true. In fact, null is one of the primitive values in JavaScript.

This is actually a bug in the language and unfortunately can’t be fixed that easily, because it will break existing codebase. There are millions of sites out there which run code that may have been written years and years ago, and will possibly never be touched again.

In fact, it has been there from the first version of JavaScript that was written and released back in May 1995 with the name Mocha. This is what Brendon Eich (creator of JavaScript) quoted regarding this anomaly.

We have reason to believe typeof null === “object” is a bug that could bite real content, from our spidering of the web. It might be best to leave typeof utterly alone and deprecate it, but I’m still in favor of the null bug-fix.

But there have been proposals about correcting this bug and having typeof return “null” for null values. The original links to the proposals are unfortunately broken when I tried to open them.

But I found this quote from Douglas Crockford (who is a JavaScript Guru & part of the ECMA-262 working group) which says that it is a difficult bug to fix.

I think it is too late to fix typeof. The change proposed for typeof null will break existing code.

Here’s a logical reason behind typeof null returning “object”.

In the initial version of JavaScript, values were storied in 32 bit units. The first 3 bits represented the data type tag followed by the remaining bits that represented the value.

For all objects it was 000 as the type tag bits. null was considered to be a special value in JavaScript from its very first version. null was a representation of the null pointer. However, there were no pointers in JavaScript like C. So null simply meant nothing or void and was represented by all 0’s. Hence all its 32 bits were 0’s. So whenever the JavaScrit interpreter read null, it considered the first 3 bits as type “object”. That is why typeof null returns “object”.

What does the MDN docs say though? – type of null is not “null” for legacy reasons. Link

Here’s a nice write up on the history of typeof null. You may follow the article for an in-depth explanation.

I had the opportunity to speak on the Weird History of JavaScript and its many weird facts at an event in Dubai in 2019. Here are the slides. You can check it out if interested.

history of JavaScript

Write a Comment

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