Benchmark: spread large array (50000 elements) performance (vs slice, splice, concat, for)

Script Preparation code:

testArray = [];
for (let i = 0; i < 50000; i++) testArray.push(i)

Tests:

Splice
const newTestArray = testArray.splice(0);
Slice
const newTestArray = testArray.slice();
Concat
const newTestArray = testArray.concat();
Spread
const newTestArray = [...testArray];
For cycle with preallocation
const testArrLen = testArray.length; const resArr = new Array(testArrLen); for (let i = 0; i < testArrLen; i++) { resArr[i] = testArray[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Splice
Slice
Concat
Spread
For cycle with preallocation

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
Splice	5548344.0 Ops/sec
Slice	6465932.0 Ops/sec
Concat	6336994.0 Ops/sec
Spread	4265602.0 Ops/sec
For cycle with preallocation	3053998.5 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 benchmark and explore what's being tested, the pros and cons of each approach, and other considerations.

**Benchmark Overview**

The test creates a large array (50000 elements) using a `for` loop and pushes random integers to it. Then, five different approaches are compared:

1. Splice
2. Slice
3. Concat
4. Spread (using the spread operator)
5. For cycle with preallocation

**Approaches Comparison**

Here's a brief explanation of each approach and their pros and cons:

1. **Splice**: Removes elements from the original array and returns an array containing those elements, starting at the index specified by `start`. The size of the returned array is equal to the number of elements removed.
	* Pros: Can be used to modify the original array.
	* Cons: Returns a new array with removed elements, which can be slower than other approaches for large arrays.
2. **Slice**: Returns a shallow copy of a portion of an array, containing the elements from the specified start index up to (but not including) the end index.
	* Pros: Returns a new array with a subset of elements, which is often faster than Splice for large arrays.
	* Cons: Can be slower than Spread for very large arrays due to memory allocation overhead.
3. **Concat**: Creates a new array by concatenating two or more arrays.
	* Pros: Fast and efficient for small arrays, as it uses a simple loop to copy elements.
	* Cons: Slow for large arrays (50000 elements), as it requires allocating new memory for each iteration.
4. **Spread** (using the spread operator `[]`): Creates a shallow copy of an array by spreading its elements into a new array.
	* Pros: Fast and efficient, as it uses a simple loop to copy elements without memory allocation overhead.
	* Cons: Requires modern browsers or environments that support the spread operator.
5. **For cycle with preallocation**: Allocates a new array with the same length as the original array and then copies elements from the original array to the new one using a `for` loop.
	* Pros: Fast and efficient, as it avoids memory allocation overhead and returns a new array with all elements.
	* Cons: Requires manual memory management and can be more error-prone than other approaches.

**Library Used**

None of the test cases use any external libraries. However, it's worth noting that if you were to implement these approaches in a real-world application, you might need to consider using libraries like `lodash` or `ramda` for utility functions, which could potentially impact performance.

**JavaScript Features and Syntax**

There are no specific JavaScript features or syntax used in this benchmark. However, the use of spread operator (`[]`) in the Spread test case is a modern feature that requires support from modern browsers or environments.

**Other Considerations**

When choosing an approach for large arrays, consider the following:

* For small arrays, the overhead of creating new arrays might be negligible.
* For large arrays (50000 elements), Splice and Slice might be slower due to memory allocation and copying elements. Spread and For cycle with preallocation are generally faster and more efficient.
* If you need to modify the original array, Splice is a good choice. Otherwise, Slice or Spread might be a better option for returning a new array.

The benchmark result shows that Spread and For cycle with preallocation are the fastest approaches, followed by Slice, then Splice. Chrome 103 on Windows Desktop is the browser that provides the best performance results.

**Alternatives**

If you're looking for alternative approaches or libraries to improve performance, consider:

* Using `Array.prototype.copyWithin()` (ES6) instead of Spread.
* Implementing a custom iterator using `Array.prototype.forEach()` and manually allocating memory for each iteration.
* Using a library like `lodash` that provides optimized implementations for array operations.

Keep in mind that the best approach will depend on your specific use case, performance requirements, and the capabilities of your target browser or environment.

Related benchmarks:

spread large array (50000 elements) performance (vs slice, splice, concat, for) (version: 0)

Comparing performance of: Splice vs Slice vs Concat vs Spread vs For cycle with preallocation

Created: 2 years ago by: Guest

Jump to the latest result

Splice

Slice

Concat

Spread

For cycle with preallocation

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