Benchmark: JavaScript Fastest Array Copy

JavaScript Fastest Array Copy (version: 0)

Testing the results for the fastest approach of shallow copying an array in JavaScript (concat, slice, for loop, while loop, spread operator).

Comparing performance of: Array.concat vs Array.slice vs For loop vs For loop with declared length vs While loop vs Spread operator vs Slice with begin argument vs Slice with begin and end argument

Created: 4 years ago by: Guest

Jump to the latest result

Script Preparation code:

var arrayToCopy = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ];

Tests:

Array.concat
var shallowCopy = arrayToCopy.concat();
Array.slice
var shallowCopy = arrayToCopy.slice();
For loop
var shallowCopy = []; for (let i = 0; i < arrayToCopy.length; ++i) { shallowCopy.push(arrayToCopy[i]); }
For loop with declared length
var shallowCopy = []; var arrayLength = arrayToCopy.length; for (let i = 0; i < arrayLength; ++i) { shallowCopy.push(arrayToCopy[i]); }
While loop
var shallowCopy = []; let i = arrayToCopy.length - 1; while (i--) { shallowCopy.push(arrayToCopy[i]); }
Spread operator
var shallowCopy = [...arrayToCopy];
Slice with begin argument
var shallowCopy = arrayToCopy.slice(0);
Slice with begin and end argument
var shallowCopy = arrayToCopy.slice(0, arrayToCopy.length);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.concat
Array.slice
For loop
For loop with declared length
While loop
Spread operator
Slice with begin argument
Slice with begin and end argument

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.concat	24338184.0 Ops/sec
Array.slice	32993010.0 Ops/sec
For loop	14429202.0 Ops/sec
For loop with declared length	14727930.0 Ops/sec
While loop	15078051.0 Ops/sec
Spread operator	6426543.0 Ops/sec
Slice with begin argument	32890174.0 Ops/sec
Slice with begin and end argument	32798278.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches for shallow copying arrays in JavaScript is an essential benchmarking exercise. Here's a breakdown of what's being tested, the pros and cons of each approach, and other considerations:

**What's being tested:**

The provided JSON defines a benchmark that tests six different methods for shallow copying arrays:

1. `Array.concat()`
2. `Array.slice()`
3. `For loop` (without declared length)
4. `For loop with declared length`
5. `While loop`
6. `Spread operator` (`...arrayToCopy`)

**Options comparison:**

Here's a brief overview of each method:

1. **`Array.concat()`**: Concatenates the array to be copied, creating a new array. This method has a time complexity of O(n), where n is the length of the array.
	* Pros: Simple and straightforward implementation.
	* Cons: Creates a new array, which can lead to increased memory usage.
2. **`Array.slice()`**: Returns a shallow copy of the specified range of elements in an array. This method has a time complexity of O(n), where n is the length of the array being copied.
	* Pros: Fast and efficient, especially when copying large arrays.
	* Cons: May not be suitable for copying entire arrays if only a portion of it needs to be copied.
3. **`For loop`** (without declared length): Loops through each element in the original array and pushes it into a new array using `push()`.
	* Pros: Flexible, as it can be used to copy partial arrays or arrays with varying lengths.
	* Cons: May not be as efficient as other methods for large arrays due to the overhead of function calls and loop iterations.
4. **`For loop with declared length`**: Loops through each element in the original array and pushes it into a new array using `push()`, but uses a variable to keep track of the current index.
	* Pros: Similar to the previous for loop, but can be slightly more efficient due to avoiding unnecessary iterations.
	* Cons: Still has similar overhead as the previous for loop method.
5. **`While loop`**: Loops through each element in the original array using a while loop until it reaches the end of the array.
	* Pros: Can be used to copy partial arrays or arrays with varying lengths, similar to the for loop method.
	* Cons: May not be as efficient as other methods for large arrays due to the overhead of function calls and loop iterations.
6. **`Spread operator` (`...arrayToCopy`)**: Creates a new array by copying elements from the original array using the spread syntax.
	* Pros: Fast and concise, especially when copying small or medium-sized arrays.
	* Cons: May not be suitable for very large arrays due to memory constraints.

**Other considerations:**

* **Memory usage**: The `Array.concat()` method creates a new array with an increased memory footprint, whereas the other methods either create a new array with a similar size or modify the existing array in place (with minimal overhead).
* **Performance**: The spread operator is generally the fastest way to copy arrays, followed closely by `Array.slice()`. The for loops can be slower due to their additional function calls and loop iterations.
* **Browser support**: All of these methods are supported by modern browsers, but older versions may have limited or no support.

Overall, the choice of method depends on the specific use case and performance requirements. If speed is a top priority, the spread operator or `Array.slice()` might be the best choices. However, if memory usage is a concern or if you need to copy partial arrays, one of the for loop methods might be more suitable.

Related benchmarks: