Benchmark: concat vs lodash.concat vs destructuring

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);
Destructure
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
Destructure

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	43304500.0 Ops/sec
Lodash concat	20112144.0 Ops/sec
Destructure	30655782.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark definition is a JSON object that outlines the test cases and options being compared. In this case, we have three individual test cases:

1. `Array.prototype.concat`
2. `Lodash concat`
3. `Destructure`

The test cases involve concatenating two arrays: `[ "red", "wine" ]` and an array of strings created from the variable `params`.

**Options being compared**

We're comparing three approaches:

* **Array.prototype.concat**: This is a built-in JavaScript method that concatenates two arrays.
* **Lodash concat**: Lodash is a popular utility library for JavaScript. The `concat` function in Lodash is used to concatenate two or more arrays.
* **Destructure**: This approach uses the spread operator (`...`) to create a new array from an existing one.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Array.prototype.concat**:
	* Pros: Built-in method, no additional dependencies required.
	* Cons: May be slower due to method lookup and execution overhead.
2. **Lodash concat**:
	* Pros: Can be faster than the built-in method due to caching and optimized implementation.
	* Cons: Requires Lodash library to be included in the test environment.
3. **Destructure**:
	* Pros: No additional dependencies required, can be faster due to direct array manipulation.
	* Cons: May require modern JavaScript versions (ECMAScript 2018+) to work.

**Library**

In this benchmark, we're using Lodash version 4.17.5 for its `concat` function. Lodash is a popular utility library that provides various functions for tasks such as string manipulation, array and object manipulation, and more.

**Special JS feature or syntax**

There's no special JavaScript feature or syntax used in this benchmark. The focus is on comparing three different approaches to concatenating arrays.

**Other alternatives**

If you're interested in exploring alternative approaches, you could consider using other libraries like `underscore` (which is similar to Lodash) or `native array methods` such as `Array.prototype.reduce()` or `Array.prototype.push()`. You could also explore modern JavaScript features like **template literals** or **rest parameter syntax** for creating arrays.

Keep in mind that these alternatives may introduce additional dependencies, require specific JavaScript versions, or have different performance characteristics.

Related benchmarks:

concat vs lodash.concat vs destructuring (version: 0)

Comparing performance of: Array.prototype.concat vs Lodash concat vs Destructure

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Lodash concat

Destructure

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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