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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

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

Fastest: N/A

Slowest: N/A

No previous run results

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