[The Nullish Coalescing Operator `??` and Logical OR Operator `||`] #JavaScript

README.md

The Nullish Coalescing Operator ??and Logical OR Operator ||

value	const assign = value ?? 'right'	const assign = value || 'right'
null	right	right
undefined	right	right
'""'	left	right
0	left	right
[]	left	left
NaN	right	right
{}	left	left
false	left	right
true	left	left
"abc"	left	left
1	left	left
1.1	left	left
-1	left	left
-1.1	left	left
[1,2]	left	left
{"a":1}	left	left

The Nullish Coalescing Operator ??

Introduced in ECMAScript 2020 (ES2020) that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

This operator is different from the logical OR operator ||, which returns its right-hand side operand when its left-hand side operand is a falsy value (e.g., null, undefined, false, 0, NaN, or an empty string ''). This means that the || operator can lead to unexpected results when you want to check for null or undefined specifically

Here's how you can use the Nullish Coalescing Operator ?? to ensure a value is set on a parameter with a default value

function updatePreferences(  user,
                           { theme = user.preferences.theme, 
                             notifications = user.preferences.notifications } = {}) 
{
    user.preferences.theme = theme ?? user.preferences.theme;
    user.preferences.notifications = notifications ?? user.preferences.notifications;
    return user;
}

const defaultUserSettings = {
    notifications: { PIIChange: ['email','mobile'] }
}
const usr = {
    preferences: {
        theme: { btnClr: 'green' },
        notifications: {}
    }
}
console.log(
    updatePreferences(usr,defaultUserSettings)
)
  
//
//  {
//     preferences: { theme: { btnClr: 'green' }, notifications: { PIIChange: [Array] } }
//  }

Here is a Typescript solution ( man I hate typescript )

interface AppConfiguration {
  // Default: "(no name)"; empty string IS valid
  name: string;

  // Default: -1; 0 is valid
  items: number;

  // Default: true
  active: boolean;
}

function updateApp(config: Partial<AppConfiguration>) {
  // With null-coalescing operator
  config.name = config.name ?? "(no name)";
  config.items = config.items ?? -1;
  config.active = config.active ?? true;

  // Current solution
  config.name = typeof config.name === "string" ? config.name : "(no name)";
  config.items = typeof config.items === "number" ? config.items : -1;
  config.active = typeof config.active === "boolean" ? config.active : true;

  // Using || operator which could give bad data
  config.name = config.name || "(no name)"; // does not allow for "" input
  config.items = config.items || -1; // does not allow for 0 input
  config.active = config.active || true; // really bad, always true
}

Logical OR Operator ||

The || operator in JavaScript is known as the Logical OR Operator. It is used to combine two boolean expressions and returns true if at least one of the expressions evaluates to true. However, when used with non-boolean values, it returns the value of the first truthy operand. If both operands are falsy, it returns the value of the last operand.

In this example, because value1 is truthy (it has a value other than false, 0, null, undefined, NaN, or an empty string ""), the || operator returns value1.

let value1 = "Hello";
let value2 = "World";

console.log(value1 || value2); // Outputs: "Hello"