Benchmark: JavaScript Large Array Copy

Script Preparation code:

var arrayToCopy = Array.from({ length: 1000 * 1000 }, _ => "Hello");
var shallowCopy = [];

Tests:

Array.concat
shallowCopy = arrayToCopy.concat();
Slice with begin argument
shallowCopy = arrayToCopy.slice(0);
Array.from
shallowCopy = Array.from(arrayToCopy);
Array.toSpliced
shallowCopy = arrayToCopy.toSpliced();
Spread operator
shallowCopy = [...arrayToCopy];
For loop
for (let i = 0; i < arrayToCopy.length; i++) { shallowCopy.push(arrayToCopy[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.concat
Slice with begin argument
Array.from
Array.toSpliced
Spread operator
For loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Array.concat	318.6 Ops/sec
Slice with begin argument	323.7 Ops/sec
Array.from	316.7 Ops/sec
Array.toSpliced	318.6 Ops/sec
Spread operator	309.8 Ops/sec
For loop	3.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided JSON data and explain what is being tested, compare the different options, and discuss their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of shallow copying an array in JavaScript using different approaches. The test case uses a large array (`arrayToCopy`) with 1 million elements, filled with the string "Hello".

**Library Used**

None of the provided code snippets use any external libraries.

**Options Compared**

There are six options compared:

1. `concat()`
2. `slice()` (with begin argument)
3. `Array.from()`
4. `toSpliced()` (not a valid method in JavaScript arrays, likely a typo or a mistake)
5. Spread operator (`...`)
6. For loop

**Approach Overview**

Here's a brief explanation of each approach:

1. **concat()**: Concatenates the array by creating a new array and adding all elements from `arrayToCopy` to it.
2. **Slice with begin argument**: Slices the array from the beginning (index 0) using `slice()` method.
3. **Array.from()**: Creates a new array by mapping over `arrayToCopy`.
4. Spread operator (`...`): Spreads the elements of `arrayToCopy` into a new array.
5. For loop: Iterates over `arrayToCopy` and pushes each element to a new array.

**Pros and Cons**

Here's a summary of the pros and cons for each approach:

1. **concat()**: Pros: simple, widely supported; Cons: creates a new array, potentially inefficient due to memory allocation.
2. **Slice with begin argument**: Pros: efficient, only slices the original array; Cons: may not be supported by older browsers or JavaScript engines.
3. **Array.from()**: Pros: concise, modern method; Cons: may require additional dependencies (if using a library), can be slower than slice due to function call overhead.
4. Spread operator (`...`): Pros: concise, modern method; Cons: only supported in ECMAScript 2015+ browsers and JavaScript engines.
5. For loop: Pros: simple, controlled iteration; Cons: can be slow due to the loop itself, may require more code.

**Current Benchmark Results**

The latest benchmark results show that:

* `Array.toSpliced` is not a valid method in JavaScript arrays ( likely a typo or mistake)
* The spread operator (`...`) is slightly faster than `Slice with begin argument`
* `Slice with begin argument` is slower than `Array.from()`, but still faster than `concat()`
* The for loop is the slowest option

**Alternatives**

If you need to shallow copy an array in JavaScript, other alternatives include:

* Using a library like Lodash or Underscore.js, which provide efficient and convenient methods for array manipulation.
* Using a third-party implementation of the `toSpliced()` method (although this is unlikely to be necessary)
* Avoiding the use of `concat()` if possible, due to its potential performance overhead.

I hope this explanation helps you understand the benchmark and its results!

Related benchmarks:

JavaScript Large Array Copy (version: 0)

Testing the results for the fastest approach of shallow copying an array in JavaScript.

Comparing performance of: Array.concat vs Slice with begin argument vs Array.from vs Array.toSpliced vs Spread operator vs For loop

Created: one year ago by: Guest

Jump to the latest result

Array.concat

Slice with begin argument

Array.from

Array.toSpliced

Spread operator

For loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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