Benchmark: (very) short array duplication

Tests:

while loop
a = Array(3); b = Array(3); i = a.length; while(i--) b[i] = a[i];
slice
a = Array(3); b = a.slice(0);
for loop
a = Array(3); b = Array(3); for(var i = 0, len = a.length; i < len; ++i) b[i] = a[i];
Array.from
a = Array(3); b = Array.from(a);
es6
a = Array(3); b = [...a];
concat
a = Array(3); b = [].concat(a)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
while loop
slice
for loop
Array.from
es6
concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 95 on Windows

View result in a separate tab

Test name	Executions per second
while loop	439652.2 Ops/sec
slice	1167113.5 Ops/sec
for loop	442925.4 Ops/sec
Array.from	936823.8 Ops/sec
es6	1152311.0 Ops/sec
concat	1146837.2 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 world of JavaScript microbenchmarks.

**What is being tested?**

The provided benchmark measures the performance of different methods for duplicating arrays in JavaScript. The test cases focus on four common approaches:

1. Using a `while` loop to iterate over the array and copy its elements.
2. Utilizing the `slice()` method to create a shallow copy of the array.
3. Employing a `for` loop to iterate over the array and copy its elements.
4. Leveraging the `Array.from()` method to create a new array from an existing one.
5. Using the spread operator (`...`) to duplicate the array.
6. Utilizing the `concat()` method to concatenate two arrays.

**Options comparison**

Here's a brief overview of each approach:

1. **While loop**: This approach iterates over the array using a counter variable, copying each element from the original array to the new one. While it's straightforward, it can be less efficient due to the overhead of incrementing and decrementing the loop counter.
2. **Slice() method**: This method creates a shallow copy of the original array by returning a new array with references to the same elements. While it's faster than using a `while` loop, it may not provide the desired result if the underlying data structure is complex.
3. **For loop**: Similar to the `while` loop approach, this method uses a counter variable to iterate over the array and copy its elements. However, it can be more efficient since the loop counter is already initialized with the array length.
4. **Array.from() method**: This method creates a new array from an existing one by iterating over the original array's elements. While it's concise and readable, it may incur additional overhead due to the creation of a new array object.
5. **Spread operator (`...`)**: This operator duplicates the array by creating a new array with all elements copied from the original one. It's a modern and efficient way to duplicate arrays in JavaScript.
6. **Concat() method**: This method concatenates two arrays using an intermediate array as a placeholder. While it works, it can be slower than other approaches since it creates additional objects.

**Pros and cons of each approach**

Here's a brief summary:

1. **While loop**: Pros: simple and easy to understand; Cons: may incur overhead due to incrementing and decrementing the loop counter.
2. **Slice() method**: Pros: fast and efficient; Cons: only creates a shallow copy, which might not be suitable for all use cases.
3. **For loop**: Pros: similar performance to `while` loop; Cons: requires initializing a counter variable.
4. **Array.from() method**: Pros: concise and readable; Cons: may incur additional overhead due to creating a new array object.
5. **Spread operator (`...`)**: Pros: modern, efficient, and easy to understand; Cons: limited compatibility with older browsers or environments.
6. **Concat() method**: Pros: works across different browsers and environments; Cons: slower than other approaches.

**Library usage**

In the provided benchmark, none of the test cases explicitly use any external libraries beyond what's built into JavaScript.

**Special JS feature/syntax**

None of the test cases utilize any special JavaScript features or syntax beyond the standard language. However, some approaches might be more readable and efficient when using modern ECMAScript versions (e.g., ES6+).

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few:

* Using `Array.prototype.reduce()` to duplicate an array.
* Leveraging `Buffer` objects to create a duplicated array efficiently.
* Utilizing `WebAssembly` for performance-critical array duplication tasks.

Keep in mind that each approach has its trade-offs and may be more suitable depending on your specific use case.

Related benchmarks:

(very) short array duplication (version: 0)

testing 3 item array duplication methods

Comparing performance of: while loop vs slice vs for loop vs Array.from vs es6 vs concat

Created: 3 years ago by: Registered User

Jump to the latest result

while loop

slice

for loop

Array.from

es6

concat

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