Benchmark: For..of (with Reverse) vs For (backwards)

Script Preparation code:

var arrSmall = 'ewtyht'.split('');
var arrLarge = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies sagittis odio, et mollis erat mattis ut. In mattis massa nunc, sit amet hendrerit ligula accumsan eu. Pellentesque rutrum aliquet laoreet. Nunc rutrum dignissim pretium. Maecenas non nisl a ligula varius eleifend eget non nulla. Donec dictum sit amet lorem consequat elementum. Mauris scelerisque vestibulum interdum. Ut sit amet lorem posuere, interdum neque et, fermentum turpis. Morbi tincidunt, ante vel egestas efficitur, odio urna tincidunt mi, sit amet mattis lorem ante at sem. Etiam porta sodales sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sem a nunc convallis, ut molestie lacus elementum. Donec pellentesque nulla tellus, id porta dolor molestie non. Integer lacus diam, pharetra nec lacus a, sollicitudin dapibus nibh. Duis varius metus ante, eu ultrices purus cursus in. Sed molestie, sem sit amet rutrum interdum, elit dui aliquam arcu, a fringilla justo nibh in est. Nulla ac elit eget massa pellentesque congue. Phasellus quis mauris non diam luctus posuere. Nullam porta diam auctor volutpat bibendum. Duis lorem leo, mollis non convallis lacinia, faucibus ac orci. Sed eu velit et quam facilisis condimentum. Pellentesque egestas, lorem ut laoreet maximus, metus leo aliquam ligula, a luctus lectus ligula eget purus.'.split('');

Tests:

reverse and for..of (large array)
var result = []; for (var char of arrLarge.reverse()) { result.push(char); }
For loop (large array)
var result = []; for (var iChar = arrLarge.length - 1; iChar >= 0; iChar--) { result.push(arrLarge[iChar]); }
reverse and for..of (small array)
var result = []; for (var char of arrSmall.reverse()) { result.push(char); }
For loop (small array)
var result = []; for (var iChar = arrSmall.length - 1; iChar >= 0; iChar--) { result.push(arrSmall[iChar]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reverse and for..of (large array)
For loop (large array)
reverse and for..of (small array)
For loop (small array)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Linux

View result in a separate tab

Test name	Executions per second
reverse and for..of (large array)	124323.4 Ops/sec
For loop (large array)	428155.8 Ops/sec
reverse and for..of (small array)	19585530.0 Ops/sec
For loop (small array)	102397760.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is comparing two approaches for reversing an array: using `for...of` with `reverse()` versus traditional `for` loops that iterate in reverse order.

**Script Preparation Code**

The script preparation code generates two arrays of varying sizes (`arrSmall` and `arrLarge`) containing random characters. These arrays are used to test the performance of each approach on different-sized datasets.

**Options being compared**

1. **For...of with Reverse**: This approach uses the `reverse()` method to reverse the array, and then iterates over it using a `for...of` loop.
	* Pros: concise and expressive syntax; easy to implement for those familiar with `for...of`.
	* Cons: may incur additional memory allocations or copies due to the use of `reverse()`, which can impact performance.
2. **Traditional For Loop in Reverse**: This approach iterates over the array from the end to the beginning using a traditional `for` loop, accessing each element by its index (`arrLarge.length - 1`, `arrSmall.length - 1`, etc.).

**Pros and Cons**

* **For...of with Reverse**:
	+ Pros: concise syntax, easy to implement.
	+ Cons: may incur additional memory allocations or copies due to `reverse()`.
* **Traditional For Loop in Reverse**:
	+ Pros: no additional memory allocations or copies; direct access to elements by index.
	+ Cons: less expressive and more verbose than the `for...of` approach.

**Other Considerations**

* The benchmark is running on a Desktop Chrome browser with macOS 10.15.7.
* The `for...of` loop with `reverse()` uses an iterator object internally, which may impact performance compared to traditional array iteration.

**Library and Special Features**

The `reverse()` method uses the built-in Array.prototype.reverse() function, which is a standard JavaScript API. There are no special features or syntax used in this benchmark other than what's necessary for the comparison.

**Alternatives**

If you're looking for alternative approaches for reversing arrays, some options include:

* Using the spread operator (`...`) and concatenating an empty array: `const arr = [...arr].reverse()`.
* Using a library like Lodash or Ramda with their built-in array reversal functions.
* Implementing your own custom iteration logic using a traditional loop.

Keep in mind that these alternatives may have different performance characteristics compared to the original benchmark.

Related benchmarks:

For..of (with Reverse) vs For (backwards) (version: 0)

Comparing performance of: reverse and for..of (large array) vs For loop (large array) vs reverse and for..of (small array) vs For loop (small array)

Created: 4 years ago by: Guest

Jump to the latest result

reverse and for..of (large array)

For loop (large array)

reverse and for..of (small array)

For loop (small array)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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