Benchmark: Array with objects concatanation (1)

Array with objects concatanation (1) (version: 1) Benchmark.js

Array.prototype.concat vs lodash.concat vs. push.apply vs. spread operator vs. push spread operator vs. push in for loop

Comparing performance of: `push spread operator vs Lodash concat vs Array.prototype.push.apply() vs spread operator vs Array.prototype.concat vs forEach push`

Created: 2 years ago by: Registered User

Go to the latest result

HTML Preparation code:

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

Script Preparation code:

var generateData = (howMany) => {
	var objs = [];
	for (let i = 0; i <= howMany; i++) {
		objs.push({ id: i, displayName: 'Saul Goodman', howMany, userPrincipalName: 'Alex Bettersoon', manager: { displayName: 'Boba Messi' } });
	}
	return objs
}

Tests:

push spread operator
var result = []; for (let i = 0; i < 8; i++) { result.push(...generateData(10000)); }
Lodash concat
var result = []; for (let i = 0; i < 8; i++) { result = _.concat(result, generateData(10000)); }
Array.prototype.push.apply()
var result = []; for (let i = 0; i < 8; i++) { Array.prototype.push.apply(result, generateData(10000)); }
spread operator
var result = []; for (let i = 0; i < 8; i++) { result = [...result, ...generateData(10000)]; }
Array.prototype.concat
var result = []; for (let i = 0; i < 8; i++) { result = result.concat(generateData(10000)); }
forEach push
var result = []; for (let i = 0; i < 8; i++) { const a = generateData(10000) a.forEach(e => result.push(e)) }

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Lodash concat

173/s

Array.prototype.concat

160/s

forEach push

141/s

Array.prototype.push.apply()

133/s

push spread operator

132/s

spread operator

53/s

Fastest: Lodash concat (3.2x faster)

View exact numbers

✓ Lodash concat: 173 ops/sec
• Array.prototype.concat: 160 ops/sec
• forEach push: 141 ops/sec
• Array.prototype.push.apply(): 133 ops/sec
• push spread operator: 132 ops/sec
• spread operator: 53 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
push spread operator
Lodash concat
Array.prototype.push.apply()
spread operator
Array.prototype.concat
forEach push

Fastest: N/A

Slowest: N/A

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

Array.prototype.concat

367/s

forEach push

329/s

Array.prototype.push.apply()

317/s

Lodash concat

270/s

push spread operator

184/s

spread operator

70/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat	367 Ops/sec
forEach push	329 Ops/sec
Array.prototype.push.apply()	317 Ops/sec
Lodash concat	270 Ops/sec
push spread operator	184 Ops/sec
spread operator	70 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark compares the performance of different methods for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. `_.concat()` from the Lodash library
3. `push.apply()`
4. The spread operator (`...`)
5. The push spread operator (introduced in ECMAScript 2018)
6. A custom implementation using a `forEach` loop

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions for tasks such as array manipulation, string processing, and more. In this benchmark, Lodash's `concat()` function is used to concatenate arrays.

**Options Compared**

Here's a brief overview of each option:

1. **`Array.prototype.concat()`**: This method creates a new array by concatenating the elements of two or more arrays.
2. **`.concat()` from Lodash**: Similar to the built-in method, but it returns an immutable copy of the concatenated array.
3. **`push.apply()`**: This method applies the `push()` function to each element in an array and pushes its arguments onto the target array.
4. **Spread Operator (`...`)**: The spread operator is a syntax sugar for creating a new array by spreading the elements of another array.
5. **Push Spread Operator (ECMAScript 2018)**: Introduced in ECMAScript 2018, this operator allows you to push multiple values onto an array at once.
6. **Custom `forEach` loop**: This implementation uses a `forEach` loop to iterate over the generated data and push each element onto the result array.

**Pros and Cons**

Here's a brief summary of the pros and cons for each option:

1. **`Array.prototype.concat()`**:
	* Pros: Simple, widely supported, and efficient.
	* Cons: Creates a new array, which can be memory-intensive for large datasets.
2. **`.concat()` from Lodash**:
	* Pros: Returns an immutable copy of the concatenated array, making it thread-safe.
	* Cons: Requires importing the Lodash library, adds overhead due to immutability.
3. **`push.apply()`**:
	* Pros: Efficient and memory-friendly, as it doesn't create a new array.
	* Cons: Less readable and less intuitive than other methods.
4. **Spread Operator (`...`)**:
	* Pros: Simple, efficient, and modern syntax.
	* Cons: Not supported in older browsers or environments.
5. **Push Spread Operator (ECMAScript 2018)**:
	* Pros: Efficient, modern syntax, and widely supported.
	* Cons: Limited to ECMAScript 2018 and later versions.
6. **Custom `forEach` loop**:
	* Pros: Highly customizable, readable, and efficient.
	* Cons: Requires manual iteration and indexing.

**Other Considerations**

When choosing a method for concatenating arrays, consider the following factors:

* Memory constraints: If working with large datasets, choose methods that minimize memory allocation and copying (e.g., `push.apply()` or spread operator).
* Performance requirements: For high-performance applications, consider using optimized libraries like Lodash's `concat()`.
* Code readability and maintainability: Choose methods that are intuitive and easy to understand for your target audience.
* Browser support: If working across older browsers, choose methods that are widely supported or use polyfills.

In conclusion, the choice of method depends on the specific requirements of your project, including memory constraints, performance needs, code readability, and browser support.

Array with objects concatanation (1) (version: 1) Benchmark.js

Array.prototype.concat vs lodash.concat vs. push.apply vs. spread operator vs. push spread operator vs. push in for loop

Comparing performance of: push spread operator vs Lodash concat vs Array.prototype.push.apply() vs spread operator vs Array.prototype.concat vs forEach push

Created: 2 years ago by: Registered User

Go to the latest result

push spread operator

Lodash concat

Array.prototype.push.apply()

spread operator

Array.prototype.concat

forEach push

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `push spread operator vs Lodash concat vs Array.prototype.push.apply() vs spread operator vs Array.prototype.concat vs forEach push`