Home  >  Article  >  Web Front-end  >  Nullish Coalescing Operator `??` in JavaScript

Nullish Coalescing Operator `??` in JavaScript

Barbara Streisand
Barbara StreisandOriginal
2024-09-19 16:31:09493browse

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 (false0""nullundefinedNaN).

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn