Benchmark: Array combination by destructuring vs concat()

Script Preparation code:

var array_1 = [...Array(3).keys()].map(i => { someVal: i });
var array_2 = [...Array(30).keys()].map(i => { someVal: i });
var array_3 = [...Array(2).keys()].map(i => { someVal: i });

Tests:

concat()
const intermediate = array_1.concat(array_2); const result = intermediate.concat(array_3);
Destructuring
const intermediate = [...array_1, ...array_2]; const result = [...intermediate, ...array_3];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat()
Destructuring

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
concat()	11923504.0 Ops/sec
Destructuring	2339008.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and benchmark preparation code to understand what's being tested.

**Benchmark Definition**

The test is comparing two approaches for concatenating arrays:

1. `concat()`: This method takes another array as an argument and returns a new array with all elements from both arrays.
2. "Destructuring" (using the spread operator `...`): This approach involves using the spread operator to concatenate arrays.

**Script Preparation Code**

The script prepares three arrays: `array_1`, `array_2`, and `array_3`. Each array contains a single property with a value equal to its index in the array. These arrays are used as test data for the concatenation operations.

**Html Preparation Code**

There is no HTML preparation code provided, which means the benchmark focuses solely on JavaScript performance.

**Individual Test Cases**

The benchmark consists of two individual test cases:

1. `concat()`: This test case creates an intermediate array by concatenating `array_1` and `array_2`, and then concatenates the result with `array_3`.
2. "Destructuring": This test case creates an intermediate array by spreading `array_1`, `array_2`, and `array_3` using the spread operator, and then spreads the result again to concatenate it with another array.

**Library and Special JS Features**

There are no external libraries mentioned in the benchmark definition. However, JavaScript features like destructuring (using the spread operator) and the `concat()` method are used as alternatives for concatenating arrays.

**Pros and Cons of Different Approaches**

1. `concat()`: This approach can be slower due to the overhead of creating a new array and copying elements from one array to another. However, it's often easier to read and maintain.
2. "Destructuring" (using the spread operator): This approach is generally faster because it avoids creating a new array and instead modifies the existing arrays in place. However, it can be less readable and may require more attention to detail when working with complex data structures.

**Other Considerations**

1. Array length: The benchmark uses arrays of different lengths (`array_1` has 3 elements, `array_2` has 30 elements, and `array_3` has 2 elements). This might affect the performance differences between the two approaches.
2. Browser and device platform: The benchmark results are reported for a specific browser (Chrome 115) on a desktop platform. Other browsers or devices may exhibit different performance characteristics.

**Alternatives**

Other alternatives for concatenating arrays in JavaScript include:

1. Using `Array.prototype.push()` to add elements to an array.
2. Using `Array.prototype.splice()` to replace elements in an array.
3. Using libraries like Lodash, which provides optimized functions for array operations.
4. Implementing a custom iterator or generator function to concatenate arrays.

Keep in mind that the best approach depends on the specific use case and performance requirements.

Related benchmarks:

Array combination by destructuring vs concat() (version: 0)

Test how a couple of succesive object array concatenations perform.

Comparing performance of: concat() vs Destructuring

Created: 2 years ago by: Registered User

Jump to the latest result

concat()

Destructuring

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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