The null in JavaScript is a special value & also a data type. The value null represents the intentional absence of any object value. It is one of JavaScript’s primitive values and is treated as falsy for boolean operations. The value of null is represented in JavaScript using the literal null.
Table of Contents
What is Null in JavaScript
The value null represents the intentional absence of any object value. It represents nothing or no value. null means we know that the variable does not have any value.
JavaScript also has an undefined value and it means the value is not assigned or we do not know its value.
Take an example of the following person function which returns the person object. It has two fields. name & dateOfMarriage. The name is a required field because everyone has one. But the dateOfMarriage is optional because not everyone is married.
1 2 3 4 5 6 7 8 | function person(name,dateOfMarriage) { return { name: name, dateOfMarriage: dateOfMarriage } } |
Now, what value do you store in dateOfMarriage if the person is not married ?. We explicitly set its value to null to indicate there is no value, which implies that the person is not married.
1 2 3 4 | console.log(person("Colin Bower", null)) //Null is set explicitly. Person is not married //{name: 'Colin Bower', dateOfMarriage: null} |
What if someone invokes the function without providing a name or empty name?. In this case, you should return null indicating that there is no person (or the better option is to throw an error).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function person(name, dateOfMarriage) { if (name===undefined || name==="") return null return { name: name, dateOfMarriage: dateOfMarriage, } } console.log(person()) //null console.log(person("")) //null |
Assigning Null
JavaScript does not assign null to any variable. But we can do it by assigning literal null to a variable
1 2 3 4 | let a = null console.log(a) // null |
In the above example in line 1 (let a= null), we assign null value to the variable a. Here null is literal and represents the value null.
A literal is a notation for representing a fixed value in the source code. For Example, 1 is literal, because it represents the number 1. “hello” is literal because it represents the string “hello”. Similarly null is literal because it represents the value null.
Checking for null
You can check for null using the strict equality checker and comparing it against the null literal
1 2 3 4 5 6 7 | let a=null console.log(a === null) // => true |
Use the strict equality checker because the loose equality checker returns true even when the variable is undefined.
1 2 3 4 5 6 | let a // a is undefined console.log(a) //undefined console.log(a == null) // => true |
null is falsy
The null along with false, 0, '', undefined, NaN is considered as falsy values in JavaScript. Whenever JavaScript encounters a null in an expression it implicitly coerces it to false
1 2 3 4 5 6 7 8 9 10 11 | let a =null if (a) { console.log("true") //this code does not execute } if (!a) { console.log("false") //false } |
But that does not mean that null is false. It is neither false nor true. null does not have any value
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let a =null //loose equality check console.log(a==false) //false console.log(a==true) //false //Strict equality check console.log(a===false) //false console.log(a===true) //false |
The undefined in JavaScript is also treated as no value. Hence running a loose equality checker between them will return true
1 2 3 4 | let a console.log(a==null) //true because both null & undefined is treated as no value |
That is the reason why you should use the strict equality checker which also checks the data type.
1 2 3 4 | let a console.log(a===null) //false because Becuase types are different |
typeof null is object
Although the data type of null value is null, the TypeOf operator incorrectly returns “object”. This is a very old bug in JavaScript. The bug is not fixed as it will break many existing codes.
1 2 3 4 | let a = null console.log(typeof(a)) //object |
Null pitfalls
Accessing a null value can result in surprises if you are not careful. The following are some of the
When used in a numeric expression, JavaScript coerces null to 0
1 2 3 4 5 6 | console.log(null+10) //10 console.log(null*10) // 0 console.log(null+null) //0 console.log(Number(null)) //0 |
While in a string expression JavaScript coerces it to “null”
1 2 3 | console.log(null+"10") //null10 |
False if we use it in a boolean expression.
1 2 3 4 5 6 7 8 9 10 11 | let a =null if (a) { console.log("true") //this code does not execute } if (!a) { console.log("false") //false } |
If we try to access the property of a null, then it will throw the Cannot read property ‘value’ of null error.
1 2 3 4 | let a=null console.log(a.name) // Cannot read properties of null (reading 'name') |
You can make use of optional chaining (?) with nullish coalescing (??) to get around it
1 2 3 4 | let a=null console.log(a?.name ?? "Not found") // Not found |
Reference
Read More
