JavaScript Equality

July 17, 2018

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.

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.

Javascript