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

concat()

11.9M/s

Destructuring

2.3M/s

View exact numbers

Test name	Executions per second
✓ concat()	11,923,504 Ops/sec
Destructuring	2,339,008 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.

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

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

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

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

Related benchmarks

Comparing performance of: `concat() vs Destructuring`