The Coding Couple

Pair programming is a lifetime commitment.

JavaScript’s Null Coalescing Operator | Today I Learned

by

Scroll below for an important language update to this blog post.

I was fixing a bug in a portion of code when I came across a getter structured very similar to the lines below:

public get name(): string {
    return this._person && this._person.name || "(No name)";
}

At first glance, I was confused thinking why would you return a Boolean here? Shouldn’t this be a ternary statement? However, upon further inspection it was clear the code was behaving as intended and indeed it was returning the string this._person.name when it was truthy and '(No name)' when it was not, but how?

Well, my mistake was assuming the || logical operator in JS returned true or false. It doesn’t. Instead it returns the first truthy value.

Logical operators in JavaScript

In JS, both the && and || operators return one of the specified operands. That could be a Boolean or in this case a string object.

My next point of confusion was related to the && operator. Why return this._person.name over this._person if this._person was truthy?

From the MDN Docs on the && Logicial Operator:


If expr1 can be converted to true, returns expr2; else, returns expr1.

And there you have it.

I’ll admit, I’m slightly embarrassed I’ve made it this far into my JavaScript usage without truly understanding how logical || and && worked with non-Boolean objects in JS.

I guess whenever I’ve used an object as an operand for JS logical operators it was always in a case where I was looking for a truthy or falsy value.

Logical operators in Python

The logical or and and behaves the same way in Python too. Consider the following statements:

class Person:
    name = None

person = Person()
person.name = "Michael"
name = person and person.name or "No name"

The value of name is 'Michael'. If I removed the line assigning person.name, the value of name would be 'No name'.

The C# Equivalent

Most of my programming experience is with the static language C#. In C# the logical operators && and || only work with Boolean operands and only return Boolean values. The C# equivalent to using the logical && and || as above would be from using the null coalescing operator with the null conditional operator.

string name = person?.Name ?? "No name";

I think I prefer the use of the ternary operator. I think it more concisely conveys the exact intent of the line of code.

public get name(): string {
    return this._person && this._person.name ? this._person.name : "(No name)";
}

However, leveraging the logical operator is starting to grow on me.

I’ll need to update my 3 JavaScript Gotcha’s for the C# Developer blog post.

CLICK HERE to check out some of our other posts.

A JavaScript Language Update

I felt this blog post should be updated to inform you that a legitimate null coalescing operator is on the horizon for JavaScript! It’s actually called the nullish coalescing operator instead of null. You can view the proposal the nullish coalescing operator for it here. As of writing this update, the proposal is in Stage 4, meaning it is ready for a formal inclusion into the ECMAScript standard.

The nullish coalescing operator checks whether or not an object is null or undefined. In the following expression:

const name = person.name ?? "(No name)";

name will evaluate to “(No name)” if person.name is equal to null or undefined. Otherwise it will be equal to person.name.

FIND US ONLINE!