Benchmark: tk lodash merge vs spread operator

HTML Preparation code:

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

Script Preparation code:

var line = [{
    order: 1,
    person: {
        name: 'Fred'
    }
}, {
    order: 2,
    person: {
        name: 'Bill'
    }
}, {
    order: 3,
    person: {
        name: 'Mary'
    }
}, {
    order: 4,
    person: {
        name: 'Tom'
    }
}, {
    order: 5,
    person: {
        name: 'Becky'
    }
}, {
    order: 6,
    person: {
        name: 'Sara'
    }
}, {
    order: 7,
    person: {
        name: 'Charles'
    }
}, {
    order: 8,
    person: {
        name: 'Pamela'
    }
}, {
    order: 9,
    person: {
        name: 'Susan'
    }
}, {
    order: 10,
    person: {
        name: 'Ricky'
    }
}];

var updatedLine = [{
    order: 4,
    person: {
        name: 'Fred'
    }
}, {
    order: 7,
    person: {
        name: 'Bill'
    }
}, {
    order: 10,
    person: {
        name: 'Mary'
    }
}, {
    order: 9,
    person: {
        name: 'Tom'
    }
}, {
    order: 5,
    person: {
        name: 'Becky'
    }
}, {
    order: 2,
    person: {
        name: 'Sara'
    }
}, {
    order: 8,
    person: {
        name: 'Charles'
    }
}, {
    order: 6,
    person: {
        name: 'Pamela'
    }
}, {
    order: 9,
    person: {
        name: 'Susan'
    }
}, {
    order: 1,
    person: {
        name: 'Ricky'
    }
}];

Tests:

lodash merge
let copied = _.merge(line, updatedLine);
native spread operator
/*const hax = [{ order: 11, person: { name: 'Hax' }]; */ let copied = [...line, ...updatedLine];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash merge
native spread operator

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark measures the performance of two approaches to merge two arrays in JavaScript:

1. **Lodash `merge` method**: The first test case uses the `_.merge` function from the Lodash library to merge the two arrays.
2. **Native spread operator**: The second test case uses the spread operator (`...`) to merge the two arrays.

**Options being compared**

The benchmark is comparing the performance of these two approaches:

* **Lodash `merge` method**: This approach uses a function from the Lodash library to perform the merge operation.
* **Native spread operator**: This approach uses a built-in JavaScript feature (spread operator) to concatenate and merge the two arrays.

**Pros and cons of each approach**

1. **Lodash `merge` method**:
	* Pros: More concise code, easier to read, and well-tested.
	* Cons: Adds an external dependency (Lodash library), which may introduce additional overhead.
2. **Native spread operator**:
	* Pros: No external dependencies, built-in feature, and efficient.
	* Cons: Requires JavaScript version support (not all versions support the spread operator), and may be less readable for complex merges.

**Library usage**

The benchmark uses the Lodash library, which is a popular utility library for JavaScript. The `merge` function provided by Lodash is designed to perform deep merges of objects and arrays, and it's commonly used in development projects.

**Special JS feature or syntax**

There's no special JavaScript feature or syntax being tested in this benchmark, as the test cases only use built-in features like arrays and the spread operator.

**Other alternatives**

If you were to implement a custom merge function without using Lodash or the spread operator, some alternative approaches could be:

* Using `Array.prototype.concat()` and `Array.prototype.slice()`
* Implementing a recursive merge function
* Using a third-party library like `immer`

Keep in mind that these alternatives would likely have different performance characteristics and might not match the native spread operator's efficiency.

**Benchmark preparation code**

The provided HTML preparation code includes the Lodash library, which is loaded from a CDN. The JavaScript preparation code defines two arrays (`line` and `updatedLine`) that will be merged using the benchmarked approaches.

I hope this explanation helps you understand what's being tested in the MeasureThat.net benchmark!

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 117 on Linux

View result in a separate tab

Test name	Executions per second
lodash merge	110918.1 Ops/sec
native spread operator	9144155.0 Ops/sec

Related benchmarks:

tk lodash merge vs spread operator (version: 0)

lodash merge vs spread operator

Comparing performance of: lodash merge vs native spread operator

Created: one year ago by: Guest

Jump to the latest result

lodash merge

native spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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