Benchmark: For loop inline array.length vs captured variable

Script Preparation code:

var a = [];
for (var i = 0; i < 10000; i++) {
  a.push(Math.random());
}

function getLength() {
  return a.length;
}

Tests:

Inline
for (var i = 0; i < a.length; i++) { a[i] = a[i] * Math.random(); }
Captured
for (var i = 0, ilen = a.length; i < ilen; i++) { a[i] = a[i] * Math.random(); }
Getter function
for (var i = 0; i < getLength(); i++) { a[i] = a[i] * Math.random(); }
Map
a = a.map(v => v * Math.random());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Inline
Captured
Getter function
Map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36

Browser/OS: Chrome 54 on Linux

View result in a separate tab

Test name	Executions per second
Inline	148.0 Ops/sec
Captured	187.9 Ops/sec
Getter function	128.3 Ops/sec
Map	217.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what is being tested.

**Main Benchmark Definition**

The main benchmark definition represents a JavaScript for loop that iterates over an array `a` using a variable `i`. The purpose of this benchmark is to compare the performance of different approaches when accessing the length of the array within the loop.

**Script Preparation Code**

```javascript
var a = [];
for (var i = 0; i < 10000; i++) {
  a.push(Math.random());
}

function getLength() {
  return a.length;
}
```

This code initializes an empty array `a` and populates it with 10,000 random elements using a for loop. It also defines a function `getLength()` that returns the length of the array.

**Html Preparation Code**

There is no HTML preparation code provided, which means this benchmark only focuses on JavaScript performance and does not involve any browser rendering or event handling.

**Individual Test Cases**

The individual test cases represent variations of the main benchmark definition. Each test case represents a different approach to accessing the length of the array within the loop:

1. **Inline**: `for (var i = 0; i < a.length; i++) { a[i] = a[i] * Math.random(); }`
	* This approach uses the `length` property directly on the array.
	* Pros: Simple and straightforward.
	* Cons: May incur additional overhead due to the unnecessary `Math.random()` call.
2. **Captured**: `for (var i = 0, ilen = a.length; i < ilen; i++) { a[i] = a[i] * Math.random(); }`
	* This approach uses a separate variable `ilen` to store the length of the array before the loop starts.
	* Pros: Reduces overhead by avoiding unnecessary property access on the array during the loop.
	* Cons: Requires additional memory allocation for the temporary variable.
3. **Getter function**: `for (var i = 0; i < getLength(); i++) { a[i] = a[i] * Math.random(); }`
	* This approach uses the `getLength()` function defined earlier to access the length of the array.
	* Pros: Separates concerns by using a distinct function for accessing the array length, making the code more modular.
	* Cons: May incur additional overhead due to the function call and potential overhead of dynamic typing.
4. **Map**: `a = a.map(v => v * Math.random());`
	* This approach uses the `map()` method on the array to create a new array with transformed values, rather than modifying the original array in place.
	* Pros: Avoids modifying the original array and can be more efficient for large datasets.
	* Cons: Creates a new array and may incur additional overhead due to memory allocation.

**Latest Benchmark Results**

The latest benchmark results show the execution per second (ExecutionsPerSecond) for each test case on a specific device and browser configuration:

1. **Map**: 217.7603759765625
2. **Captured**: 187.91656494140625
3. **Inline**: 148.0176239013672
4. **Getter function**: 128.29928588867188

These results suggest that the `map()` approach is the fastest, followed closely by the `captured` approach. The `inline` and `getter function` approaches are slower due to additional overhead or unnecessary property access.

**Alternative Approaches**

Other alternative approaches could include:

1. Using a library like Lodash's `times()` function to iterate over the array length.
2. Using a typed array, such as Int32Array, to avoid dynamic typing and potential performance issues.
3. Using a different data structure, such as an object or a sparse array, to store the array elements.

These alternatives may offer trade-offs in terms of complexity, memory usage, and performance.

Related benchmarks:

For loop inline array.length vs captured variable (version: 4)

Comparing performance of: Inline vs Captured vs Getter function vs Map

Created: 8 years ago by: Registered User

Jump to the latest result

Inline

Captured

Getter function

Map

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