Benchmark: Array.prototype.concat vs spread operator

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

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 ]
jQuery merge
var params = [ "hello", true, 7 ]; var other = $.merge([1, 2], params);
lodash concat
var params = [ "hello", true, 7 ]; var other = _.concat([1, 2], params);
Array prototype concat
var params = [ "hello", true, 7 ]; var other = Array.prototype.concat.apply([], [[1, 2], params]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
jQuery merge
lodash concat
Array prototype concat

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of different approaches to concatenate an array in JavaScript: `Array.prototype.concat()`, the spread operator (`...`), and three external libraries: jQuery, Lodash, and their respective `concat()` methods.

**Comparison of Approaches**

There are four main approaches being compared:

1. **`Array.prototype.concat()`**: The traditional method for concatenating arrays.
2. **Spread Operator (`...`)**: A new ES6 feature introduced in 2015 for creating new arrays from existing ones.
3. **jQuery merge**: jQuery's `$.merge()` function, which merges two or more arrays into one.
4. **Lodash concat**: Lodash's `concat()` function, a utility function that concatenates arrays.

**Pros and Cons of Each Approach**

1. **`Array.prototype.concat()`**:
	* Pros: Widely supported, well-established method.
	* Cons: Can be slow for large arrays due to the overhead of creating intermediate arrays.
2. **Spread Operator (`...`)**:
	* Pros: Fast and efficient, as it avoids the overhead of creating intermediate arrays.
	* Cons: Only works with ES6+ compliant browsers and environments.
3. **jQuery merge**:
	* Pros: Fast and efficient, as it uses native array merging.
	* Cons: jQuery is a larger library that may introduce unnecessary overhead.
4. **Lodash concat**:
	* Pros: Fast and efficient, as it uses optimized internal implementation.
	* Cons: Introduces additional dependency on Lodash.

**Library Descriptions**

1. **jQuery**: A popular JavaScript library for DOM manipulation, event handling, and Ajax interactions.
2. **Lodash**: A utility library that provides a comprehensive set of functions for working with arrays, objects, and other data structures.

**Special JavaScript Features/Syntax**

The spread operator (`...`) is a new ES6 feature introduced in 2015 for creating new arrays from existing ones. It uses the syntax `new Array(...)` or `[ ...args ]` to create a new array by spreading elements from an existing array.

**Alternative Approaches**

Other approaches that could be used to concatenate arrays include:

1. **Array.prototype.push()**: Adding elements to the end of an array using `push()`.
2. **String concatenation**: Using the `+` operator to concatenate strings.
3. **Array.from() and spread operator**: Creating a new array from an existing iterable using `Array.from()` and spreading it into a new array.

However, these approaches may not be as efficient or elegant as the methods being compared in this benchmark.

Latest run results:

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

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

Browser/OS: Chrome 66 on Mac OS X 10.12.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5188673.0 Ops/sec
spread operator	4276232.0 Ops/sec
jQuery merge	1563085.9 Ops/sec
lodash concat	1351093.2 Ops/sec
Array prototype concat	2026764.6 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: Array.prototype.concat vs spread operator vs jQuery merge vs lodash concat vs Array prototype concat

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

jQuery merge

lodash concat

Array prototype concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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