Benchmark: Array.prototype.concat vs spread operator - Immutable version

Array.prototype.concat vs spread operator - Immutable version (version: 3)

Compare the new ES6 spread operator with the traditional concat() method. All methods create a fresh array to simulate an environment where immutable data is a requirement.

Comparing performance of: Array.prototype.concat vs spread operator vs Lodash merge

Created: 6 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

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

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

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [1,2].concat(params);
var params = [ "hello", true, 7 ];
var other = [1,2].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ ...[1, 2], ...params ]
var params = [ "hello", true, 7 ]
var other = [ ...[1, 2], ...params ]
Lodash merge
var params = [ "hello", true, 7 ]; var other = _.merge([], [1, 2], params);
var params = [ "hello", true, 7 ];
var other = _.merge([], [1, 2], params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Array.prototype.concat
spread operator
Lodash merge

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 68 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5390275.5 Ops/sec
spread operator	21683872.0 Ops/sec
Lodash merge	353159.4 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks.

What is tested?

The provided JSON represents three individual test cases that compare different approaches to concatenating arrays in JavaScript:

Array.prototype.concat (traditional method)
Spread operator (...)
Lodash merge (_.merge())

Each test case creates an array params with some initial elements and then concatenates it with another array using the respective approach.

Options compared

The three options are compared in terms of performance, specifically execution time per second (ExecutionsPerSecond).

Pros and Cons of each approach:

Array.prototype.concat:
- Pros: widely supported, simple to implement.
- Cons: creates a new array object, which can be inefficient for large arrays or when immutability is required.
Spread operator (...):
- Pros: modern and efficient way of concatenating arrays, avoids creating a new array object.
- Cons: requires compatibility with older browsers or JavaScript versions that don't support the spread operator.
Lodash merge (_.merge()):
- Pros: provides an additional layer of abstraction, can handle more complex data structures.
- Cons: introduces overhead due to function call and argument passing, may not be as efficient as the spread operator.

Library used

The Lodash library is used in one of the test cases (.merge() method) for its convenience and flexibility. Lodash provides a comprehensive set of utility functions that can simplify code and improve performance.

Special JavaScript feature or syntax

None of the tested approaches rely on special JavaScript features or syntax beyond what's considered standard in modern JavaScript development (e.g., ES6+ syntax).

Other alternatives

If you were to consider alternative approaches, some options might include:

Using Array.prototype.push() instead of concatenating arrays.
Utilizing a custom implementation that avoids array creation and copying.
Employing parallel execution or multithreading techniques to speed up the tests.

However, these alternatives would likely introduce additional complexity and may not necessarily lead to improved performance. The tested approaches are generally well-suited for most use cases.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is tested?**

The provided JSON represents three individual test cases that compare different approaches to concatenating arrays in JavaScript:

1. `Array.prototype.concat` (traditional method)
2. Spread operator (`...`)
3. Lodash merge (`_.merge()`)

Each test case creates an array `params` with some initial elements and then concatenates it with another array using the respective approach.

**Options compared**

The three options are compared in terms of performance, specifically execution time per second (ExecutionsPerSecond).

**Pros and Cons of each approach:**

1. **Array.prototype.concat**:
	* Pros: widely supported, simple to implement.
	* Cons: creates a new array object, which can be inefficient for large arrays or when immutability is required.
2. **Spread operator (`...`)**:
	* Pros: modern and efficient way of concatenating arrays, avoids creating a new array object.
	* Cons: requires compatibility with older browsers or JavaScript versions that don't support the spread operator.
3. **Lodash merge (`_.merge()`)**:
	* Pros: provides an additional layer of abstraction, can handle more complex data structures.
	* Cons: introduces overhead due to function call and argument passing, may not be as efficient as the spread operator.

**Library used**

The Lodash library is used in one of the test cases (`.merge()` method) for its convenience and flexibility. Lodash provides a comprehensive set of utility functions that can simplify code and improve performance.

**Special JavaScript feature or syntax**

None of the tested approaches rely on special JavaScript features or syntax beyond what's considered standard in modern JavaScript development (e.g., ES6+ syntax).

**Other alternatives**

If you were to consider alternative approaches, some options might include:

* Using `Array.prototype.push()` instead of concatenating arrays.
* Utilizing a custom implementation that avoids array creation and copying.
* Employing parallel execution or multithreading techniques to speed up the tests.

However, these alternatives would likely introduce additional complexity and may not necessarily lead to improved performance. The tested approaches are generally well-suited for most use cases.

Related benchmarks: