Run results for: Lodash.isEqual vs JSON.stringify Equality Comparison for Shallow Array of Strings.(abcde)

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:138.0) Gecko/20100101 Firefox/138.0

Browser: Firefox 138

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
_.isEqual	3197304.5 Ops/sec
JSON.stringify	2746074.2 Ops/sec
areValuesEqual	4549482.0 Ops/sec

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

Script Preparation code:

window.foo = ['cat', 'dog', 'bird'];
window.bar = ['cat', 'dog', 'bird'];

// Simple circular detection, shouldn't be a problem in react-hook-form values.
// Hopefull 1_000 is deeper than we'll ever actually go...
const DEPTH_LIMIT = 1_000;

const isPlainObject = (thing) => Boolean(
  thing
    && typeof thing === 'object'
    && (
      thing.constructor === Object
      || thing.constructor === null
    ),
);

const areValuesEqualInternal = (referenceValue, checkValue, depth) => {
  if (referenceValue === checkValue) {
    return true;
  }

  if (
    depth === DEPTH_LIMIT
    || referenceValue === null
    || checkValue === null
    || referenceValue === undefined
    || checkValue === undefined
  ) {
    return false;
  }

  const referenceIsArray = Array.isArray(referenceValue);
  const checkIsArray = Array.isArray(checkValue);
  if (referenceIsArray && checkIsArray) {
    if (referenceValue.length !== checkValue.length) {
      return false;
    }
    for (let i = 0; i < referenceValue.length; i += 1) {
      if (!areValuesEqualInternal(referenceValue[i], checkValue[i], depth + 1)) {
        return false;
      }
    }
    return true;
  }
  // if either value is an array, but the other is not, they are not equal
  if (referenceIsArray || checkIsArray) {
    return false;
  }

  if (isPlainObject(referenceValue) && isPlainObject(checkValue)) {
    // check all keys in the reference value are in the check
    // missing keys in the check are ok if the reference value is undefined
    const referenceKeys = Object.keys(referenceValue);
    for (let i = 0; i < referenceKeys.length; i += 1) {
      const key = referenceKeys[i];
      if (!areValuesEqualInternal(referenceValue[key], checkValue[key], depth + 1)) {
        return false;
      }
    }

    // check if there are any keys in checkValue (not undefined value), but not in referenceValue
    const checkKeys = Object.keys(checkValue);
    for (let i = 0; i < checkKeys.length; i += 1) {
      const key = checkKeys[i];
      if (checkValue[key] !== undefined && !(key in referenceValue)) {
        return false;
      }
    }

    return true;
  }

  return false;
};

const areValuesEqual = (referenceValue, checkValue) => {
  if (referenceValue === checkValue) {
    return true;
  }
  return areValuesEqualInternal(referenceValue, checkValue, 1);
};
window.areValuesEqual = areValuesEqual

Tests:

_.isEqual
_.isEqual(window.foo, window.bar)
JSON.stringify
JSON.stringify(window.foo) === JSON.stringify(window.bar);
areValuesEqual
areValuesEqual(window.foo, window.bar)

Run results for: Lodash.isEqual vs JSON.stringify Equality Comparison for Shallow Array of Strings.(abcde)

Test on isEqual performance

_.isEqual

JSON.stringify

areValuesEqual