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];

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 18 runs

Destructure

40.1M/s

Array.prototype.concat

15.3M/s

Lodash concat

7.4M/s

Fastest: Destructure (5.4x faster)

View exact numbers

✓ Destructure: 40,135,564 ops/sec
• Array.prototype.concat: 15,335,988 ops/sec
• Lodash concat: 7,426,239 ops/sec

Firefox 8 runs

Array.prototype.concat

21.6M/s

Destructure

16.1M/s

Lodash concat

7.6M/s

Fastest: Array.prototype.concat (2.8x faster)

View exact numbers

✓ Array.prototype.concat: 21,608,032 ops/sec
• Destructure: 16,098,504 ops/sec
• Lodash concat: 7,613,379 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

Array.prototype.concat

43.3M/s

Destructure

30.7M/s

Lodash concat

20.1M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat	43,304,500 Ops/sec
Destructure	30,655,782 Ops/sec
Lodash concat	20,112,144 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.

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

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

Created: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

Lodash concat

Destructure

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 18 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

Lodash concat

Destructure

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 18 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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