Benchmark: ES6 spread vs. lodash assign

HTML Preparation code:

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

Script Preparation code:

var startDate = new Date();
var endDate = new Date();

Tests:

ES6 spread
const state = { filterableRoles: [], predefinedFilters: [], dynamicFilters: [], checkedRoles: [], checkedUsers: [], checkedJobStatus: [], startDate: null, endDate: null, isLoading: false }; const result = { ...state, startDate, endDate };
lodash assign
const state = { filterableRoles: [], predefinedFilters: [], dynamicFilters: [], checkedRoles: [], checkedUsers: [], checkedJobStatus: [], startDate: null, endDate: null, isLoading: false }; const result = _.assign({}, state, { startDate, endDate });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 spread
lodash assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 14 on iOS 14.4.2

View result in a separate tab

Test name	Executions per second
ES6 spread	811957.1 Ops/sec
lodash assign	339610.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmarking test case on MeasureThat.net, which compares the performance of two approaches: using JavaScript's built-in spread operator (ES6) and using the `lodash.assign()` function.

**What is being tested?**

The test creates an initial object `state` with several properties. Then, it defines two test cases:

1. **ES6 Spread**: The test uses the spread operator (`...`) to create a shallow copy of the `state` object and merges it with the `startDate` and `endDate` variables. This approach is used in modern JavaScript to create new objects by spreading existing ones.
2. **Lodash Assign**: The test uses the `lodash.assign()` function to create a deep copy of the `state` object and then merge it with the `startDate` and `endDate` variables.

**Options compared**

The two approaches are compared:

1. **ES6 Spread**
	* Pros:
		+ Lightweight, as it only requires JavaScript's built-in functionality.
		+ Efficient for simple objects.
	* Cons:
		+ May not work correctly with complex nested objects or arrays.
		+ Can be slower than `lodash.assign()` due to the overhead of parsing and executing the spread operator.
2. **Lodash Assign**
	* Pros:
		+ Robust and reliable, as it handles more complex cases (e.g., nested objects, arrays).
		+ Often faster than ES6 spread for larger, more complex data structures.

**Other considerations**

When choosing between these two approaches, consider the following:

1. **Complexity of your data**: If you're working with simple, shallow objects, ES6 spread might be sufficient. However, if your data is nested or has arrays, `lodash.assign()` might be a better choice.
2. **Performance-critical code**: For performance-critical code, `lodash.assign()` is often the safer bet due to its robustness and efficiency.
3. **Licensing and size**: If you're working on a project with strict license requirements or limited storage constraints, ES6 spread's simplicity might be an advantage.

**Library used**

`lodash.assign()` is a popular utility library that provides efficient and reliable functions for various tasks, including object merging and copying.

In this test case, `lodash.assign()` is used to create a deep copy of the `state` object before merging it with the `startDate` and `endDate` variables. This ensures that any modifications made to the original `state` object do not affect the resulting merged object.

**Special JS feature or syntax**

The spread operator (`...`) is a modern JavaScript feature introduced in ES6. It allows creating new objects by spreading existing ones, making it easier to work with objects and arrays in JavaScript.

Related benchmarks:

ES6 spread vs. lodash assign (version: 0)

Comparing performance of: ES6 spread vs lodash assign

Created: 3 years ago by: Guest

Jump to the latest result

ES6 spread

lodash assign

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