Benchmark: JavaScript Array Copy Test 2

JavaScript Array Copy Test 2 (version: 0)

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

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 vs Object Assign

Created: 2 months 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" ];
var shallowCopy = [];

Tests:

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

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
Object Assign

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript array copying methods is crucial for optimizing code execution, especially when dealing with large datasets.

**Benchmark Overview**

The benchmark compares six different approaches to shallow copy an array in JavaScript:

1. `Array.concat()`
2. `Array.slice()`
3. `For loop` without declared length
4. `While loop`
5. `Spread operator` (`[...]`)
6. `Object Assign` (`Object.assign()`)

Each approach is measured using a 25-element array copy test, where the benchmark repeatedly creates and copies the array.

**Approach Analysis**

### Array.concat()

* **Pros:** Simple to implement and widely supported.
* **Cons:** Creates a new object with references to original elements, which can lead to unexpected behavior when modified. It also requires more memory and computational resources compared to other methods.

### Array.slice()

* **Pros:** Returns a shallow copy of the array, allowing for modification without affecting the original. It is relatively efficient.
* **Cons:** May not be suitable for very large arrays, as it only copies references, not values.

### For loop

* **Pros:** Allows for direct access to array elements and can be optimized with declared length.
* **Cons:** Can be slower than other methods due to the overhead of the loop and push operations.

### While loop

* **Pros:** Similar to the for loop but uses a decrementing index, which may optimize some use cases.
* **Cons:** May not be suitable for all scenarios, especially when dealing with large arrays or edge cases.

### Spread operator (`[...]`)

* **Pros:** Creates a new array by copying values from the original, ensuring deep copy behavior. It is relatively efficient and easy to implement.
* **Cons:** Only supported in modern JavaScript environments (ES6+).

### Object Assign (`Object.assign()`)

* **Pros:** Returns a shallow copy of the array, allowing for modification without affecting the original. It is relatively fast and widely supported.
* **Cons:** May not be suitable for very large arrays due to memory constraints.

**Library Analysis**

None

The benchmark uses only built-in JavaScript methods and does not rely on any external libraries or frameworks.

**Performance Observations**

From the benchmark results, we can observe that:

1. `Array.slice()` performs best among all methods, with an average execution time of 376 ms.
2. The spread operator (`[...]`) is close in performance to `Array.slice()`, averaging around 400 ms.
3. Object Assign (`Object.assign()`) is relatively fast, averaging around 440 ms.
4. For loop and While loop are slower than the top three methods, with execution times ranging from 1-2 seconds.
5. Array.concat() is the slowest method, averaging around 6 seconds.

These results indicate that `Array.slice()` is a good choice for shallow array copying in JavaScript, while the spread operator (`[...]`) and Object Assign (`Object.assign()`) are viable alternatives. For loops and While loops may be suitable for specific use cases, but require careful optimization to achieve optimal performance.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Linux

View result in a separate tab

Test name	Executions per second
Array.concat	3767114.0 Ops/sec
Array.slice	3943375.8 Ops/sec
For loop	118533.2 Ops/sec
For loop with declared length	164761.0 Ops/sec
While loop	183800.5 Ops/sec
Spread operator	3918885.8 Ops/sec
Slice with begin argument	4145791.0 Ops/sec
Slice with begin and end argument	2504865.8 Ops/sec
Object Assign	124948.1 Ops/sec

Related benchmarks:

JavaScript Array Copy Test 2 (version: 0)

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

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 vs Object Assign

Created: 2 months ago by: Guest

Jump to the latest 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

Object Assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):