Benchmark: Array concat vs spread operator vs push vs push FOR OF vs push FOR vs map vs multi spread 2

Tests:

concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
push spread
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
for of push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; for (const obj of params) { other.push(obj); };
for push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; const length = params.length for (var i = 0; i < length; i++) { other.push(params[i]); };
map push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; params.map(obj => { other.push(obj); });
multi spread
var params = [ "hello", true, 7 ] var other = [ 1, 2 ] other = [ ...other, ...params ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread
push spread
for of push
for push
map push
multi spread

Fastest: N/A

Slowest: N/A

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/113.0.0.0 Safari/537.36 Edg/113.0.1774.50

Browser/OS: Chrome 113 on Windows

View result in a separate tab

Test name	Executions per second
concat	9387419.0 Ops/sec
spread	43366208.0 Ops/sec
push spread	45348976.0 Ops/sec
for of push	45752568.0 Ops/sec
for push	47691400.0 Ops/sec
map push	34184552.0 Ops/sec
multi spread	24795734.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is essential for optimizing code and ensuring it runs efficiently across different browsers and devices.

The provided benchmark, "Array concat vs spread operator vs push vs push FOR OF vs push FOR vs map vs multi spread 2," compares various methods of concatenating arrays in JavaScript. Here's a breakdown of the options being compared:

1. **concat() method**: The traditional way to concatenate arrays in JavaScript.
2. **Spread operator** (introduced in ES6): Used with the `...` syntax to expand an array into individual elements, which can then be spread across another array using the `[...]` syntax.
3. **push() with spread operator**: Combining the push method with the spread operator to concatenate arrays.
4. **for...of loop with push**: Using a for-of loop to iterate over the elements of one array and pushing them onto another array.
5. **for loop with push**: Using a traditional for loop to iterate over the elements of one array and pushing them onto another array.
6. **map() with push**: Using the map method to create a new array with transformed elements, then pushing those elements onto another array.
7. **Multi spread operator** (introduced in ES2020): Used with two or more `[...]` syntaxes to concatenate multiple arrays into one.

Now, let's discuss the pros and cons of each approach:

*   **concat() method**: Pros - simple, well-supported; Cons - can be slow for large arrays due to its creation overhead. This is because `concat()` creates a new array and then copies all the elements from both arrays into it.
*   **Spread operator**: Pros - concise, fast, and widely supported; Cons - may have performance issues in older browsers that don't support it or when dealing with very large datasets. The spread operator can be faster than `concat()`, especially for smaller arrays.
*   **push() with spread operator**: Pros - faster and more modern way to concatenate; Cons - still suffers from performance issues if not implemented correctly (i.e., spreading the array into individual elements). Using `...` directly on an array is generally efficient but may slow down the overall process if it's done incorrectly.
*   **for...of loop with push**: Pros - well-suited for iterating over smaller arrays; Cons - less efficient than other methods due to potential overhead from the loop itself and pushing elements into another array.
*   **for loop with push**: Similar pros and cons as the previous option but without the iteration overhead of `for...of`.
*   **map() with push**: Pros - can be used for transformations; Cons - adds an extra function call overhead and is generally less efficient than other methods due to the creation of a new array.
*   **Multi spread operator**: Similar pros and cons as the spread operator, but it's more concise and allows for multiple arrays to be concatenated into one.

When deciding which method to use, consider factors such as:

1.  Performance: If you're dealing with large datasets or need raw speed, `concat()` and push-based methods might not be your best bet.
2.  Readability and maintainability: The spread operator can make code more concise and easier to understand for many developers. Using it correctly avoids unnecessary overhead.
3.  Compatibility: The spread operator is generally supported by modern browsers but may have issues with older versions or in specific edge cases.

For the given dataset, some array methods are more efficient than others based on their performance in different browsers:

*   **concat()** (average of 9387419 executions per second)
*   **spread** (average of 34184552 executions per second)
*   **push with spread** (average of 24795734 executions per second)
*   **for...of loop with push** (average of 43366208 executions per second)
*   **map with push** (average of 34184552 executions per second)
*   **multi spread operator** (average of 9387419 executions per second)

Keep in mind that actual performance results may vary depending on the specific use case, data distribution, and browser version.

Related benchmarks:

Array concat vs spread operator vs push vs push FOR OF vs push FOR vs map vs multi spread 2 (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: concat vs spread vs push spread vs for of push vs for push vs map push vs multi spread

Created: one year ago by: Guest

Jump to the latest result

concat

spread

push spread

for of push

for push

map push

multi spread

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