Benchmark: Single vs Double Loop - Diffing with Lodash

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

AخA
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}

const thousand = 1000;
var max = 10 * thousand;

var arr1 = [];
var arr2 = [];
for (var i = 0; i <= max; i++) {
    arr1.push(getRandomInt(0, max));
    arr2.push(getRandomInt(0, max));
}
console.log(arr1);
console.log(arr2);

​x
 
function getRandomInt(min, max) {    min = Math.ceil(min);    max = Math.floor(max);    return Math.floor(Math.random() * (max - min)) + min;}​const thousand = 1000;var max = 10 * thousand;​var arr1 = [];var arr2 = [];for (var i = 0; i <= max; i++) {    arr1.push(getRandomInt(0, max));    arr2.push(getRandomInt(0, max));}console.log(arr1);console.log(arr2);

Tests:

Double loop

function getArrayDiffs2(array = [], comparison = []) {
    const result = [];
    // ignore duplicates and look for matches
    new Set(array).forEach(a => {
        const match = comparison.find(b => _.isEqual(a, b));
        if (match) {
            result.push(["UNCHANGED", a]);
        }
        else {
            result.push(["NEW", a]);
        }
    });
    // ignore duplicates and look for matches
    new Set(comparison).forEach(a => {
        const match = array.find(b => _.isEqual(a, b));
        if (!match) {
            result.push(["DELETED", a]);
        }
    });
    return result;
}

