In this blog, we'll explore the nullish coalescing operator ??
in JavaScript. We'll compare it with the logical OR operator ||
, discuss its precedence, and provide practical examples to help you understand its usage. Let's dive in!
Nullish Coalescing Operator ??
The nullish coalescing operator ??
is used to provide a default value when dealing with null
or undefined
. It returns the right-hand operand when the left-hand operand is null
or undefined
. Otherwise, it returns the left-hand operand.
Syntax:
result = value1 ?? value2;
Example:
let user = null;
let defaultUser = "Guest";
let currentUser = user ?? defaultUser;
console.log(currentUser); // Output: "Guest"
Explanation:
-
user
isnull
. - The
??
operator returnsdefaultUser
becauseuser
isnull
.
Comparison with ||
The logical OR operator ||
returns the first truthy value it encounters. This means it will return the right-hand operand if the left-hand operand is falsy (false
, 0
, ""
, null
, undefined
, NaN
).
Example:
let user = "";
let defaultUser = "Guest";
let currentUser = user || defaultUser;
console.log(currentUser); // Output: "Guest"
Explanation:
-
user
is an empty string""
(falsy). - The
||
operator returnsdefaultUser
becauseuser
is falsy.
Key Differences
-
??
: Only considersnull
andundefined
as falsy values. -
||
: Considers all falsy values (false
,0
,""
,null
,undefined
,NaN
).
Example:
let user = 0;
let defaultUser = "Guest";
let currentUser1 = user ?? defaultUser;
let currentUser2 = user || defaultUser;
console.log(currentUser1); // Output: 0
console.log(currentUser2); // Output: "Guest"
Explanation:
-
user
is0
(falsy for||
but not for??
). - The
??
operator returns0
becauseuser
is notnull
orundefined
. - The
||
operator returns"Guest"
becauseuser
is falsy.
Precedence
The nullish coalescing operator ??
has a lower precedence than most other operators, including the logical OR operator ||
. This means that expressions involving ??
are evaluated after expressions involving ||
.
Example:
let a = null;
let b = false;
let c = "Hello";
let result1 = a ?? b || c;
let result2 = a || b ?? c;
console.log(result1); // Output: "Hello"
console.log(result2); // Output: "Hello"
Explanation:
-
a ?? b
returnsfalse
becausea
isnull
andb
isfalse
. -
false || c
returns"Hello"
becausefalse
is falsy andc
is truthy. -
a || b
returnsfalse
becausea
isnull
andb
isfalse
. -
false ?? c
returns"Hello"
becausefalse
is notnull
orundefined
.
Practical Examples
Let's put everything together with some practical examples:
Using ??
for Default Values
function getUserName(user) {
return user.name ?? "Guest";
}
let user1 = { name: "Alice" };
let user2 = { age: 25 };
console.log(getUserName(user1)); // Output: "Alice"
console.log(getUserName(user2)); // Output: "Guest"
Explanation:
- If
user.name
isnull
orundefined
, the??
operator returns"Guest"
.
Using ||
for Default Values
function getUserName(user) {
return user.name || "Guest";
}
let user1 = { name: "" };
let user2 = { age: 25 };
console.log(getUserName(user1)); // Output: "Guest"
console.log(getUserName(user2)); // Output: "Guest"
Explanation:
- If
user.name
is falsy (e.g.,""
), the||
operator returns"Guest"
.
Summary
-
??
(Nullish Coalescing Operator): Returns the right-hand operand if the left-hand operand isnull
orundefined
. -
||
(Logical OR Operator): Returns the first truthy value it encounters. -
Precedence: The
??
operator has a lower precedence than the||
operator.
Conclusion
The nullish coalescing operator ??
is a powerful tool in JavaScript for providing default values when dealing with null
or undefined
. By understanding its differences from the logical OR operator ||
and its precedence, you'll be able to write more robust and error-free code. Keep practicing and exploring to deepen your understanding of the nullish coalescing operator in JavaScript.
Stay tuned for more in-depth blogs on JavaScript! Happy coding!
Top comments (0)