12 Days of Retool: Three Equal Signs | Retool Blog

Welcome back for day 3 of the 12 Days of Retool! Yesterday, we learned how we can approximate tuples in JavaScript and when they might be useful. If you missed that post, or any others during the 12 Days of Retool, you can find a link to every entry in the series at the bottom of this page.

Today, we are going to examine one of the most famous oddities in the JavaScript programming language - the strict equality operator. Along the way, we'll also build a little Retool app to play with different comparison types, and introduce the concept of a JavaScript transformer to render more complex computed values.

Compare, dang it!

In the JavaScript programming language, there are two operators that can be used to check if values are equivalent to one another in boolean logic - the equality operator ("==") and the strict equality operator ("==="). When I learned JavaScript [redacted] years ago, these were introduced to me as the "compare" and "compare, dang it!" operators. The primary functional difference between the two is that the strict equality operator does not attempt to do type coercion first before comparing two values. When you use the regular comparison operator, the JavaScript interpreter will try and convert the two values being compared to the same data type prior to performing the check.

1if ("1" == true) {
2  console.log('this evaluates to true!');
3}
4
5if ("1" === true) {
6  console.log('wont see this, the above evaluates to false');
7}

JavaScript

This particular language feature is the source of much consternation among JavaScript fans and detractors alike. The concept of "truthiness" and "falsiness" in JavaScript is a common stumbling block for newcomers, and the root cause of countless client-side JavaScript errors. While there are specific cases where the "==" operator provides the behavior you might prefer, you are usually best served by sticking to the strict equality operator.

A Retool app to play with comparison, featuring JavaScript transformers

To play with the behavior of the two comparison operators in JavaScript, I created a simple application in Retool that allows you to enter any two values that can be JSON parsed, and see what the result of comparing them would be using either the "==" operator or the "===" operator. You can check out the live app here, and download the app JSON here if you'd like to import it into your own Retool instance.

A JavaScript equality operator test harness, built in Retool

This example application uses change event handlers on each text field to attempt to parse JavaScript objects from the values of each field using JSON.parse. To display the evaluation statements on the right, I used JavaScript transformers to create a more complex string of markdown text to insert into the UI.

Transformers in Retool can take the place of computed properties in frameworks like Vue. They provide a convenient way to produce a complex value based on the current state of the application. You can then reference that computed value within the UI without having to write complex logic inline in, say, a Text component. The markdown for the Text component that renders the comparison text in the UI looks like this:

1#### Equality (==) Result:
2{{ equalityValueTransformer.value }}
3
4#### Strict Equality (===) Result:
5{{ strictEqualityValueTransformer.value }}

Markdown

It references the result of two transformers in my application, which produce a more complex string of markdown text based on the values currently in the text fields, and the result of comparing those two values. Here is the code for my transformer which outputs the results of the strict equality comparison.

1const first = {{ firstValue.value }};
2const second = {{ secondValue.value }};
3
4if (first.valid && second.valid) {
5  // Conduct the strict equality test
6  const validDisplay = (first.objectValue === second.objectValue) ? '<b style="color:green">TRUE</b>' : '<b style="color:red">FALSE</b>';
7  return `<code>${JSON.stringify(first.objectValue)} === ${JSON.stringify(second.objectValue)}</code> evaluates to ${validDisplay}`;
8} else {
9  return '<i style="color:red">Please enter valid JSON values on the left</i>';
10}

JavaScript

Note that on lines 1 and 2 above, I am using Retool's double curly brace data binding to insert the current values of temporary state variables into the transformer.

"JavaScript" strict equals "fun"

I hope you enjoyed today's quick look at comparing values in JavaScript, and picked up a trick or two from this Retool sample app. Enjoy your weekend, and make sure to swing by the Retool blog again on Monday for our next post in the 12 Days of Retool series, covering "Four CRUD Operations".

All 12 Days of Retool posts

Reader