Home >Web Front-end >JS Tutorial >Nullish Coalescing Operator `??` in JavaScript
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!
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:
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:
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:
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:
Let's put everything together with some practical examples:
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:
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:
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!
The above is the detailed content of Nullish Coalescing Operator `??` in JavaScript. For more information, please follow other related articles on the PHP Chinese website!