Benchmark: concat vs spread operator vs apply vs constructor

Script Preparation code:

var constructor = Function.prototype.apply.bind(Array.prototype.constructor, null);

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ]; var other = params.push(...[1, 2]);
apply proto
var params = [ "hello", true, 7 ]; Array.prototype.push.apply(params, [1, 2]);
params.push
var params = [ "hello", true, 7 ]; var other = params.push.apply(params, [1, 2]);
constructor
var params = [ "hello", true, 7 ]; var other = constructor(params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
apply proto
params.push
constructor

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3293586.2 Ops/sec
spread operator	13326310.0 Ops/sec
apply proto	2084458.9 Ops/sec
params.push	9763438.0 Ops/sec
constructor	2388833.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark test comparing four different methods for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. Spread operator (`...`)
3. `apply` method with `Function.prototype.apply` and `Array.prototype.constructor` as targets
4. Custom constructor method

**What is being tested?**

The benchmark measures the performance of each method on a specific test case: concatenating an array with two existing arrays containing different types of elements (strings, boolean, and number).

**Options Comparison**

Here's a brief overview of each option:

1. **`Array.prototype.concat()`**: This method creates a new array by copying all elements from the source arrays.
	* Pros: Simple, widely supported, and well-documented.
	* Cons: Creates a new array object, which can lead to memory allocation overhead.
2. **Spread operator (`...`)**: This syntax allows you to create a new array by spreading elements from existing arrays or objects.
	* Pros: Efficient in terms of performance, as it avoids creating a new array object.
	* Cons: Requires modern JavaScript versions (ECMAScript 2018+), and its behavior can be counterintuitive for developers unfamiliar with the syntax.
3. **`apply` method with `Function.prototype.apply` and `Array.prototype.constructor` as targets**: This approach uses a function to apply the elements of one array to another array, effectively concatenating them.
	* Pros: Can be used in older JavaScript environments where spread operator is not supported.
	* Cons: Less readable and more verbose than other methods, requiring more setup code.
4. **Custom constructor method**: This option creates a new constructor function specifically for the purpose of concatenation.
	* Pros: Allows for fine-grained control over the concatenation process.
	* Cons: More complex to implement and maintain, and may not be necessary for most use cases.

**Library Usage**

The benchmark uses the `Array.prototype.push` method implicitly, as it's a built-in method that modifies the original array. However, this is a common pattern in JavaScript development.

**Special JS Features or Syntax**

None of the options explicitly utilize special JavaScript features like `let`, `const`, or modern syntax, which are not relevant to the performance comparison being measured.

**Other Considerations**

When choosing an array concatenation method, consider the following factors:

* Performance: If you're dealing with large arrays or need optimal performance, the spread operator (`...`) is likely a good choice.
* Compatibility: If you need to support older JavaScript versions, use `Array.prototype.concat()` or explore alternative methods like the custom constructor approach.
* Readability: Choose a method that balances conciseness and readability for your specific use case.

**Alternatives**

Other alternatives for array concatenation include:

1. **`Set` objects**: Using `Set` can provide faster lookup times, but may not be suitable for concatenating large arrays.
2. **`TypedArray` classes**: These classes provide more efficient storage and manipulation of numerical data, but are generally used for specific use cases (e.g., image processing).
3. **External libraries or frameworks**: Depending on your project requirements, external libraries like Lodash or Ramda might offer optimized array concatenation methods.

Keep in mind that performance differences between these alternatives may be negligible unless you're working with extremely large datasets or require extreme optimization for a specific use case.

Related benchmarks:

concat vs spread operator vs apply vs constructor (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and apply

Comparing performance of: Array.prototype.concat vs spread operator vs apply proto vs params.push vs constructor

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

apply proto

params.push

constructor

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