Benchmark: js array perfomance

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push({
      a: i,
      b: i / 2,
      r: 0,
    });
  }
  return result;
}

var array = generateTestArray();

Tests:

Array.forEach
array.forEach((x) => { x.r = x.a + x.b; });
for of
for (const obj of array) { obj.r = obj.a + obj.b; }
for <array.length, indexing
for (let i = 0; i < array.length; ++i) { array[i].r = array[i].a + array[i].b; }
for <len, indexing
const len = array.length; for (let i = 0; i < len; ++i) { array[i].r = array[i].a + array[i].b; }
for <array.length, tmp element
for (let i = 0; i < array.length; ++i) { const x = array[i]; x.r = x.a + x.b; }
for <len, tmp element
const len = array.length; for (let i = 0; i < len; ++i) { const x = array[i]; x.r = x.a + x.b; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.forEach
for of
for <array.length, indexing
for <len, indexing
for <array.length, tmp element
for <len, tmp element

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 91 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.forEach	120.6 Ops/sec
for of	515.4 Ops/sec
for <array.length, indexing	6.7 Ops/sec
for <len, indexing	8.8 Ops/sec
for <array.length, tmp element	13.0 Ops/sec
for <len, tmp element	24.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Description**

The benchmark measures the performance of different ways to iterate over an array in JavaScript. The test case creates a large array with 1 million elements, each containing three properties: `a`, `b`, and `r`. The script then performs an operation on each element in the array, either by updating the value of `r` based on the values of `a` and `b`.

**Benchmark Options**

The benchmark compares four different ways to iterate over the array:

1. **Array.forEach**: This method iterates over the array using a callback function.
2. **for...of**: This loop construct iterates over the array elements without explicit indexing.
3. **For loops with indexing**: These loops use explicit indexing (`array[i]`) to access each element in the array.
4. **For loops with tmp element**: These loops create a temporary variable `x` to hold each element of the array.

**Pros and Cons of Each Approach**

1. **Array.forEach**:
	* Pros: Efficient, easy to read, and concise.
	* Cons: May not be suitable for complex operations or mutable arrays.
2. **For...of**:
	* Pros: Modern, efficient, and easy to read.
	* Cons: Limited support in older browsers, may require explicit handling of array creation.
3. **For loops with indexing**:
	* Pros: Fast, flexible, and suitable for complex operations.
	* Cons: Less readable than other options, requires manual memory management (e.g., `array[i]`).
4. **For loops with tmp element**:
	* Pros: More readable than indexing, allows for caching or reusing temporary variables.
	* Cons: May be slower due to the creation of a temporary variable, less efficient than indexing.

**Library and Special JS Features**

The benchmark does not use any external libraries. However, it assumes that the `Array` object is available, which is a built-in JavaScript object. There are no special JavaScript features used in this benchmark.

**Other Considerations**

* The benchmark uses a large array to ensure that performance differences between iterations are significant.
* The `generateTestArray()` function creates an array with 1 million elements, which may not be representative of real-world scenarios. In practice, arrays are often smaller and more manageable.
* The benchmark assumes that the `array` variable is accessible within each iteration.

**Alternatives**

If you want to explore alternative approaches or modifications to this benchmark, consider:

* Using a different data structure (e.g., linked list, tree) for the array.
* Adding more complex operations to the test case (e.g., sorting, filtering).
* Comparing performance across multiple browsers or environments.
* Analyzing memory usage and garbage collection behavior for each iteration.

Related benchmarks:

js array perfomance (version: 0)

Comparing performance of: Array.forEach vs for of vs for <array.length, indexing vs for <len, indexing vs for <array.length, tmp element vs for <len, tmp element

Created: 3 years ago by: Registered User

Jump to the latest result

Array.forEach

for of

for <array.length, indexing

for <len, indexing

for <array.length, tmp element

for <len, tmp element

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