Benchmark: Array concat vs Object concat (spread and push) vs lodash

HTML Preparation code:

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

Script Preparation code:

var arr = [{a:1},{a:2},{a:3},{a:4},{a:5},{a:6},{a:7},{a:8},{a:9},{a:0}];
var obj = {0:{a:1},1:{a:2},2:{a:3},3:{a:4},4:{a:5},5:{a:6},6:{a:7},7:{a:8},8:{a:9},9:{a:0}};

Tests:

Array
var i = [...arr, ...arr, ...arr, ...arr, ...arr]
Object
var i = {...obj, ...obj, ...obj, ...obj, ...obj}
Array for push
var concat = function(a, b) { let i; var res = []; for(i = 0; i < a.length; i++) { res.push(a[i]); } for(i = 0; i < b.length; i++) { res.push(b[i]); } return res; } concat(arr, concat(arr, concat(arr, concat(arr, concat(arr, arr)))));
Object for add
var concat = function(a, b) { for(let i in b) { a[i] = b[i]; } } concat(obj, obj); concat(obj, obj); concat(obj, obj); concat(obj, obj); concat(obj, obj);
Lodash merge array
_.merge(arr, arr, arr, arr, arr);
Lodash merge object
_.merge(obj, obj, obj, obj, obj);
Native array concat
[].concat(arr, arr, arr, arr, arr)
Native object assign
Object.assign({}, obj, obj, obj, obj, obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array
Object
Array for push
Object for add
Lodash merge array
Lodash merge object
Native array concat
Native object assign

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 provided benchmark and explain what's being tested.

**Overall Benchmark Goal:**
The goal of this benchmark is to compare the performance of different methods for concatenating arrays and objects in JavaScript. The test aims to determine which approach is fastest, most efficient, and scalable.

**Individual Test Cases:**

1. **Array Concatenation**: This test case uses the built-in `concat()` method to concatenate an array with itself multiple times.
	* Option being tested: `arr.concat(arr, arr, arr, arr, arr)`
	* Pros: Easy to implement, widely supported
	* Cons: Can be inefficient for large arrays due to repeated function calls and overhead of creating new arrays
2. **Object Concatenation (Spread Operator)**: This test case uses the spread operator (`...`) to concatenate an object with itself multiple times.
	* Option being tested: `var i = {...obj, ...obj, ...obj, ...obj, ...obj}`
	* Pros: Efficient and modern way of concatenating objects
	* Cons: Not supported in older browsers or environments that don't have ES6+ support
3. **Array Concatenation using Function**: This test case uses a custom function `concat()` to concatenate an array with itself multiple times.
	* Option being tested: `var concat = function(a, b) { ... } concat(arr, concat(arr, concat(arr, concat(arr, arr))))`
	* Pros: Allows for more control over the concatenation process
	* Cons: More complex implementation and potentially slower than built-in methods
4. **Object Concatenation using Loops**: This test case uses a loop to concatenate an object with itself multiple times.
	* Option being tested: `var concat = function(a, b) { ... } concat(obj, obj); concat(obj, obj); concat(obj, obj); concat(obj, obj);`
	* Pros: Can be more efficient than the spread operator for very large objects
	* Cons: Requires more code and may not be as readable or maintainable
5. **Lodash Merge**: This test case uses the `merge()` function from the Lodash library to concatenate an array or object with itself multiple times.
	* Option being tested: `_.merge(arr, arr, arr, arr, arr)` or `_.merge(obj, obj, obj, obj, obj)`
	* Pros: Provides a standardized and efficient way of concatenating arrays and objects
	* Cons: Requires the Lodash library to be included in the test environment

**Library Used:**
The Lodash library is used for its `merge()` function, which provides a convenient and efficient way to concatenate arrays and objects.

**Other Alternatives:**
Some alternative approaches that are not explicitly tested in this benchmark include:

* Using `Array.prototype.push()`, which would be faster but more complex
* Using `Object.assign()` with an empty object as the target, which could be more efficient for large objects
* Using a custom implementation of concatenation using native JavaScript functions like `slice()` and `push()`

These alternatives are not tested in this benchmark, but they may provide different trade-offs between performance, readability, and complexity.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
Array	1150489.6 Ops/sec
Object	92183.8 Ops/sec
Array for push	497791.5 Ops/sec
Object for add	189775.1 Ops/sec

Related benchmarks:

Array concat vs Object concat (spread and push) vs lodash (version: 2)

Comparing performance of: Array vs Object vs Array for push vs Object for add vs Lodash merge array vs Lodash merge object vs Native array concat vs Native object assign

Created: one year ago by: Registered User

Jump to the latest result

Array

Object

Array for push

Object for add

Lodash merge array

Lodash merge object

Native array concat

Native object assign

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