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>

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);

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);
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);
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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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 2 months ago):

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

Double loop

Single loop

XOR

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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