When to use a Logical OR Assignment (x ||= y) instead of a Ternary

Community Show & Tell
#1

Just ran across this today (4 Cool Modern JavaScript Features Most Developers Don’t Know About | by fatfish | Nov, 2022 | JavaScript in Plain English) and thought "Hey, that might make some things a tad better in my Retool apps!"

The Logical OR Assignment (x ||= y) operator only assigns if x is falsy.

A general example:

const obj = {
  name: '',
  age: 0
}

obj.name ||= 'fatfish'
obj.age ||= 100

console.log(obj.name, obj.age) // fatfish 100

As you can see, my friends, the assignment succeeds when the value of x is a false value.

Now how can we use it in Retool? To replace any situation where you are checking for an empty or falsy value, something like this:

{{txtName.value === '' ? "Not given" : txtName.value}} or god forbid {{txtName.value === '' || txtName.value === null ? "Not given" : txtName.value}}

Scenario 1.
You have an update (or insert) query where you want to set a default if a component's value is empty:

image
image827×566 34.2 KB

This will set the default_public_notes field to txtJobNewPublicNotes.value if not blank and "Public Notes" otherwise. Note that Retool's linter is showing an error in the code. It does still work despite that.

Scenario 2.

Set default value on query when additionalScope is not passed. Useful for default values and for debugging queries that need scope passed.

// JSQuery1
sqlQuery1.trigger({additionalScope: {username: "Brad"}})

-- sqlQuery1
Update users set name = {{username ||= 'Not Given'}}

Now if you want to check for null or undefined, but an empty string is an acceptable value, the the Nullish Coalescing Assignment ( x &&= y ) instead.

These are the use cases off the top of my head, I am sure there are a few others. Feel free to add your own use cases.

1 Like
#2

Hmmm.

This does not seem to work with property assignments:

image

I expect the linting error, but still, dateDone is not null so should be displaying but it does not.

The old ternary still works:

image

@Kabirdas, Any clues as to why this works in some parts of Retool, but not others?

#3

:thinking: I think it's because &&= is AND assignment, it assigns exactly when the left hand expression is truthy so if dateDone is set I would expect it to return   which would look like a blank return that's hard to check with the linting error. If you're looking for nullish coalescing assignment I think you need ??=

As a side note: you can actually use these operators without the assignment. For instance "hello" || "default message" will return "hello". The logical operators are primarily used with booleans but they don't actually do any boolean conversion, they just return one of the values that get passed to them!

|| - returns the leftmost truthy expression, and the right expression otherwise
&& - returns the leftmost falsey expression, and the right expression otherwise
?? - returns the leftmost expression that isn't null or undefined and the right expression otherwise

Also want to mention short-circuit evaluation here because it's like one of my favorite things in JavaScript :sweat_smile: when one of the logical operators hits the expression it's going to return, it stops evaluating the others. Try entering the following two expressions into your debug console for instance:

1 || console.log("this doesn't show up!")

0 || console.log("this does show up!")
1 Like