Benchmark: Array fill method vs for loop test

Tests:

For Loop fill
let arrayTest = new Array(10000000); for (let i = 0; i < arrayTest.length; i++){ arrayTest[i] = 0; }
Array Fill
let arrayTest = new Array(10000000).fill(0);
Push
let arrayTest = []; for (let i = 0; i < 10000000; i++){ arrayTest.push(0); }

Historical Performance Data aggregated from 21 community runs

Desktop Results:

Chrome 15 runs

For Loop fill

58/s

Array Fill

50/s

Push

14/s

Fastest: For Loop fill (4.3x faster)

View exact numbers

✓ For Loop fill: 58 ops/sec
• Array Fill: 50 ops/sec
• Push: 14 ops/sec

Firefox 6 runs

Push

11/s

Array Fill

11/s

For Loop fill

11/s

View exact numbers

✓ Push: 11 ops/sec
• Array Fill: 11 ops/sec
• For Loop fill: 11 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For Loop fill
Array Fill
Push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Mac OS X 10.15.7

View result in a separate tab

For Loop fill

197/s

Array Fill

174/s

Push

43/s

View exact numbers

Test name	Executions per second
✓ For Loop fill	197 Ops/sec
Array Fill	174 Ops/sec
Push	43 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared, and the pros and cons of each approach.

**What is being tested?**

The main goal of this benchmark is to compare the performance of three different methods for filling an array with zeros:

1. **For Loop**: Using a traditional `for` loop to iterate through the array and assign a value to each element.
2. **Array Fill**: Utilizing the `fill()` method, which was introduced in ECMAScript 2015 (ES6), to fill the entire array with a single value.
3. **Push**: Using the `push()` method to add elements to the end of an empty array and then resizing it to match the original length.

**Comparison**

The benchmark is comparing the performance of these three methods in terms of:

* **Executions Per Second**: This metric measures how many iterations of each method can be executed per second on a specific device.

**Pros and Cons of each approach:**

1. **For Loop**:
	* Pros: Well-known, widely supported, and easy to understand.
	* Cons: Can be slower than other methods due to the overhead of the loop control logic.
2. **Array Fill**:
	* Pros: More efficient than traditional loops, especially for large arrays. Introduced in ES6, making it a modern and expressive way to fill an array.
	* Cons: May not work as expected if the array is modified or if the value being filled is not a simple type (e.g., object literals).
3. **Push**:
	* Pros: Dynamic and flexible, allowing for easy addition of elements at runtime. Suitable for scenarios where the array size is unknown.
	* Cons: May be slower than `fill()` due to the overhead of resizing the array.

**Library/ Framework considerations**

There are no explicit libraries or frameworks mentioned in this benchmark. However, it's worth noting that some implementations might use additional libraries or APIs (e.g., `lodash` or `Array.prototype.reduce()`) to achieve similar results. In this case, the focus is on understanding the JavaScript language itself.

**Special JS features/syntax**

The benchmark uses a modern feature: the `fill()` method, introduced in ES6. This method provides an efficient way to fill an array with a single value. The use of arrow functions (`let i = 0;`) and template literals (``arrayTest.push(0);`) is also worth mentioning, but they are not specific to any special JavaScript feature or syntax.

**Alternatives**

If you were to implement this benchmark yourself, you might consider additional methods, such as:

* **Splice**: Removing elements from the end of an array and then adding new ones.
* **Array.prototype.set()`: A proposed method for setting individual elements in an array (not yet widely supported).
* **Native WebAssembly support**: If you're targeting a browser that supports WebAssembly, you might consider using native WASM functions to fill an array.

Keep in mind that these alternatives are not part of the standard JavaScript specification and may have varying levels of support across different browsers or platforms.

Array fill method vs for loop test (version: 0)

Array fill method vs for loop performance validation

Comparing performance of: `For Loop fill vs Array Fill vs Push`

Created: 3 years ago by: Guest

Go to the latest result

For Loop fill

Array Fill

Push

Historical Performance Data aggregated from 21 community runs

Desktop Results:

Chrome 15 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array fill method vs for loop test (version: 0)

Array fill method vs for loop performance validation

Comparing performance of: For Loop fill vs Array Fill vs Push

Created: 3 years ago by: Guest

Go to the latest result

For Loop fill

Array Fill

Push

Historical Performance Data aggregated from 21 community runs

Desktop Results:

Chrome 15 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `For Loop fill vs Array Fill vs Push`