Null and undefined are primitive values in JavaScript. JavaScript uses them to indicate the no value or absence of any value. The difference between Null & Undefined is subtle and confusing. In this tutorial let us explore them
Table of Contents
Null Vs Undefined
Null & undefined both point to no value or absence of any value. But there are a few differences between them
Definition
The value undefined means value is not assigned & you don’t know its value. It is an unintentional absence of value.
The value null indicates that you know that the field does not have a value. It is an intentional absence of value.
Take a look at the following person function which returns the person object. It has a property dateOfMarriage.
1 2 3 4 5 6 7 8 | function person(name,dateOfMarriage) { return { name: name, dateOfMarriage: dateOfMarriage } } |
The dateOfMarriage is not a required field. If the person is married, then the field will contain a value.
If the person is not married, then the dateOfMarriage field will not have any value. To represent no value we explicitly (or intentionally) set its value as null. That is how we use null. The absence of value is intentional. We need to set the value to null explicitly.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | let p = person("Colin Bower", null); //Null is set explicitly. Person is not married console.log(p); //{name: 'Colin Bower', dateOfMarriage: null} isMarried(p); // Not Married function person(name, dateOfMarriage) { return { name: name, dateOfMarriage: dateOfMarriage, }; } function isMarried(p) { if (p.dateOfMarriage === null) { console.log("not married"); } else { console.log("married"); } } |
To check whether the person is married or not we check if the value is null. If null he is married else not.
But what if no value is provided for dateOfMarriage as in the following example. In that case, JavaScript sets its value to undefined. When you encounter value undefined, it implies that you do not know whether the person is married or not.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | let p = person("Colin Bower"); //No Value is provided for dateOfMarriage console.log(p); //{name: 'Colin Bower', dateOfMarriage: undefined} isMarried(p); //Dont know function person(name, dateOfMarriage) { return { name: name, dateOfMarriage: dateOfMarriage, }; } function isMarried(p) { if (p.dateOfMarriage === null) { console.log("not married"); } else if (p.dateOfMarriage === undefined) { console.log("Dont know"); } else { console.log("married"); } } |
Note that JavaScript also allows us the set the value to undefined explicitly.
1 2 3 | let p = person("Colin Bower", undefined); |
Data Types
The data type of undefined value is undefined. The data type of null value is null.
But using typeof on a null variable shows it as an object. This is a very old bug in JavaScript
1 2 3 4 5 6 7 8 | let a let b=null console.log(typeof(a)) //undefined console.log(typeof(b)) //object |
Setting the value
JavaScript sets the value to undefined, when it expects a value but does not find one. But it never sets the variable to null. You need to set the value of null explicitly
For Example. JavaScript automatically sets the Uninitialized variable to undefined.
1 2 3 4 | let a console.log(a) //undefined |
The following are some of the instances where a variable gets the value undefined
- Uninitialized variable
- Function argument that has not been supplied
- The return value of functions that don’t return a value
- Non-existing object Property
- Non-existing array elements
Falsy
Both null & undefined is falsy value in JavaScript. i.e. when we use them in a boolean expression they are coerced to false.
1 2 3 4 5 6 7 | let a let b=null if (!a) console.log('false') //false if (!b) console.log('false') //false |
But they are neither false nor true.
1 2 3 4 5 6 7 8 9 10 | let a let b=null if (a==false) console.log('false') if (a==true) console.log('true') if (b==false) console.log('false') if (b==true) console.log('true') |
1 2 3 4 5 6 7 8 | console.log(true && null) //null console.log(true || null) //true console.log(true && undefined) //undefined console.log(true || undefined) //true |
Comparing Null with undefined
Comparing null with undefined results in different results depending on whether you use an equality checker (==) or strict equality checker (===)
null and undefined both represents no value hence equality checker (==) returns true. This is because the equality checker does not check for data type
1 2 3 | console.log(null == undefined) //true |
But strict equality checker returns false because it also checks for the data type.
1 2 3 4 | console.log(null === undefined) //false |
Arithmetic Operations
In arithmetic operations undefined is coerced to NaN.
1 2 3 4 5 6 7 | et a=10 let b console.log(a+b) //NaN console.log(Number(b)) //NaN |
Null is coerced to 0.
1 2 3 4 5 6 7 8 | let a=10 let b=null console.log(a+b) //10 console.log(Number(b)) //0 console.log(a*b) //0 |
TypeOf
The Typeof Operator returns the data type of the variable. It returns the data type of undefined correctly but returns “object” as the data type of null. This is a well-known bug in JavaScript
1 2 3 4 5 6 7 | let a let b=null console.log(typeof(a)) //undefined console.log(typeof(b)) //object |
Null literal & Undefined global variable
Null is literal in JavaScript. It is used to represent null. We use that to compare or assign null values to a variable.
1 2 3 | let a= null // |
undefined is a global variable, which contains the value undefined. It is the property of the global object. Hence you can access it using the window object (only in the browser) or using the globalThis property.
1 2 3 4 5 6 7 8 9 10 11 12 | console.log(undefined) //undefined console.log(typeof(undefined)) //undefined console.log(window.undefined) //undefined console.log(typeof(window.undefined)) //undefined console.log(globalThis.undefined) //undefined console.log(typeof(globalThis.undefined)) //undefined |
Since the ES5 version, the undefined is a non-configurable, non-writable & non-enumerable property. But that does not stop someone from overriding it inside a function.
1 2 3 4 5 6 7 8 9 | abc() function abc() { var undefined=10 console.log(undefined) //10 console.log(typeof(undefined)) //number } |
Undefined vs null. Which one to use
There are many approaches on how to use undefined & null. The simplest approach would be to use the null to indicate the no value. Use undefined to indicate that the variable is not yet assigned any value. In this use case, you should not assign undefined to any variable.
You can also use undefined to indicate the no value and never use null.
Read More
