Benchmark: Array.prototype.concat vs spread operator

Script Preparation code:

var myArray = [ "hello", true, 7 ]

Tests:

slice
var other = myArray.slice();
spread operator
var other = [ ...myArray ]
concat into empty array
[].concat(myArray);
Array.from
var other = Array.from(myArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
spread operator
concat into empty array
Array.from

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark comparison between four different approaches to concatenate an array:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. `slice()` method
4. `Array.from()` method

The goal is to measure the performance of each approach in creating a new array by concatenating an existing array.

**Options Compared**

* `Array.prototype.concat()`: This method creates a new array and copies all elements from the original array into the new array.
* The new ES6 spread operator (`...`): This operator creates a new array by copying elements from the original array.
* `slice()` method: This method returns a shallow copy of a portion of an array, starting at the specified start index and ending at the specified end index (exclusive).
* `Array.from()`: This method creates a new array from an iterable or an array-like object.

**Pros and Cons**

Here's a brief summary of each approach:

* `Array.prototype.concat()`:
	+ Pros: Simple and widely supported.
	+ Cons: Creates a new array, which can be inefficient for large arrays.
* The new ES6 spread operator (`...`):
	+ Pros: Concise and efficient way to create a new array.
	+ Cons: Not as widely supported as other methods.
* `slice()` method:
	+ Pros: Returns a shallow copy of a portion of an array, which can be useful in certain situations.
	+ Cons: Can be slower than other methods due to the overhead of creating a new object.
* `Array.from()`: 
	+ Pros: Creates a new array from an iterable or array-like object, making it suitable for various use cases.
	+ Cons: Can be less efficient than other methods when dealing with large arrays.

**Library and Special JS Features**

None of the benchmarked approaches rely on any specific JavaScript library. However, it's worth noting that `Array.from()` is a relatively new method introduced in ECMAScript 2015 (ES6), which may not be supported by all browsers or environments.

**Test Case Analysis**

The test cases provided measure the performance of each approach:

* `slice()`: Measures the time taken to create a shallow copy of an array.
* Spread operator (`...`): Measures the time taken to create a new array using the spread operator.
* `concat()` into empty array: Measures the time taken to concatenate an array with an empty array using the `concat()` method.
* `Array.from()`: Measures the time taken to create a new array from the original array using the `Array.from()` method.

**Other Alternatives**

If you're looking for alternative approaches, consider the following:

* Using `map()` and then concatenating arrays: This approach can be more efficient than creating an empty array and concatenating with `concat()`.
* Using `reduce()` to concatenate arrays: This approach can be more efficient than creating an empty array and concatenating with `concat()`.
* Using a library like Lodash or Ramda, which provide optimized functions for array manipulation.

Keep in mind that the best approach depends on your specific use case and performance requirements.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36

Browser/OS: Chrome 81 on Mac OS X 10.15.2

View result in a separate tab

Test name	Executions per second
slice	13861940.0 Ops/sec
spread operator	12122413.0 Ops/sec
concat into empty array	4769634.5 Ops/sec
Array.from	4653190.0 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator (version: 0)

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

Comparing performance of: slice vs spread operator vs concat into empty array vs Array.from

Created: 6 years ago by: Guest

Jump to the latest result

slice

spread operator

concat into empty array

Array.from

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):