Benchmark: Array concat vs spread operator vs push vs object assign vs slice vs Array from vs for loop

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
Object.assign
var params = [ "hello", true, 7 ]; var other = Object.assign([], params);
slice(0)
var params = [ "hello", true, 7 ]; var other = params.slice(0);
slice
var params = [ "hello", true, 7 ]; var other = params.slice();
Array.from
var params = [ "hello", true, 7 ]; var other = Array.from(params);
for loop
var params = [ "hello", true, 7 ]; var other = [] for (var i = params.length; i--; ) { other.unshift(params[i]) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Object.assign
slice(0)
slice
Array.from
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 18 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	16290284.0 Ops/sec
spread operator	57207780.0 Ops/sec
Push	66580240.0 Ops/sec
Object.assign	3440688.0 Ops/sec
slice(0)	106790616.0 Ops/sec
slice	107355728.0 Ops/sec
Array.from	68226128.0 Ops/sec
for loop	15645769.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

The benchmark is comparing different ways to concatenate or manipulate arrays in JavaScript:

* `Array.prototype.concat()`
* The new ES6 spread operator (`...`)
* `push()` method
* `Object.assign()` method
* `slice()` method with two variations: `slice(0)` and plain `slice()`
* `Array.from()` method

The goal is to determine which approach has the best performance in different scenarios.

Now, let's discuss each approach:

**1. `Array.prototype.concat()`**: This method creates a new array by concatenating the elements of two or more arrays. It's an older method that was widely used before ES6.

Pros: Well-established and widely supported.
Cons: Can be slower than other methods due to its internal implementation.

**2. The new ES6 spread operator (`...`)**: This is a shorthand way to expand an array or object into individual elements.

Pros: More concise and expressive, making it easier to read and write code.
Cons: May not work as expected in older browsers or environments that don't support ES6 features.

**3. `push()` method**: This method adds one or more elements to the end of an array without creating a new array.

Pros: Efficient and flexible for adding single elements.
Cons: Can lead to slower performance when adding multiple elements, as it requires shifting existing elements down.

**4. `Object.assign()` method**: This method copies the properties from one or more source objects to a target object.

Pros: Convenient for copying objects, but can be slow due to its internal implementation.
Cons: Not designed for manipulating arrays, leading to slower performance compared to native array methods.

**5. `slice()` method with two variations**: `slice(0)` returns a shallow copy of the original array, while plain `slice()` creates a new array with the specified range of elements.

Pros: Efficient and flexible for creating subsets of arrays.
Cons: Can be slow when using large ranges or deep copies.

**6. `Array.from()` method**: This method creates a new array from an iterable (e.g., a string, another array, or an object).

Pros: Convenient for creating arrays from various sources, with decent performance.
Cons: May not work as expected in older browsers or environments that don't support ES6 features.

The latest benchmark results show the relative performance of each approach:

* `slice()` and `slice(0)` seem to be the fastest approaches, likely due to their optimized internal implementations.
* The new spread operator (`...`) is close behind, making it a popular choice for code readability and expressiveness.
* `Array.prototype.concat()` falls behind, but still performs reasonably well in many cases.
* `push()` method is slower than native array methods, but can be used when adding single elements.
* `Object.assign()` method is the slowest approach due to its internal implementation and lack of support for native array manipulation.

Keep in mind that performance differences may vary depending on specific use cases, browser versions, and other factors.

Related benchmarks:

Array concat vs spread operator vs push vs object assign vs slice vs Array from vs for loop (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 Push vs Object.assign vs slice(0) vs slice vs Array.from vs for loop

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Object.assign

slice(0)

slice

Array.from

for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):