Different types of equality in javascript.
Tags: javascript, beginners, tutorial, programming
Published: 2021-05-09 13:07:15

Javascript has a lot of types of equality. From my point of view, it is important to know how they work and the differences between them to understand 
when to use each one. Let's start with the most known: the **strict equality**.

## Strict equality

The **strict equality** or **triple equals** `===` checks the the equality between two values with their types. When we have objects ({} or []), a 
function or a Symbol, the references are compared:

```javascript
console.log(23 === 23); // true
console.log('hello' === 'hello'); // true
console.log(0 === -0); // true
console.log(undefined === undefined); // true
console.log(null === null); // true
console.log(null === undefined); // false
console.log('23' === 23); // false
console.log({} === {}); // false
console.log([] === []); // false
console.log(NaN === NaN); // false
console.log(Infinity === Infinity); // true
console.log(Infinity === -Infinity); // false
console.log(Symbol('aSymbol') === Symbol('aSymbol')); // false
console.log(Symbol.for('aSymbol') === Symbol.for('aSymbol')); // true

const firstMethod = () => {};
const secondMethod = () => {};

console.log(firstMethod === secondMethod); // false
```

> This equality is the most used in projects. Watch out to cases `0 === -0` and `NaN !== NaN`.

## Weak equality

The **weak equality** or **double equals** `==` converts the two values to a same type (named type coercion) and then compare them. When we have objects ({} or []), a 
function or a Symbol, the references are compared:

```javascript
console.log(23 == 23); // true
console.log('bonjour' == 'bonjour'); // true
console.log(0 == -0); // true
console.log(undefined == undefined); // true
console.log(null == null); // true
console.log(null == undefined); // true
console.log('23' == 23); // true
console.log({} == {}); // false
console.log([] == []); // false
console.log(NaN == NaN); // false
console.log(Infinity == Infinity); // true
console.log(Infinity == -Infinity); // false
console.log(Symbol('aSymbol') == Symbol('aSymbol')); // false
console.log(Symbol.for('aSymbol') == Symbol.for('aSymbol')); // true

const firstMethod = () => {};
const secondMethod = () => {};

console.log(firstMethod == secondMethod); // false
```

Here are some specific cases:

```javascript
console.log('' == false); // true
console.log('' == 0); // true
console.log([] == ''); // true
console.log([[]] == ''); // true
console.log([1] == true); // true
console.log([0] == false); // true
console.log([[0]] == false); // true
```

## Object.is

`Object.is` works like the strict equality except for two cases:

```javascript
console.log(Object.is(NaN, NaN)); // true
console.log(NaN === NaN); // false

console.log(Object.is(0, -0)); // false
console.log(0 === -0); // true
```

> This equality is used in the dependencies's arrays of **React hooks**: **useEffect**, **useCallback** and **useMemo**.

<!-- -->
> **Warning:** the method is not available on IE11, a polyfill will be required.

## Shallow equal

The **shallow equal** is a comparison based on `Object.is` which will also compare first level values of object ({} or []):

```javascript
// Implementation of Object.is not to use polyfill
function is(x, y) {
  // Let's detect if we are not in the case 0 === -0 where we should have !Object.is(0, -0)
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y
  } else {
    // The second case is NaN !== NaN but Object.is(NaN, NaN)
    return x !== x && y !== y
  }
}

function shallowEqual(objA, objB) {
  if (is(objA, objB)) return true

  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false
  }

  // Let's go through all keys of objects
  const keysA = Object.keys(objA)
  const keysB = Object.keys(objB)

  if (keysA.length !== keysB.length) return false

  for (let i = 0; i < keysA.length; i++) {
    if (
      !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false
    }
  }

  return true
}
```

In this case we have the following equalities:

```javascript
console.log(shallowEqual(0, -0)); // false
console.log(shallowEqual({}, {})); // true
console.log(shallowEqual([], [])); // true
console.log(shallowEqual(new String('value'), new String('value'))); // true
console.log(shallowEqual({ firstKey: 'firstValue', secondKey: 'secondValue '}, { firstKey: 'firstValue', secondKey: 'secondValue '})); // true
console.log(shallowEqual(['firstValue', 'secondValue'], ['firstValue', 'secondValue'])); // true
console.log(shallowEqual({ 0: 'firstValue', 1: 'secondValue '}, ['firstValue', 'secondValue '])); // true

console.log(shallowEqual({ firstKey: {} }, { firstKey: {} })); // false
console.log(shallowEqual({ firstKey: [] }, { firstKey: [] })); // false
console.log(shallowEqual({ firstKey: 'firstValue' }, { firstKey: 'firstValue', secondKey: 'secondValue' })); // false
console.log(shallowEqual([ 'firstValue' ], [ 'firstValue', 'secondValue' ])); // false
console.log(shallowEqual([ {} ], [ {} ])); // false
```

> This equality is used in React for **PureComponent** (in shouldComponentUpdate lifecycle method) and **React.memo** (default equality which 
is overridable).

## Deep equal

The **deep equal** make the deeply comparison of objects possible (not only the first level): 

```javascript
// Implementation of Object.is not to use polyfill
function is(x, y) {
  // Let's detect if we are not in the case 0 === -0 where we should have !Object.is(0, -0)
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y
  } else {
    // The second case is NaN !== NaN but Object.is(NaN, NaN)
    return x !== x && y !== y
  }
}

function deepEqual(object1, object2) {
  if (is(object1, object2)) {
    return true;
  }

  if (
    typeof object1 !== "object" ||
    object1 === null ||
    typeof object2 !== "object" ||
    object2 === null
  ) {
    return false;
  }


  // Let's go through all keys of objects
  const object1Keys = Object.keys(object1);
  const object2Keys = Object.keys(object2);

  if (object1Keys.length !== object2Keys.length) {
    return false;
  }

  for (let i = 0; i < object1Keys.length; i++) {
    const key = object1Keys[i];

    if (
      !Object.prototype.hasOwnProperty.call(object2, key) ||
      // We call recursively the method to go deeper as soon as we have an object
      !deepEqual(object1[key], object2[key])
    ) {
      return false;
    }
  }

  return true;
}
```

In this case we have the following equalities:

```javascript
console.log(deepEqual(0, -0)); // false
console.log(deepEqual({}, {})); // true
console.log(deepEqual([], [])); // true
console.log(deepEqual({ firstKey: 'firstValue', secondKey: 'secondValue '}, { firstKey: 'firstValue', secondKey: 'secondValue '})); // true
console.log(deepEqual(['firstValue', 'secondValue'], ['firstValue', 'secondValue'])); // true
console.log(deepEqual({ 0: 'firstValue', 1: 'secondValue '}, ['firstValue', 'secondValue '])); // true
console.log(deepEqual(deepEqual({ firstKey: {} }, { firstKey: {} })); // true
console.log(deepEqual({ firstKey: [] }, { firstKey: [] })); // true
console.log(deepEqual([ {} ], [ {} ])); // true

console.log(deepEqual(deepEqual({ firstKey: { deepKey: { key: 'value1' } } }, { firstKey: { deepKey: { key: 'value2' } } })); // false
console.log(deepEqual({ firstKey: 'firstValue' }, { firstKey: 'firstValue', secondKey: 'secondValue' })); // false
console.log(deepEqual([ 'firstValue' ], [ 'firstValue', 'secondValue' ])); // false
```

> This equality is commonly used in tests when we have to assert the result of a function (for example) to the expected result. 

<!-- -->
> It exists some libraries which can go faster than other implementations when doing deep equals: 
[`fast-deep-equal`](https://github.com/epoberezkin/fast-deep-equal) and 
[`react-fast-compare`](https://github.com/FormidableLabs/react-fast-compare) when developing with React.

----
Thank you for reading.
You can find my social links on [my website](https://www.romaintrotard.com).