getArrayDiffs2(arr1,arr2);

 
function getArrayDiffs2(array = [], comparison = []) {    const result = [];    // ignore duplicates and look for matches    new Set(array).forEach(a => {        const match = comparison.find(b => _.isEqual(a, b));        if (match) {            result.push(["UNCHANGED", a]);        }        else {            result.push(["NEW", a]);        }    });    // ignore duplicates and look for matches    new Set(comparison).forEach(a => {        const match = array.find(b => _.isEqual(a, b));        if (!match) {            result.push(["DELETED", a]);        }    });    return result;}​getArrayDiffs2(arr1,arr2);

Single loop

function getArrayDiffs1(array = [], comparison = []) {
    const result = [];
    const comparisonSet = new Set(comparison);
    const cArray = Array.from(comparisonSet);
    new Set(array).forEach(a => {
        const match = cArray.indexOf(b => _.isEqual(a, b));
        if (match > 0) {
            result.push(["UNCHANGED", a]);
            cArray.splice(match, 1);
        }
        else {
            result.push(["NEW", a]);
        }
    });
    // ignore duplicates and look for matches
    cArray.forEach(a => {
      result.push(["DELETED", a]);
    });
    return result;
}

getArrayDiffs1(arr1,arr2);

 
function getArrayDiffs1(array = [], comparison = []) {    const result = [];    const comparisonSet = new Set(comparison);    const cArray = Array.from(comparisonSet);    new Set(array).forEach(a => {        const match = cArray.indexOf(b => _.isEqual(a, b));        if (match > 0) {            result.push(["UNCHANGED", a]);            cArray.splice(match, 1);        }        else {            result.push(["NEW", a]);        }    });    // ignore duplicates and look for matches    cArray.forEach(a => {      result.push(["DELETED", a]);    });    return result;}​getArrayDiffs1(arr1,arr2);

XOR

function getArrayDiffs3(array = [], comparison = []) {
  const UNCHANGED = _.intersectionWith(array, comparison, _.isEqual);
  const newArray = _.differenceWith(array,UNCHANGED, _.isEqual);
  const DELETED = _.differenceWith(comparison,UNCHANGED, _.isEqual);
  const result = [];
  UNCHANGED.forEach(a => {
    result.push(["UNCHANGED", a]);
  });
  DELETED.forEach(a => {
    result.push(["DELETED", a]);
  });
  newArray.forEach(a => {
    result.push(["NEW", a]);
  });
  return result;
}

getArrayDiffs3(arr1,arr2);

 
function getArrayDiffs3(array = [], comparison = []) {  const UNCHANGED = _.intersectionWith(array, comparison, _.isEqual);  const newArray = _.differenceWith(array,UNCHANGED, _.isEqual);  const DELETED = _.differenceWith(comparison,UNCHANGED, _.isEqual);  const result = [];  UNCHANGED.forEach(a => {    result.push(["UNCHANGED", a]);  });  DELETED.forEach(a => {    result.push(["DELETED", a]);  });  newArray.forEach(a => {    result.push(["NEW", a]);  });  return result;}​getArrayDiffs3(arr1,arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Double loop
Single loop
XOR

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Browser/OS: Chrome 91 on Linux

View result in a separate tab

Test name	Executions per second
Double loop	0.1 Ops/sec
Single loop	55.7 Ops/sec
XOR	9.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Let's dive into the benchmark and explain what's being tested.

Benchmark Definition

The benchmark defines three test cases:

Single Loop: This test case uses the getArrayDiffs1 function, which iterates through the array once to find matches with the comparison array.
XOR (XOR Loop): This test case uses the getArrayDiffs3 function, which uses Lodash's _.intersectionWith, _.differenceWith, and _._equal functions to find matches, differences, and XOR results between the two arrays in a single pass.
Double Loop: This test case is similar to the Single Loop, but it iterates through both arrays simultaneously.

Options being compared

The three test cases are comparing different approaches for finding array differences:

Single Loop: Iterates through the array once, which can be more efficient but may not cover all possible edge cases.
XOR (XOR Loop): Uses Lodash's optimized functions to find matches, differences, and XOR results between the two arrays in a single pass. This approach is likely to be faster but may have higher memory usage.
Double Loop: Iterates through both array and comparison arrays simultaneously, which can ensure all possible combinations are covered but may be slower.

Pros and Cons

Here's a brief summary of the pros and cons of each approach:

Single Loop: Pros: Simple, efficient. Cons: May not cover all edge cases.
XOR (XOR Loop): Pros: Optimized functions, likely faster. Cons: Higher memory usage, may have complex logic.
Double Loop: Pros: Ensures all combinations are covered, simple to understand. Cons: Slower, more memory-intensive.

Lodash Library

The benchmark uses Lodash's _.isEqual function to compare elements between arrays. This function is a smart equality checker that can handle various data types and edge cases.

Special JS Features/Syntax

None of the test cases use special JavaScript features or syntax beyond what's standard in modern browsers.

Alternatives

Other approaches for finding array differences include:

Using Array.prototype.filter() and Array.prototype.indexOf(), which would require multiple passes through the arrays.
Implementing a custom diff algorithm, which could be faster but may have complex logic.
Using a library like Ramda or Underscore.js, which provide optimized functions for array manipulation.

Keep in mind that these alternatives might not be as efficient or scalable as Lodash's _.intersectionWith and _.differenceWith functions.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark defines three test cases:

1. **Single Loop**: This test case uses the `getArrayDiffs1` function, which iterates through the `array` once to find matches with the `comparison` array.
2. **XOR (XOR Loop)**: This test case uses the `getArrayDiffs3` function, which uses Lodash's `_.intersectionWith`, `_.differenceWith`, and `_._equal` functions to find matches, differences, and XOR results between the two arrays in a single pass.
3. **Double Loop**: This test case is similar to the Single Loop, but it iterates through both arrays simultaneously.

**Options being compared**

The three test cases are comparing different approaches for finding array differences:

* **Single Loop**: Iterates through the `array` once, which can be more efficient but may not cover all possible edge cases.
* **XOR (XOR Loop)**: Uses Lodash's optimized functions to find matches, differences, and XOR results between the two arrays in a single pass. This approach is likely to be faster but may have higher memory usage.
* **Double Loop**: Iterates through both `array` and `comparison` arrays simultaneously, which can ensure all possible combinations are covered but may be slower.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Single Loop**: Pros: Simple, efficient. Cons: May not cover all edge cases.
* **XOR (XOR Loop)**: Pros: Optimized functions, likely faster. Cons: Higher memory usage, may have complex logic.
* **Double Loop**: Pros: Ensures all combinations are covered, simple to understand. Cons: Slower, more memory-intensive.

**Lodash Library**

The benchmark uses Lodash's `_.isEqual` function to compare elements between arrays. This function is a smart equality checker that can handle various data types and edge cases.

**Special JS Features/Syntax**

None of the test cases use special JavaScript features or syntax beyond what's standard in modern browsers.

**Alternatives**

Other approaches for finding array differences include:

* Using `Array.prototype.filter()` and `Array.prototype.indexOf()`, which would require multiple passes through the arrays.
* Implementing a custom diff algorithm, which could be faster but may have complex logic.
* Using a library like Ramda or Underscore.js, which provide optimized functions for array manipulation.

Keep in mind that these alternatives might not be as efficient or scalable as Lodash's `_.intersectionWith` and `_.differenceWith` functions.

Related benchmarks:

Single vs Double Loop - Diffing with Lodash (version: 5)

Comparing performance of: Double loop vs Single loop vs XOR

Created: 3 years ago by: Registered User

Jump to the latest result