Benchmark: Array.prototype.concat vs spread operator vs Array.prototype.push & Array.from

Script Preparation code:

var data = [...Array(1000).keys()];

Tests:

Array.prototype.concat
const data2 = data.concat('hellow', true, 7);
spread operator
const data2 = [...data, "hello", true, 7]
Array.prototype.push & Array.from
data.push('hello', true, 7) const data2 = Array.from(data.values())

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Array.prototype.push & Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

spread operator

885K/s

Array.prototype.concat

221K/s

Array.prototype.push & Array.from

2K/s

View exact numbers

Test name	Executions per second
✓ spread operator	885,322 Ops/sec
Array.prototype.concat	221,340 Ops/sec
Array.prototype.push & Array.from	1,892 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what is being tested.

**Benchmark Definition**

The benchmark compares three ways to concatenate or manipulate an array in JavaScript:

1. **Array.prototype.concat**: This method takes multiple arrays as arguments and returns a new array containing all the elements from the input arrays.
2. **Spread operator (new ES6 syntax)**: This operator is used to expand an iterable (such as an array) into individual elements, which can then be used in a function or other expression.
3. **Array.prototype.push & Array.from**: This method uses `push` to add one or more elements to the end of an array and then converts the array to a new array using `Array.from`.

**Options Compared**

The three options are compared in terms of their performance, which is measured by the number of executions per second.

**Pros and Cons of Each Approach**

1. **Array.prototype.concat**:
	* Pros: Simple and well-established syntax.
	* Cons: Creates a new array, which can be memory-intensive for large datasets.
2. **Spread operator (new ES6 syntax)**:
	* Pros: More expressive and efficient than `concat`, as it avoids creating an intermediate array.
	* Cons: Requires support for the ES6 syntax, which may not be present in older browsers or environments.
3. **Array.prototype.push & Array.from**:
	* Pros: Similar to `concat` but uses `push` to modify the original array, reducing memory allocation.
	* Cons: May have performance issues due to the need to iterate over the array elements.

**Library and Purpose**

None of the options use a library specifically. However, it's worth noting that some browsers may have optimized implementations for these methods.

**Special JS Feature or Syntax**

The benchmark uses the ES6 spread operator (`...`), which is a new syntax introduced in ECMAScript 2015 (ES6). This feature allows for more concise and expressive array manipulation.

**Other Considerations**

When choosing an approach, consider factors such as:

* Memory usage: If you're working with large datasets, the spread operator might be a better choice to avoid creating intermediate arrays.
* Browser support: Ensure that your target browsers support the ES6 syntax.
* Performance: The benchmark results show that the spread operator performs well in this specific scenario.

**Alternatives**

If you're looking for alternative approaches or want to explore other options, consider:

1. **Array.prototype.reduce()**: This method can be used to concatenate arrays by reducing an accumulator array with each element from the input array.
2. **String interpolation**: In modern browsers, string interpolation can be used to concatenate strings using template literals (e.g., `const data2 = `${data}, 'hello', ${true && 1}, ${7}`;`).
3. **Other libraries or frameworks**: Depending on your specific use case and requirements, other libraries or frameworks might offer optimized implementations for array concatenation or manipulation.

Array.prototype.concat vs spread operator vs Array.prototype.push & Array.from (version: 0) Benchmark.js

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

Comparing performance of: `Array.prototype.concat vs spread operator vs Array.prototype.push & Array.from`

Created: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Array.prototype.push & Array.from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.prototype.concat vs spread operator vs Array.prototype.push & Array.from (version: 0) Benchmark.js

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

Comparing performance of: Array.prototype.concat vs spread operator vs Array.prototype.push & Array.from

Created: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Array.prototype.push & Array.from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.prototype.concat vs spread operator vs Array.prototype.push & Array.from`