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
Null & undefined both point to no value or absence of any value. But there are a few differences between them
The value undefined means value is not assigned & you don’t know its value. It is an unintentional absence of value.
he 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..
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.
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.
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.
let p = person("Colin Bower", undefined);
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
let a
let b=null
console.log(typeof(a)) //undefined
console.log(typeof(b)) //object
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.
let a
console.log(a) //undefined
The following are some of the instances where a variable gets the value undefined
Both null & undefined is falsy value in JavaScript. i.e. when we use them in a boolean expression they are coerced to false.
let a
let b=null
if (!a) console.log('false') //false
if (!b) console.log('false') //false
But they are neither false nor true.
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')
console.log(true && null) //null
console.log(true || null) //true
console.log(true && undefined) //undefined
console.log(true || undefined) //true
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
console.log(null == undefined) //true
But strict equality checker returns false because it also checks for the data type.
console.log(null === undefined) //false
In arithmetic operations undefined is coerced to NaN.
let a=10
let b
console.log(a+b) //NaN
console.log(Number(b)) //NaN
Null is coerced to 0.
let a=10
let b=null
console.log(a+b) //10
console.log(Number(b)) //0
console.log(a*b) //0
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.
let a
let b=null
console.log(typeof(a)) //undefined
console.log(typeof(b)) //object
let a=10
let b=null
console.log(a+b) //10
console.log(Number(b)) //0
console.log(a*b) //0
Null is literal in JavaScript. It is used to represent null. We use that to compare or assign null values to a variable.
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.
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.
abc()
function abc() {
var undefined=10
console.log(undefined) //10
console.log(typeof(undefined)) //number
}
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
