In JavaScript, null and undefined may look the same, but they are not. In this article, you will learn the differences and similarities between null and undefined in JavaScript, and when you should use each.
What is null?
There are a few important characteristics of null you should understand:
– Null is an empty or non-existent value: null is “nothing” – it is something that doesn’t exist – null is an assignment value, and it can be assigned to a variable as a representation of no value, like so:
let car = null;
console.log(car); // null
console.log(typeof car); // object
– The value of null must be assigned:
let car = null;
console.log(car); // null
– The data type of null (typeof) is an object. (You can consider this a bug – it should be null). For this reason, do not use typeof operator to detect a null value. Use the strict equality operator person === null.
let car = { brand: "BMW", year: 2020, color: "black"};
console.log(typeof car); // object
– Object can be emptied by setting it to null
let car = { brand: "BMW", year: 2020, color: "black"};
car = null; // value is null
What about undefined?
– In JavaScript, undefined means a variable has been declared but not yet assigned a value. When a variable doesn’t have a defined value, then the value is undefined. The type of variable is obviously undefined, too.
let car; // variable is declared, but the value is undefined, and type is undefined, too
– Any variable can be emptied by setting the value to undefined. The variable type will become undefined, too.
let car = { brand: "BMW", year: 2020, color: "black"};
car = undefined; // Now both value and type is undefined
– If you’re looking for non-existent properties in an object, you will receive undefined:
let car = {};
console.log(car.brand); // undefined
What is the difference between null and undefined?
Both null and undefined are equal in value – the value doesn’t exist.
However, null and undefined are different in type. Variable type of undefined is undefined, while a variable type of null is an object. Let’s take a look:
console.log(typeof undefined); // undefined
console.log(typeof null); // object
or like this:
console.log(null === undefined);
/* false, because with triple equality sign,
the variable type is checked too */
console.log(null == undefined);
/* true, because double equals test for loose equality
and JavaScript performs type coercion,
which means two values are first converted
to a common type and then they are compared */
What is similar between null and undefined?
In theory, there are two major fields in which null and undefined are similar.
Both null and undefined are two of the six falsy values. The remaining four are false (FYI, any other value in JavaScript is considered truthy): 0 (zero), ” ” (an empty string), NaN (Not A Number).
Both null and undefined are two of the six primitive values (FYI, All other values in JavaScript are objects (objects, functions, arrays, etc.) The remaining four are boolean, number, string, and symbol.
What about a practical difference between null and undefined?
Let’s take a look at a practical difference between null and undefined in the following code:
let logMsg = (msg = 'see you soon') => {
console.log(msg);
}
In the code above a function named logMsg was created. This function demands one parameter and sets the default of that parameter to ‘see you soon’ if the parameter isn’t supplied. Let’s take a look:
logMsg(); // see you soon
Let’s supply a parameter to overwrite this default:
logMsg('thanks for reading'); // thanks for reading
When you have default parameters, undefined will use the default while null will not:
logMsg(undefined); // see you soon
logMsg(null); // null
When coding, some people always avoid null, but that’s not necessary. There is a valid reason to use it.
When you define a variable that is meant to later hold an object, one could advise initializing the variable to null instead of undefined. When doing that, you can explicitly check for the value null and that way see if the variable has been filled with an object reference at a later time.
Only use null if you explicitly want to denote the value of a variable as having “no value”.
However, if possible avoid returning null or setting variables to null. This practice leads to the spread of null values and verifications for null. Instead of using null, try to use objects with default properties, or even throw errors.