Benchmark: Array push vs spread concat'''

Script Preparation code:

var arr1 = [];
var person = {
    name: 'John',
    lastname: 'Doe',
};
for (let i = 0; i < 30; i++) {
    arr1.push(person);
}
var arr2 = [];
for (let i = 30; i < 60; i++) {
    arr2.push(person);
}

Tests:

Spread and map
var result = [ ...(arr1.map(x => ({ ...person, id: '1' }))), ...(arr2.map(x => ({ ...person, id: '1' }))), ];
Simple for loop
var resul2 = []; for (let item of arr1) { resul2.push({ ...person, id: '1' }); } for (let item of arr2) { resul2.push({ ...person, id: '1' }); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread and map
Simple for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 106 on Windows

View result in a separate tab

Test name	Executions per second
Spread and map	24713.5 Ops/sec
Simple for loop	24747.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark tests the performance of two approaches: using the spread operator (`...`) with `Array.prototype.map()` versus a simple for loop.

**Options Being Compared**

The benchmark compares the following options:

1. **Spread Operator + Array.prototype.map()**: This approach uses the spread operator to create a new array from an existing one, and then maps over it to create a new array of objects.
2. **Simple For Loop**: This approach uses a traditional for loop to push objects onto two separate arrays.

**Pros and Cons**

* **Spread Operator + Array.prototype.map()**:
	+ Pros: More concise and readable code, eliminates the need for manual indexing.
	+ Cons: May incur additional overhead due to the creation of intermediate arrays.
* **Simple For Loop**:
	+ Pros: Can be more efficient in terms of memory usage, as it avoids creating intermediate arrays.
	+ Cons: Requires manual indexing and can lead to more complex code.

**Library Used**

None. This benchmark does not use any external libraries.

**Special JS Features or Syntax**

The spread operator (`...`) is a feature introduced in ECMAScript 2018 (ES2018). It allows for the creation of new arrays by spreading existing ones, and can also be used to create objects by spreading other objects.

**Benchmark Preparation Code Explanation**

The preparation code sets up two arrays, `arr1` and `arr2`, each containing 30 objects. The objects have a `name` and `lastname` property, as well as an additional `id` property that is set to `'1'`. The code then pushes these objects onto the respective arrays using either the spread operator with `Array.prototype.map()` or a simple for loop.

**Other Alternatives**

There are other approaches that could be used to solve this benchmark, such as:

* Using `Array.prototype.reduce()` instead of `Array.prototype.map()`
* Using a more efficient data structure, such as an object map
* Optimizing the loop iterations using techniques like loop unrolling or SIMD instructions

However, these alternatives may not provide significant performance benefits over the existing approaches, and are likely to increase code complexity.

Related benchmarks:

Array push vs spread concat''' (version: 0)

Comparing performance of: Spread and map vs Simple for loop

Created: 2 years ago by: Guest

Jump to the latest result

Spread and map

Simple for loop

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