Benchmark: Array concat vs spread vs push spread, loop, apply for of

Script Preparation code:

var subarrs = [
 [ "hello", true, 7 ],
 [ "yes", "no", "maybe", false, 27 ],
 [ 16, "I", "wonder", "what", "will", "be", "fastest"]
];

Tests:

Array.prototype.concat
var other = [ ] for (const subarr of subarrs){ other = other.concat(subarr); } return other;
spread operator
let other = [ ] for (const subarr of subarrs){ other = [ ...other, ...subarr ] } return other;
Push Loop
var other = [ ] for (const subarr of subarrs){ for (const value of subarr){ other.push(value); } } return other;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push Loop

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 explain what is being tested.

The test compares three different approaches to concatenate arrays:

1. **`Array.prototype.concat()`**: This method creates a new array by copying elements from two or more source arrays. It iterates through each source array, appending each element to a new array.
2. **Spread operator (`[...new Array(), ...subarr]`)**: This syntax creates a new array by spreading the elements of an existing array (`subarr`) into a new array. The `new Array()` function is used to create an empty array, which is then spread with the elements of `subarr`.
3. **Push loop**: In this approach, a loop iterates through each element of `subarr` and pushes it onto a new array (`other`). This method does not create a new array but rather modifies the existing one.

**Options compared:**

*   Array concatenation using `Array.prototype.concat()`
*   Spread operator-based concatenation
*   Push loop approach

**Pros and Cons of each approach:**

1.  **`Array.prototype.concat()`**:
    *   **Pros:** Simple to implement, widely supported across browsers.
    *   **Cons:** Creates a new array, which can lead to increased memory usage and slower performance for large arrays.

2.  **Spread operator (`[...new Array(), ...subarr]`)**:
    *   **Pros:** More concise, does not create an intermediate array, potentially faster than `concat()`.
    *   **Cons:** Requires modern JavaScript versions (ES6+) to work natively, and may not be supported by older browsers.

3.  **Push loop**:
    *   **Pros:** Does not create a new array, can be more memory-efficient for large arrays.
    *   **Cons:** Less intuitive and less concise than the spread operator or `concat()` methods.

**Library/Language features:**

None of the test cases rely on any specific libraries. However, the use of ES6+ syntax (`let`, `const`, arrow functions) suggests that the tests are designed to work in modern browsers that support these features.

**Special JS feature/syntax:**

The spread operator (`[...new Array(), ...subarr]`) and the concise `let other = [ ]\r\nfor (const subarr of subarrs){\r\n  other = [ ...other, ...subarr ];\n}\r\nreturn other;` syntax are specific to modern JavaScript versions. If you're using an older version of JavaScript, these features might not work as expected.

**Alternatives:**

If you need to concatenate arrays in an older browser that doesn't support ES6+ syntax or the spread operator, you can use `Array.prototype.concat()` instead:

```javascript
let other = [ ];
for (const subarr of subarrs) {
  other = other.concat(subarr);
}
return other;
```

Alternatively, you can consider using libraries like Lodash that provide a more concise way to concatenate arrays across older browsers.

Keep in mind that the performance differences between these approaches may be negligible for small to medium-sized arrays. However, as the array size grows, the push loop approach might offer better performance due to its lack of intermediate array creation.

Related benchmarks:

Array concat vs spread vs push spread, loop, apply for of (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Push Loop

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push Loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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