Benchmark: Arary iteration comparison

Script Preparation code:

   var arr = [];
   for (var i = 0; i < 1000; i++) {
       arr[i] = i;
   }

   function someFn(i) {
       return i * 3 * 8;
   }

​x
 
   var arr = [];   for (var i = 0; i < 1000; i++) {       arr[i] = i;   }​   function someFn(i) {       return i * 3 * 8;   }

Tests:

for-native

var newArr = [];

for (var i = 0, len = arr.length; i < len; i++) {
  newArr.push(someFn(arr[i]));
}

 
var newArr = [];​for (var i = 0, len = arr.length; i < len; i++) {  newArr.push(someFn(arr[i]));}

for-with-init

var newArr = new Array(arr.length);

for (var i = 0, len = arr.length; i < len; i++) {
  newArr.push(someFn(arr[i]));
}

 
var newArr = new Array(arr.length);​for (var i = 0, len = arr.length; i < len; i++) {  newArr.push(someFn(arr[i]));}

for..of-native
var newArr = []; for (const el of arr) newArr.push(someFn(el));
var newArr = [];

for (const el of arr) newArr.push(someFn(el));
for..of-with-init
var newArr = new Array(arr.length); for (const el of arr) newArr.push(someFn(el));
var newArr = new Array(arr.length);

for (const el of arr) newArr.push(someFn(el));
map
var newArr = arr.map(someFn)
var newArr = arr.map(someFn)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
for-native
for-with-init
for..of-native
for..of-with-init
map

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/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for-native	7605.7 Ops/sec
for-with-init	7426.0 Ops/sec
for..of-native	13518.3 Ops/sec
for..of-with-init	13319.0 Ops/sec
map	84485.4 Ops/sec

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

Benchmark Overview

The MeasureThat.net benchmark measures the performance of different JavaScript iteration methods: native for loops, with initialization, and array methods (map). The test compares the execution speed of these methods in creating an array by iterating over a large array.

Iteration Methods Compared

Native For Loops: This involves using traditional for loops to iterate over the array.
- Pros:
  - Simple and familiar syntax
  - Works across different browsers and environments
- Cons:
  - Can be slower due to overhead of manual indexing
For Loops with Initialization: This method uses a separate variable to store the length of the array, reducing the need for manual indexing.
- Pros:
  - Similar performance to native for loops (less overhead)
  - Still easy to understand and use
Array Methods (map()):
- Pros:
  - Concise syntax and efficient execution
  - Less prone to errors due to higher-level abstraction
For Loops with Initialization using const: This method uses a const variable to store the length of the array, similar to the previous approach.
- Pros:
  - Similar performance to native for loops (less overhead)
  - Still easy to understand and use

Comparison Summary

Method	Performance
Native For Loops	Slowest
For Loops with Initialization	Similar to native for loops
Array Methods (`map()`))	Fastest
For Loops with Initialization using `const`	Similar to native for loops

Library Used: None

There is no specific library used in this benchmark. The tests focus on the built-in JavaScript features and methods.

Special JS Feature or Syntax: for...of

The for...of loop is a newer, more modern syntax introduced in ECMAScript 2015 (ES6). It allows iterating over arrays without manual indexing.

Pros of Using for...of

Concise and readable syntax
Less error-prone due to automatic handling of array length

Cons of Using for...of

May be slower than traditional for loops or for loops with initialization (due to increased overhead)
Not supported in older browsers or environments

Other Alternatives

Other iteration methods, such as using forEach() or custom loop implementations, could be tested in future benchmarks.
Comparing the performance of different array constructors (e.g., Array(), new Array()) might also be interesting.

Keep in mind that the actual performance results may vary depending on specific use cases and environments.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

**Iteration Methods Compared**

1. **Native For Loops**: This involves using traditional `for` loops to iterate over the array.
	* Pros:
		+ Simple and familiar syntax
		+ Works across different browsers and environments
	* Cons:
		+ Can be slower due to overhead of manual indexing
2. **For Loops with Initialization**: This method uses a separate variable to store the length of the array, reducing the need for manual indexing.
	* Pros:
		+ Similar performance to native for loops (less overhead)
		+ Still easy to understand and use
3. **Array Methods** (`map()`):
	* Pros:
		+ Concise syntax and efficient execution
		+ Less prone to errors due to higher-level abstraction
4. **For Loops with Initialization using `const`**: This method uses a `const` variable to store the length of the array, similar to the previous approach.
	* Pros:
		+ Similar performance to native for loops (less overhead)
		+ Still easy to understand and use

**Comparison Summary**

| Method | Performance |
| --- | --- |
| Native For Loops | Slowest |
| For Loops with Initialization | Similar to native for loops |
| Array Methods (`map()`)) | Fastest |
| For Loops with Initialization using `const` | Similar to native for loops |

**Library Used: None**

There is no specific library used in this benchmark. The tests focus on the built-in JavaScript features and methods.

**Special JS Feature or Syntax: `for...of`**

The `for...of` loop is a newer, more modern syntax introduced in ECMAScript 2015 (ES6). It allows iterating over arrays without manual indexing.

**Pros of Using `for...of`**

* Concise and readable syntax
* Less error-prone due to automatic handling of array length

**Cons of Using `for...of`**

* May be slower than traditional for loops or for loops with initialization (due to increased overhead)
* Not supported in older browsers or environments

**Other Alternatives**

* Other iteration methods, such as using `forEach()` or custom loop implementations, could be tested in future benchmarks.
* Comparing the performance of different array constructors (e.g., `Array()`, `new Array()`) might also be interesting.

Keep in mind that the actual performance results may vary depending on specific use cases and environments.

Related benchmarks:

Arary iteration comparison (version: 0)

1. for-native 2. for-with-init 3. for..of-native 4. for..of-with-init 5. map

Comparing performance of: for-native vs for-with-init vs for..of-native vs for..of-with-init vs map

Created: 2 years ago by: Guest

Jump to the latest result