Benchmark: Array.prototype.concat vs spread operator preppending and appending

Tests:

Array.prototype.concat Append
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator Append
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Array.prototype.concat Preppend
var params = [ "hello", true, 7 ]; var other = params.concat([ 1, 2 ]);
spread operator Preppend
var params = [ "hello", true, 7 ] var other = [ ...params, 1, 2 ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat Append
spread operator Append
Array.prototype.concat Preppend
spread operator Preppend

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat Append	10973729.0 Ops/sec
spread operator Append	30906408.0 Ops/sec
Array.prototype.concat Preppend	9895801.0 Ops/sec
spread operator Preppend	20817246.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!

The provided JSON represents a benchmark test case on MeasureThat.net, which compares the performance of different approaches when concatenating arrays in JavaScript.

**What is tested:**

The benchmark tests four scenarios:

1. **Array.prototype.concat Append**: This approach uses the `concat()` method to append elements to an existing array.
2. **Spread operator Append**: This approach uses the new ES6 spread operator (`...`) to append elements to an existing array.
3. **Array.prototype.concat Prepend**: This approach uses the `concat()` method to prepend elements to an existing array.
4. **Spread operator Prepend**: This approach uses the new ES6 spread operator (`...`) to prepend elements to an existing array.

**Options compared:**

The benchmark compares two approaches for each scenario:

* Using `concat()` with appending/prepending
* Using the spread operator with appending/prepending

**Pros and Cons of different approaches:**

1. **`concat()` approach:**
	* Pros:
		+ Widely supported in older browsers.
		+ May be faster due to its optimized implementation.
	* Cons:
		+ Can lead to slower performance due to the creation of a new array object.
		+ May not be as efficient as the spread operator for large arrays.
2. **Spread operator approach:**
	* Pros:
		+ More concise and expressive code.
		+ Generally faster than `concat()` for large arrays.
	* Cons:
		+ May not work in older browsers that don't support ES6 features.

**Library usage:**

None of the benchmark test cases explicitly use any libraries. The examples provided only demonstrate basic JavaScript syntax.

**Special JS feature/syntax:**

The benchmark uses the new ES6 spread operator (`...`), which was introduced in ECMAScript 2015 (ES6). This allows for more concise and expressive code when working with arrays.

**Other alternatives:**

If you're looking for alternative approaches to concatenating arrays, consider using:

1. `Array.prototype.push()`: This method appends elements to the end of an array without creating a new array object.
2. Using `reduce()` or `slice()`: These methods can be used to create a new array by iterating over and combining elements from an existing array.

Keep in mind that these alternatives might have different performance characteristics depending on the specific use case and browser environment.

Related benchmarks:

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

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

Comparing performance of: Array.prototype.concat Append vs spread operator Append vs Array.prototype.concat Preppend vs spread operator Preppend

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat Append

spread operator Append

Array.prototype.concat Preppend

spread operator Preppend

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):