Benchmark: Array with objects concatanation (1)

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

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: 8 months 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

Test name	Executions per second
push spread operator	184.3 Ops/sec
Lodash concat	269.8 Ops/sec
Array.prototype.push.apply()	317.2 Ops/sec
spread operator	69.7 Ops/sec
Array.prototype.concat	366.7 Ops/sec
forEach push	329.3 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.

Related benchmarks:

Array with objects concatanation (1) (version: 1)

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

Jump to the latest result

push spread operator

Lodash concat

Array.prototype.push.apply()

spread operator

Array.prototype.concat

forEach push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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