Before ES2020, we(developers) mostly relied on the logical OR (||) operator for default values.
Let's say we want to set pageFromApi
const currentPage = pageFromApi || 1;
Issue
The || operator treats all falsy values as invalid:
- 0
- '' (empty string)
- false
- null
- undefined
EXAMPLE
// User is on page 0 (first page)
const pageFromApi = 0;
WRONG: page 0 gets replaced
const page = pageFromApi || 1;
console.log(page); // Output:1
Page 0 is valid, but || thinks it's falsy.
Nullish Coalescing (??)
The Nullish Coalescing Operator was introduced in ES2020 to solve this exact problem.
SYNTAX
const result = value ?? defaultValue;
EXAMPLE
// User is on page 0 (first page)
const pageFromApi = 0;
// CORRECT
const page = pageFromApi ?? 1;
console.log(page); // 0
Other Use Cases-
It also helps in code optimization.
// OR Logic
function getUsername(user) {
if (user.name === null || user.name === undefined) {
return "Guest";
} else {
return user.name;
}
}
// OUTPUT examples:
getUsername({ name: "Chhavi" }); // "Chhavi"
getUsername({ name: "" }); // ""
getUsername({ name: null }); // "Guest"
getUsername({}); // "Guest"
// Nullish Coalescing
function getUsername(user) {
return user.name ?? "Guest";
}
// OUTPUT examples:
getUsername({ name: "Chhavi" }); // "Chhavi"
getUsername({ name: "" }); // ""
getUsername({ name: null }); // "Guest"
getUsername({}); // "Guest"
Conclusion: same output but fewer lines of code.
When Should You Use ???
Nullish Coalescing(??):
- 0, false, or '' are valid values.
- Handling API responses or optional configs.
Logical OR:
-Any falsy value should trigger a default.
-You intentionally want aggressive fallback behavior.
----------------------------************-----------------------------
SOCIAL SHARE CARD GENERATOR