Logical OR (||) vs Nullish Coalescing Operator (??) in JavaScript

Logical OR (||) vs Nullish Coalescing Operator (??) in JavaScript

In JavaScript, both the Logical OR (||) operator and the Nullish Coalescing Operator (??) are used for providing default values. While they might seem similar at first glance, they differ in their behavior and have distinct use cases. Understanding their differences is crucial for writing clean and efficient JavaScript code.

Introduction

Logical OR (||) Operator

The Logical OR (||) operator evaluates to its first truthy operand or the last operand if all operands are falsy. It is often used to provide a default value if a variable is undefined or null.

// Example: Using || to set a default value
  let name = ""; 
  let greeting = `Hello, ${name || "World"}!`;
  console.log(greeting); // Output: Hello, World!

Nullish Coalescing Operator (??)

Introduced in ES2020, the Nullish Coalescing Operator (??) evaluates to its first operand if it is not null or undefined. Otherwise, it evaluates to its second operand.

// Example: Using ?? to set a default value
  let age = null;
  let message = `Your age is ${age ?? "unknown"}`;
  console.log(message); // Output: Your age is unknown

Key Differences

The fundamental difference between the Logical OR (||) and the Nullish Coalescing Operator (??) lies in their truthiness checks. The || operator considers any falsy value, including 0, empty strings, and NaN, as a condition to evaluate the second operand. In contrast, the ?? operator only considers null and undefined as falsy values.

Feature Logical OR (||) Nullish Coalescing Operator (??) Falsy Values null, undefined, 0, “”, NaN, false null, undefined Behavior Evaluates to the first truthy operand or the last operand if all are falsy. Evaluates to the first operand if it is not null or undefined, otherwise evaluates to the second operand. Use Case Default value assignment for various falsy values. Default value assignment specifically for null or undefined.

Examples

Example 1: Default Value for a Variable

Logical OR (||)

let quantity = 0; // Falsy value (0)
    let total = quantity || 10; // total = 10
    console.log(total); // Output: 10

Nullish Coalescing Operator (??)

let quantity = 0; // Falsy value (0)
    let total = quantity ?? 10; // total = 0
    console.log(total); // Output: 0

In this example, the Logical OR operator treats 0 as a falsy value and assigns 10 to the ‘total’ variable. However, the Nullish Coalescing Operator recognizes 0 as a valid value and assigns it to the ‘total’ variable.

Example 2: Default Value for an Object Property

Logical OR (||)

const user = { name: "John", age: "" }; // Empty string is falsy
    let age = user.age || 30; // age = 30
    console.log(age); // Output: 30

Nullish Coalescing Operator (??)

const user = { name: "John", age: "" }; // Empty string is falsy
    let age = user.age ?? 30; // age = ""
    console.log(age); // Output: ""

Here, the Logical OR operator sets ‘age’ to 30 because the empty string is considered falsy. The Nullish Coalescing Operator, on the other hand, respects the empty string as a valid value and doesn’t replace it with 30.

Performance Considerations and Best Practices

In general, both the Logical OR (||) and Nullish Coalescing Operator (??) are efficient and have minimal performance impact. The choice between them depends on the specific context and desired behavior.

Best Practices

• **Use the Nullish Coalescing Operator (??) when you want to provide a default value only for null or undefined values.** This ensures that other falsy values are treated as intended.
• **Use the Logical OR (||) operator when you want to provide a default value for any falsy value.** This can be useful in scenarios where you want to handle 0, empty strings, or NaN as falsy values.
• **Avoid unnecessary nesting of operators.** Keep your code readable and maintainable.

Conclusion

The Logical OR (||) and Nullish Coalescing Operator (??) are powerful tools for providing default values in JavaScript. Understanding their differences is essential for writing robust and maintainable code. The Nullish Coalescing Operator is ideal for scenarios where you need to differentiate between null or undefined values and other falsy values. The Logical OR operator is more suitable when you want to handle all falsy values in a uniform manner.

By choosing the appropriate operator based on your specific needs, you can ensure that your code is both efficient and reliable.