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:
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 === -0andNaN !== 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:
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:
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:
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 []):
// 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:
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):
// 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:
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-equaland
react-fast-comparewhen developing with React.
Thank you for reading.
You can find my social links on my website.
Top comments (0)