In JavaScript, undefined
and null
are very different from each other. However, there are only a few similarities that may confuse a beginner to the language. This article aims to explain the similarities, differences, and usages with examples. Hope you find it useful.
What is undefined?
undefined
typically means a variable has been declared but has not yet been assigned a value.
let author;
console.log(author); // prints, undefined
In the above example, we have declared a variable author
but haven't assigned a value to it. Hence the variable author
is undefined
.
There is also a way to confirm it,
typeof(author); // prints "undefined"
When you access non-existent object properties, you get an undefined
.
let article = {'title': 'How to do something..'};
console.log(article.title); // prints, "How to do something.."
console.log(article.author); // prints, undefined
Watch out for: ReferenceError
In the case of undefined
, the variable must be declared. On the contrary, accessing a variable that's not been declared will cause a ReferenceError
.
console.log(rating);
If you haven't declared the rating variable and trying to access it like shown above, you will get an error,
⚠️ Confusion Alert: Please do not be confused with the phrase, is not defined
in the above error message. As explained, it doesn't mean undefined
.
What is null?
null
is an assignment value. You as a programmer may want to assign the value null
to a variable. It simply means the value is blank or non-existent.
let author = null;
console.log(null); // prints, null
Interestingly, when we use typeof
to check the type of null, it returns "object".
typeof(null); // prints, "object"
⚠️ Confusion Alert: This can be confusing as null
is a primitive value. This is probably one issue JavaScript is living with for a long now and we expect better reasoning for it.
Similarities
There are a couple of similarities between undefined
and null
.
- They both are primitive values. JavaScript has 7 primitive values,
- Number
- String
- Symbol
- Boolean
- BigInt
- undefined
- null.
All other values in JavaScript are objects(yes, including functions and arrays).
- They both are
falsey
values.
A falsy (sometimes written falsey) value is a value that is considered false when encountered in a Boolean context.
In JavaScript, there are 6 falsy values including undefined and null,
- false
- 0
- ""(empty string)
- NaN
- undefined
- null
Differences
Apart from the similarities mentioned above, undefined
and null
are way apart from each other. They are strictly not equal,
(undefined === null) // returns, false
(undefined !== null) // returns true
⚠️ Confusion Alert: However, they are loosely equal. Loose equality is performed using the ==
operator which compares two values after converting them to a common type. You should try avoiding it.
(undefined == null) // returns, true
Just remember, undefined
means no value assigned for a declared variable. Whereas, null
itself is a value that can be assigned to a variable, and null
signifies an empty/blank value.
How to check for undefined and null?
Use the strict equality operator(===
) to check if a variable is undefined
or has a null
value
let author ;
if (author === undefined) {
console.log(`author is undefined`);
} else {
// Do something
}
Similarly, for null
,
let author = null ;
if (author === null) {
console.log(`The value of author is null`);
} else {
// Do something
}
As both undefined
and null
are falsy values, you can do this as well. It will match both undefined and null.
if (!author) {
// Do something
}
Usage Cheatsheet: undefined and null
With the understanding, we have so far, here is the cheat-sheet for using undefined
and null
,
// Declared age but not assigned any value to it
let age;
// Right way to check
age === null; // returns, false
age === undefined; // returns, true
// Don't use this
age == null; // returns, true
age == undefined; // returns, true
// Declared name and assigned a null value
let name = null;
// Right way to check
name === null; // returns, true
name === undefined; // returns, false
// Don't use this
name == null; // returns, true
name == undefined; // returns, true
// type checking
typeof age; // 'undefined'
typeof name; // 'object'
// Create an object with one property where key is x and value is null
let obj = {x: null};
obj.x === null; // true
obj.x === undefined; // false
obj.y === null; // false
obj.y === undefined; // true
// Not possible
null = 'abcd';
// Possible, but don't do it
undefined = 'abcd';
In Summary
To summarize,
-
undefined
andnull
are primitive values and they represent falsy values. All the similarities between undefined and null end here. -
undefined
value is typically set by the JavaScript engine when a variable is declared but not assigned with any values. -
null
value is typically set by programmers when they want to assign an empty/blank value. - undefined and null are strictly not equal(!==).
- If you try to access the value of a variable that is not even declared, it will result in a
ReferenceError
.
Before we end...
Thank you for reading this far! You can @ me on Twitter (@tapasadhikary) with comments, or feel free to follow.
If it was useful to you, please Like/Share so that, it reaches others as well. You may also like,
- JavaScript: Equality comparison with ==, === and Object.is
- Understanding JavaScript Execution Context like never before
- JavaScript Scope Fundamentals with Tom and Jerry
That's all for now. See you again with my next article soon. Until then, please take good care of yourself.