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

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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

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 2 months ago):