Benchmark: Lodash extend vs Object.assign

HTML Preparation code:

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

Script Preparation code:

var arr = [];
var object1 = { 
	propa: {
        a: 1,
        b: 1
    },
	propb: {
        a: 1,
        b: 1
    },
	propc: {
        a: 1,
        b: 1
    }
};

var object2 = { 
	propa: {
        a: 1,
        d: 1
    },
	propb: {
        a: 1,
        d: 1
    },
	propd: {
        a: 1,
        d: 1
    }
};

for (var i = 0; i <= 100000; i++) { arr.push({ object1, object2 }); }

Tests:

Lodash extend
arr.map(function (element) { const { object1, object2 } = element; let results = {}; [object1, object2].forEach(elem => { for (const propy in elem) { results[propy] = _.extend({}, elem[propy], results[propy]); } }); });
Object.assign
arr.map(function (element) { const { object1, object2 } = element; let results = {}; [object1, object2].forEach(elem => { for (const propy in elem) { if (!results[propy]) { results[propy] = {}; } Object.assign(results[propy], elem[propy]); } }); });
With ...
arr.map(function (element) { const { object1, object2 } = element; let results = {}; [object1, object2].forEach(elem => { for (const propy in elem) { if (!results[propy]) { results[propy] = {}; } results[propy] = { ...results[propy], ...elem[propy] }; } }); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash extend
Object.assign
With ...

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Ubuntu

View result in a separate tab

Test name	Executions per second
Lodash extend	8.1 Ops/sec
Object.assign	29.5 Ops/sec
With ...	17.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares three approaches for merging objects in JavaScript:

1. **Lodash `extend`**: A library function that recursively merges objects.
2. **`Object.assign`**: A built-in method that merges properties from one or more source objects into a target object.
3. **With spread operator (`...`)**: A syntax feature introduced in ECMAScript 2018, which allows for spreading the properties of an object into another object.

**Test Cases**

There are three test cases:

1. **Lodash extend**: This test case uses the `_.extend` function from Lodash to merge objects.
2. **Object.assign**: This test case uses the built-in `Object.assign` method to merge objects.
3. **With spread operator (`...`)**: This test case uses the spread operator (`...`) to merge objects.

**Options Compared**

The benchmark compares the performance of these three approaches on a large dataset (100,000 iterations). The options being compared are:

* Lodash `extend`
* `Object.assign`
* With spread operator (`...`)

**Pros and Cons of Each Approach**

1. **Lodash `extend`**:
	* Pros: Fast, efficient, and well-tested.
	* Cons: Requires an additional library import (Lodash).
	* Note: Lodash is a popular utility library that provides many useful functions, including `extend`.
2. **`Object.assign`**:
	* Pros: Built-in method, no external library required.
	* Cons: Can be slower due to its implementation details and potential for unnecessary copying of objects.
3. **With spread operator (`...`)**:
	* Pros: Modern syntax feature, efficient, and concise.
	* Cons: Requires ECMAScript 2018 support, may not work in older browsers or environments.

**Library and Syntax Features Used**

* Lodash is used for the `extend` function.
* The with spread operator syntax (`...`) is used to merge objects.

**Special JS Feature/Syntax**

The benchmark uses the new spread operator syntax (`...`), which was introduced in ECMAScript 2018. This feature allows for spreading the properties of an object into another object, making it more concise and efficient than using `Object.assign`.

**Other Alternatives**

If you need to merge objects in JavaScript, other alternatives include:

* Using a library like jQuery (for older browsers)
* Implementing your own merging function (e.g., using recursion or iteration)
* Using a different approach, such as creating a new object and assigning properties from the source objects.

Related benchmarks:

Lodash extend vs Object.assign (version: 0)

Compare lodash extend vs Object.assign

Comparing performance of: Lodash extend vs Object.assign vs With ...

Created: 6 years ago by: Registered User

Jump to the latest result

Lodash extend

Object.assign

With ...

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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