Jake Worth

Jake Worth

JavaScript Equality

Published: July 17, 2018 2 min read

  • javascript

A few weeks ago, I built an app with React.js and create-react-app that I call ‘JavaScript Equality’. View deployment here.

This application demonstrates the JavaScript value-comparison operators == and ===. It’s inspired by the JavaScript Equality Table, an app I stumbled across while trying to get a better understanding of JavaScript equality.

The image above shows why the threequals is superior to the twoquals equals. If you want true equality, the kind of logic you’d expect with any other programming language, use threequals.

My favorite implementation detail of this app is the data model, which is created in the constructor function:

const comparatorArray = this.axis().map(() => this.axis().slice(0));
const dataModel = this.axis().map((xValue, index) =>
comparatorArray[index].map(yValue => ({
  // eslint-disable-next-line
  twoquals: yValue == xValue,
  threequals: yValue === xValue,
}))
);

What I do here is create an array of arrays, comparatorArray, that has all the comparators (true, false, etc.) in the axis, in order, with as many indexes as there are comparators, forming a square of data. Then, I map over the axis and compare each comparator to each value using double and triple equals. This creates a data model like this for a 4 x 4 square of values:

[
 [
   { twoquals: true, threequals: true },
   { twoquals: false, threequals: false },
 ],
 [
   { twoquals: false, threequals: false },
   { twoquals: true, threequals: true },
 ],
];

From here we can toggle a state value view between twoquals and threequals. All the math happens in the initial state.

What are your thoughts on this? Let me know!


Join 100+ engineers who subscribe for advice, commentary, and technical deep-dives into the world of software.