Benchmark: spread vs splice vs concat vs push

Script Preparation code:

const original = []
for (let i=0; i<=2000; i++) {
  original.push({i})
}

Tests:

spread
const original = [] for (let i=0; i<=2000; i++) { original.push({i}) } const result = {list: []} do { result.list = [...result.list, ...original.splice(0, 100)] } while (original.length > 0)
concat
const original = [] for (let i=0; i<=2000; i++) { original.push({i}) } const result = {list: []} do { result.list = result.list.concat(original.splice(0, 100)) } while (original.length > 0)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat

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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares different ways to add elements from one array to another in JavaScript.  Specifically, it looks at the performance of:

**1. `...` Spread Operator:**

- This syntax takes all elements from an array and expands them into individual items. 
   - In the code, it combines existing elements (`result.list`) with a portion of the original array (`original.splice(0, 100)`) in each iteration.

**2. `concat()` Method:**

- This method creates a new array by joining two or more arrays together. 
   - The benchmark uses `concat` to combine the existing `result.list` with the result of `original.splice(0, 100)`.

**Performance Considerations:**

- **Spread Operator (`...`)**: Generally considered more efficient for adding elements from one array to another because it doesn't create a new array object in each iteration (like `concat()` does). This can lead to fewer memory allocations and faster processing.
 - **`concat()` Method**: 
   - Can be slower than the spread operator due to creating a new array in each call.
   - Might perform better if you need more control over how elements are joined, or if there's specific logic required during concatenation.

**Alternatives:**

* **`push()` Method:** While not directly compared here, `push()` can be used to add individual elements from the original array to a new array. It's generally slower than both `...` and `concat()` for adding multiple elements at once.
* **`slice()` Method:** 
   - If you only need to copy a portion of an array without modifying it, `slice()` is more efficient than using `splice` followed by the spread operator or `concat`.

**Important Notes:**

- Benchmark results can vary significantly depending on factors like browser, device, and JavaScript engine. Always run benchmarks multiple times and consider various environments for a comprehensive understanding.

Let me know if you have any other questions!

Related benchmarks:

spread vs splice vs concat vs push (version: 0)

Comparing performance of: spread vs concat

Created: 4 years ago by: Guest

Jump to the latest result

spread

concat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):