Nullish Coalescing Operator (??) and Logical OR (||) are two operators in JavaScript/TypeScript that are used to handle situations where a variable may be null or undefined. While they may appear to be similar, there are some subtle differences between them that are important to understand.

Nullish Coalescing Operator (??)

The Nullish Coalescing Operator (??) is a JavaScript/Typescript operator that provides a concise way to handle nullish (null or undefined) values in expressions. It allows you to specify a default value that will be returned if the value on the left side of the operator is nullish.

const result = value1 ?? value2;

If value1 is nullish (null or undefined), it returns value2. Otherwise, it returns value1.

Here’s an example to illustrate its usage:

const url = null;
const defaultUrl = "https://mithle.sh";
const redirectTo = url ?? defaultUrl

console.log(redirectTo); // Output: "https://mithle.sh"

The nullish coalescing operator ?? checks if the value on the left side (url) is null or undefined. If it is, it uses the value on the right side (defaultUrl). In other words, if url is not provided or has no value, redirectTo will be set to the value of defaultUrl. However, if url has a value (not null or undefined), then redirectTo will be set to the value of url.

Since url is null in this case, redirectTo will be set to https://mithle.sh, and that’s what will be displayed in the console.

Logical OR Operator (||)

In Javascript/Typescript, the Logical OR Operator (||) is used to check if the left-hand side operand is truthy. If it is, then the left-hand side operand is returned. Otherwise, the right-hand side operand is returned.

Here’s an example:

const name = null; 
const fullName = name || "John Doe";
console.log(fullName); // Output: "John Doe"

In this case, if name is truthy (not null, undefined, false, 0, empty string, or NaN), the variable name will be assigned the value of fullName. Otherwise, it will be assigned the string 'John Doe'.

Remember that the logical OR operator returns the actual value of the operand, not just true or false.

What’s the difference?

Here are the main differences between the Nullish Coalescing Operator (??) and Logical OR Operator (||) in JavaScript:

  1. Nullish check: The Nullish Coalescing Operator in Javascript only checks for null or undefined, while the Logical OR Operator in Javascript checks for any falsy value (such as null, undefined, 0, false, empty string, or NaN).
  2. Return value: The Nullish Coalescing Operator returns the right-hand side operand only if the left-hand side operand is null or undefined. The Logical OR Operator returns the right-hand side operand if the left-hand side operand is falsy.
  3. Precedence: The Nullish Coalescing Operator has higher precedence than the Logical OR Operator. This means that if both operators are used in the same statement, the Nullish Coalescing Operator will be evaluated first.
  4. Use case: The Nullish Coalescing Operator is typically used to provide default values for variables that could be null or undefined. The Logical OR Operator is often used for boolean operations or to provide default values for variables that could be any falsy value.

Here’s an example to illustrate the difference between the two operators:

const age = 0;
const defaultAge = 18;

const result1 = age ?? defaultAge;
const result2 = age || defaultAge;

console.log(result1); // Output: 0
console.log(result2); // Output: 18

In this example, age is 0 and defaultAge is 18. When we use the Nullish Coalescing Operator, result1 is assigned the value of age because age has a defined value (0). When we use the Logical OR Operator, result2 is assigned the value of defaultAge because age is falsy (i.e., 0).

Categorized in:

Typescript

Tagged in:

,