Benchmark: Adam - Array concat vs spread operator vs push

HTML Preparation code:

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

Script Preparation code:

var existing = [ 1, 2, "hello", true, 7 ];
var newi = [1, 1, 1];

Tests:

Array.prototype.concat
var test = existing.concat(newi);
spread operator
var test = [ ...existing, ...newi ];
copy on push
var test = newi.forEach(i => existing.concat().push(i));
directly push
existing.forEach(i => newi.push(i));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
copy on push
directly push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its results.

**Benchmark Overview**

The benchmark is designed to compare four different approaches for concatenating arrays in JavaScript:

1. Using the `concat()` method
2. Using the spread operator (`...`)
3. Copying the original array using a loop (pushing elements one by one)
4. Copying the new array using a loop and pushing elements on the original array

**Options Compared**

The benchmark compares the performance of these four approaches:

* `Array.prototype.concat()`: The traditional method of concatenating arrays.
* Spread operator (`...`): A new syntax introduced in ES6 that allows for more concise array creation.
* Copy on push: This approach uses a loop to copy elements from one array to another and then pushes them onto the original array.
* Directly push: This approach uses a loop to directly push elements onto the original array.

**Pros and Cons of Each Approach**

1. `Array.prototype.concat()`:
	* Pros: Simple, widely supported, and easy to read.
	* Cons: Can be slow for large arrays due to the overhead of creating a new array object.
2. Spread operator (`...`):
	* Pros: More concise, efficient, and readable.
	* Cons: May not be supported in older browsers or environments that don't support ES6 features.
3. Copy on push:
	* Pros: Efficient for large arrays, as it avoids creating a new array object.
	* Cons: Can be slower due to the loop overhead, and may not be as readable as other approaches.
4. Directly push:
	* Pros: Simple and efficient for small arrays, but can lead to performance issues with large arrays due to the loop overhead.

**Library Used**

The benchmark uses Lodash.js library, which is a popular utility library for JavaScript that provides various functions for tasks like array manipulation, string manipulation, and more. In this case, it's used in the "Html Preparation Code" section to include the Lodash.js file on the webpage.

**Special JS Features/Syntax**

None of the benchmark tests use any special JavaScript features or syntax beyond what's standard for ES6 and later versions. All test cases are written in standard JavaScript syntax.

**Alternatives**

If you're looking for alternative approaches, here are a few more options:

* Using `Array.prototype.reduce()` to concatenate arrays
* Using `Array.prototype.slice()` to create a shallow copy of an array and then concatenating it with the new array
* Using a library like Underscore.js or Ramda, which provide optimized functions for array manipulation

Keep in mind that the best approach will depend on your specific use case, performance requirements, and personal preference.

Related benchmarks:

Adam - Array concat vs spread operator vs push (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs copy on push vs directly push

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

copy on push

directly push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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