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!

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 is null.
• The ?? operator returns defaultUser because user is null.

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 returns defaultUser because user is falsy.

Key Differences

• ??: Only considers null and undefined 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 is 0 (falsy for || but not for ??).
• The ?? operator returns 0 because user is not null or undefined.
• The || operator returns "Guest" because user 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 returns false because a is null and b is false.
• false || c returns "Hello" because false is falsy and c is truthy.
• a || b returns false because a is null and b is false.
• false ?? c returns "Hello" because false is not null or undefined.

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 is null or undefined, 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 is null or undefined.
• || (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!

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!