Is there a "null coalescing" operator in JavaScript?

Update

JavaScript now supports the nullish coalescing operator (??). It returns its right-hand-side operand when its left-hand-side operand is null or undefined, and otherwise returns its left-hand-side operand.

Please check compatibility before using it.

The JavaScript equivalent of the C# null coalescing operator (??) is using a logical OR (||):

var whatIWant = someString || "Cookies!";

There are cases (clarified below) that the behaviour won't match that of C#, but this is the general, terse way of assigning default/alternative values in JavaScript.

Clarification

Regardless of the type of the first operand, if casting it to a Boolean results in false, the assignment will use the second operand. Beware of all the cases below:

alert(Boolean(null)); // falsealert(Boolean(undefined)); // falsealert(Boolean(0)); // falsealert(Boolean("")); // falsealert(Boolean("false")); // true -- gotcha! :)

This means:

var whatIWant = null || new ShinyObject(); // is a new shiny objectvar whatIWant = undefined || "well defined"; // is "well defined"var whatIWant = 0 || 42; // is 42var whatIWant = "" || "a million bucks"; // is "a million bucks"var whatIWant = "false" || "no way"; // is "false"

function coalesce() {    var len = arguments.length;    for (var i=0; i<len; i++) {        if (arguments[i] !== null && arguments[i] !== undefined) {            return arguments[i];        }    }    return null;}var xyz = {};xyz.val = coalesce(null, undefined, xyz.val, 5);// xyz.val now contains 5

this solution works like the SQL coalesce function, it accepts any number of arguments, and returns null if none of them have a value. It behaves like the C# ?? operator in the sense that "", false, and 0 are considered NOT NULL and therefore count as actual values. If you come from a .net background, this will be the most natural feeling solution.

Yes, it is coming soon. See proposal here and implementation status here.

It looks like this:

x ?? y

Example

const response = {  settings: {    nullValue: null,    height: 400,    animationDuration: 0,    headerText: '',    showSplashScreen: false  }};const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''const animationDuration = response.settings?.animationDuration ?? 300; // result: 0const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false