Benchmark: concat vs lodash.concat vs spread operator

HTML Preparation code:

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

Tests:

Array.prototype.concat
var params = [ "hello", "hello", "sname" ]; var other = [ "red", "wine" ].concat(params);
Lodash concat
var params = [ "hello", "hello", "sname" ]; var other = _.concat([ "red", "wine" ], params);
Spread operator
var params = ["hello", "hello", "sname"]; var other = [...["red", "wine"], ...params];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Lodash concat
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46

Browser/OS: Chrome 99 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7895260.0 Ops/sec
Lodash concat	2086849.6 Ops/sec
Spread operator	27507894.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is tested on MeasureThat.net.

**Benchmark Definition**

The website allows users to create and run JavaScript microbenchmarks. The benchmark definition is represented by a JSON object that contains information about the benchmark, including its name, description, script preparation code, HTML preparation code, and individual test cases.

In this case, the benchmark is comparing the performance of three different approaches for concatenating arrays: `Array.prototype.concat`, `Lodash.concat` (a utility function from the Lodash library), and the spread operator (`...`).

**Individual Test Cases**

The test cases are represented by an array of objects, each containing a "Benchmark Definition" string that describes the specific scenario being tested. There are three test cases:

1. **Array.prototype.concat**: This test case creates two arrays, `params` and `other`, and concatenates them using the `concat()` method.
2. **Lodash concat**: This test case uses the Lodash library to concatenate two arrays: `["red", "wine"]` and `params`.
3. **Spread operator**: This test case creates two arrays, `params` and a new array containing `["red", "wine"]`, and concatenates them using the spread operator (`...`).

**Library**

The Lodash library is used in one of the test cases to provide a utility function for concatenating arrays.

**Special JS Features/Syntax**

None of the test cases use special JavaScript features or syntax that are not widely supported. The benchmark focuses on comparing the performance of different array concatenation methods.

**Options Compared**

The three options being compared are:

1. **Array.prototype.concat**: This method is part of the built-in JavaScript Array prototype and has a specific syntax.
2. **Lodash.concat**: This function is part of the Lodash library and provides an alternative way to concatenate arrays.
3. **Spread operator (`...`)**: This is a modern JavaScript feature that allows for concise array concatenation.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Array.prototype.concat**: Pros: widely supported, efficient for small arrays. Cons: can be slow for large arrays due to the need to create a new array.
2. **Lodash.concat**: Pros: provides an alternative way to concatenate arrays, may be faster than Array.prototype.concat for some scenarios. Cons: requires including the Lodash library, may not be suitable for all use cases.
3. **Spread operator (`...`)**: Pros: concise and expressive, efficient for large arrays. Cons: only supported in modern browsers or environments that support ES6+ syntax.

**Other Alternatives**

There are other array concatenation methods available, such as using `Array.prototype.push()` or the `.concat()` method with an array of indices. However, these alternatives may not be as concise or efficient as the three options being compared.

In summary, MeasureThat.net provides a useful benchmark for comparing the performance of different array concatenation methods in JavaScript. By testing these approaches, developers can choose the most suitable option for their specific use case and ensure optimal performance.

Related benchmarks:

concat vs lodash.concat vs spread operator (version: 0)

Comparing performance of: Array.prototype.concat vs Lodash concat vs Spread operator

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Lodash concat

Spread operator

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