Benchmark: Array fill foreach, vs for i loop

Script Preparation code:

var iterations = 10000;

Tests:

for
for (i = 0; i < iterations; i++) { console.log(i); }
fill and foreach
Array(iterations).fill('').forEach((value, index) => console.log(index));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
fill and foreach

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	50.5 Ops/sec
fill and foreach	58.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net!

**Benchmark Definition:**
The benchmark is designed to compare two approaches for filling an array and then iterating over it using `foreach`. The goal is to determine which approach is faster.

**Options Compared:**

1. **For Loop:** A traditional, iterative approach where we increment a variable (`i`) until the desired condition is met.
2. **Array Fill with Foreach:** Using `Array.fill()` to create an array and then iterating over it using `forEach`, logging each element's index.

**Pros and Cons:**

* **For Loop:**
	+ Pros: Easy to understand, simple, and well-supported by most browsers.
	+ Cons: May be slower due to the overhead of incrementing a variable and comparing it to the desired condition.
* **Array Fill with Foreach:**
	+ Pros: Can be faster because `forEach` is optimized for iterating over arrays, and `fill()` creates an array in a single operation.
	+ Cons: Requires knowledge of `Array.fill()` and `forEach()`, which might be unfamiliar to some developers.

**Library and Purpose:**

* **Array.fill():** A method that creates a new array with the specified number of elements, filled with the given value. Its purpose is to simplify array initialization and reduce code duplication.
* **forEach():** A method that applies a callback function to each element in an array, executing it once for each element without advancing past the end of the array.

**Special JS Features/Syntax:**

None mentioned in this specific benchmark.

**Other Alternatives:**

In addition to `for` loops and `Array.fill()` with `forEach`, other approaches might include:

* Using a `while` loop instead of a `for` loop
* Utilizing browser-specific features like WebAssembly or SIMD instructions for optimized array operations
* Implementing custom iteration logic using `requestAnimationFrame()` or `setTimeout()`

**Benchmark Results:**
The latest benchmark results show that the `Array.fill()` with `forEach` approach is faster, executing at 58.05 executions per second on a Chrome 120 browser on a Mac OS X 10.15.7 device. The traditional `for` loop approach executes at 50.54 executions per second.

Keep in mind that these results are specific to the MeasureThat.net benchmark and may not reflect your individual experience or code optimizations.

Related benchmarks:

Array fill foreach, vs for i loop (version: 0)

People tend to use array fil and then foreach, we know foreach is faster than a for loop, but is it also faster if you use array fill first?

Comparing performance of: for vs fill and foreach

Created: 4 years ago by: Guest

Jump to the latest result

for

fill and foreach

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):