Benchmark: for vs for ... of 2

Script Preparation code:

const text = new Array(2000000).fill("a").join("");

Tests:

for
const text = new Array(2000000).fill("a").join(""); const string = new Array(text.length); for (let i = 0; i < text.length; i++) { string[i] = text[i]; }
for ... of
const text = new Array(2000000).fill("a").join(""); const string = []; for (const char of text) { string.push(char); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
for ... of

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 103 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	24.1 Ops/sec
for ... of	15.8 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**What is tested?**

The provided benchmark measures the performance difference between two approaches to iterate over an array in JavaScript:

1. **Traditional `for` loop**: This involves using the traditional syntax for a `for` loop, where you declare a variable, initialize it, and then use it to control the loop.
2. **`for ... of` loop**: This is a newer syntax introduced in ECMAScript 2015 (ES6) that allows iterating over arrays and other iterable objects using a more concise syntax.

**Options compared**

The benchmark compares the performance of these two approaches:

* **Traditional `for` loop**: This approach uses a variable to keep track of the current index, increments it, and then checks if it's within the bounds of the array.
* **`for ... of` loop**: This approach uses the `of` keyword to specify the iterable object (in this case, the `text` array) and automatically increments the iteration variable.

**Pros and Cons**

Here are some pros and cons for each approach:

### Traditional `for` loop

Pros:

* More control over the iteration process
* Easier to understand and maintain complex logic

Cons:

* Can be more verbose and cumbersome
* May require manual index management, which can lead to errors

### `for ... of` loop

Pros:

* Concise syntax that's easier to read and write
* Automatic index management eliminates the need for manual incrementing

Cons:

* Less control over the iteration process
* May be slower due to the overhead of the `of` keyword

**Library usage**

In this benchmark, a library is not explicitly mentioned. However, it's likely that the arrays are created using the built-in JavaScript `Array` constructor.

**Special JS feature or syntax**

The benchmark uses a newer syntax introduced in ES6: the `for ... of` loop. This is a relatively recent addition to the language and provides a concise way to iterate over arrays and other iterable objects.

**Other alternatives**

If you were to write this benchmark from scratch, you might consider alternative approaches, such as:

* Using `forEach()` or `map()`: These methods provide a more functional programming style and can be faster for small iterations.
* Using `reduce()`: This method provides a way to iterate over arrays and accumulate values, but may have higher overhead due to the need to manage state.
* Using native WebAssembly (WASM) or V8-specific optimizations: Depending on your specific use case, you might consider using WASM or optimizing for specific performance characteristics of the V8 engine.

Keep in mind that each approach has its own trade-offs and may not be suitable for every scenario.

Related benchmarks:

for vs for ... of 2 (version: 0)

Comparing performance of: for vs for ... of

Created: 2 years ago by: Guest

Jump to the latest result

for

for ... of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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