Undefined vs Null in Javascript
In JavaScript, there are two special types of values – undefined and null. It is crucial for a beginner to understand the differences between them (null and undefined) and when to use what. Let’s find out the details about undefined and null in this tutorial.Table of Contents
- Introduction to undefined and null values in Javascript
- Undefined vs Null - The differences
- Why is null an object?
- Other Related Concepts
Introduction to undefined and null values
Many times we often get confused on what the difference between UNDEFINED and NULL is. Simply put, undefined means a variable has been declared but has not yet been assigned a value. undefined is a type by itself (undefined). Unassigned variables are initialized by JavaScript with a default value of undefined.//demonstrating usage of undefined in javascript
var n;
console.log(n);
//undefined
On the other hand, null is an object. It can be assigned to a variable as a representation of no value. JavaScript never sets a value to null. That must be done programmatically.
For example, when you do not know the value initially you can assign a null to a variable. Let’s see an example.
//demonstrating usage of null in javascript
var n = null;
//later in your program
n = array.slice(0, 2);
//example
Here, in the example above, the variable n is given an initial value of null. Later, in the program, the value of the variable has been calculated from an expression.
Undefined vs null - the differences
1) Data types:
The data type of undefined is undefined whereas that of null is object. We can find the datatypes of both undefined and null using the typeof operator.typeof undefined;
//“undefined”
typeof null;
//“object”
2) In arithmetic operations
When used in arithmetic operations, undefined will result in NaN (not a number), whereas null will be converted to 0 behind the screens.// demonstration of arithmetic operations using undefined and null
undefined + 1;
// NaN
null + 1;
// 1
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
Since t is not assigned a value it is by default given a value of undefined. Hence the simple interest calculation results in NaN.
3) Undefined and null are falsy:
When used in conditional logic both undefined and null will return false.!!undefined;
//false
!!null;
//false
Here the boolean double negation operator aka the bang bang operator is used to check the boolean equivalent of a value.
//demonstrating that both undefined and null are falsy
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');
}
//both t and a are not defined with a value
As you can see here, both, variable t which is undefined and variable a which is see to null, return false and hence do not satisfy either of the if conditions and return the output "both t and a are not defined with a value".
4) Comparing undefined and null
Let’s see what happens when you compare undefined and null using the JavaScript equality operators.// comparing undefined and null
undefined == null;
//true
undefined === null;
//false
As you can see, when the equality operator is used it compares only the values. Both undefined and null are falsy by default. So == returns true.
But when we use the strict equality operator (===) which checks both type and value, since undefined and null are of different types (from the typeof Operator section), the strict equality operator returns false.
To understand more about the difference between abstract and strict equality operator head over to the tutorial over here.
Why is Null an object?
As promised, now let’s look as to why the type of null is an “object”. As it then indicates that null must be an object, which is not true. In fact, null is one of the primitive values in JavaScript.It is actually a bug in the language and unfortunately can’t be fixed that easily, as it will break the existing codebase. However, there is actually one logical explanation behind why null is an object in javascript.
In the initial version of JavaScript, values were stored 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 reads null, it considers the first 3 bits as type “object”. That is why typeof null returns “object”.
