Benchmark: for vs forEach vs map : array creation : 2019

for vs forEach vs map : array creation : 2019 (version: 0)

This test is to test the return of an array from these loops. A lot of the test are incorrect because .map returns an array. So it will only be fair to test the speeds based on returning a new array from all loops.

Comparing performance of: for - create new array vs forEach - create new array vs map - create new array vs for - overwrite array vs forEach - overwrite array vs map - overwrite array

Created: 5 years ago by: Guest

Jump to the latest result

Script Preparation code:

   var arr = [];

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

	resetArray()

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

Tests:

for - create new array
resetArray() var forArray = [] var length = arr.length for (var i = 0; i < length; i++) { forArray.push(someFn(arr[i])); }
resetArray()
var forArray = []
var length = arr.length
for (var i = 0; i < length; i++) {
forArray.push(someFn(arr[i]));
}
forEach - create new array
resetArray() var forEachArray = [] arr.forEach(function (item, index){ forEachArray.push(someFn(item)); })
resetArray()
var forEachArray = []
arr.forEach(function (item, index){
forEachArray.push(someFn(item));
})
map - create new array
resetArray() var mapNewArray = []; mapNewArray = arr.map(function(item){ return someFn(item) })
resetArray()
var mapNewArray = [];
mapNewArray = arr.map(function(item){
return someFn(item)
})
for - overwrite array
resetArray() var len = arr.length for (var i = 0; i < len; i++) { arr[i] = someFn(arr[i]); }
resetArray()
var len = arr.length
for (var i = 0; i < len; i++) {
arr[i] = someFn(arr[i]);
}
forEach - overwrite array
resetArray() arr.forEach(function (item, index){ arr[index] = someFn(item); })
resetArray()
arr.forEach(function (item, index){
arr[index] = someFn(item);
})
map - overwrite array
resetArray() arr = arr.map(function(item, index){ return someFn(item) })
resetArray()
arr = arr.map(function(item, index){
return someFn(item)
})

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 - create new array
forEach - create new array
map - create new array
for - overwrite array
forEach - overwrite array
map - overwrite array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Browser/OS: Chrome 96 on Windows

View result in a separate tab

Test name	Executions per second
for - create new array	4517.7 Ops/sec
forEach - create new array	5109.1 Ops/sec
map - create new array	5560.8 Ops/sec
for - overwrite array	3008.4 Ops/sec
forEach - overwrite array	3229.8 Ops/sec
map - overwrite array	5769.1 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks.

Benchmark Overview

The provided benchmark compares the performance of three approaches to create and modify arrays: for loops, forEach loops, and the map() method. The test creates an array of 1000 elements and applies a transformation function (someFn) to each element using each approach.

Options Compared

For Loops: This approach uses traditional for loops to iterate over the array and push or overwrite elements.
- Pros: Simple, efficient, and widely supported.
- Cons: Can be error-prone, especially when dealing with large datasets or complex transformations.
ForEach Loops: This approach uses the forEach() method to iterate over the array and apply a callback function to each element.
- Pros: Concise, easy to read, and well-suited for iterating over arrays.
- Cons: May incur additional overhead due to the use of a functional programming style.
Map() Method: This approach uses the map() method to create a new array with transformed elements.
- Pros: Efficient, concise, and well-supported by most browsers.
- Cons: Creates a new array, which may not be desirable in certain situations.

Library Used

The benchmark uses the someFn function, which is defined in the script preparation code:

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

This function takes an input value and returns a transformed value. The benchmark applies this transformation to each element of the array using each approach.

Special JS Feature/Syntax

There is no special JavaScript feature or syntax used in this benchmark that requires specific handling or optimization.

Benchmark Results

The latest benchmark results show that:

map() method is the fastest, with an execution rate of 5769.12 executions per second.
for loops are the slowest, with an average execution rate across all tests.
forEach loops fall in between, with an average execution rate lower than both for and map.

Other Alternatives

If you're interested in exploring alternative approaches to array iteration, here are a few options:

Array.prototype.reduce(): This method can be used for reducing arrays, but it's not directly applicable for iterating over arrays.
Set: Arrays and sets share some similarities, but set data structures are not typically used for iterating over elements.
Loops with a different indexing strategy: Some developers prefer using alternative indexing strategies, such as incrementing a counter or using a more complex arithmetic approach.

Keep in mind that the choice of iteration method depends on your specific use case, performance requirements, and personal preference.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark compares the performance of three approaches to create and modify arrays: `for` loops, `forEach` loops, and the `map()` method. The test creates an array of 1000 elements and applies a transformation function (`someFn`) to each element using each approach.

**Options Compared**

1. **For Loops**: This approach uses traditional `for` loops to iterate over the array and push or overwrite elements.
	* Pros: Simple, efficient, and widely supported.
	* Cons: Can be error-prone, especially when dealing with large datasets or complex transformations.
2. **ForEach Loops**: This approach uses the `forEach()` method to iterate over the array and apply a callback function to each element.
	* Pros: Concise, easy to read, and well-suited for iterating over arrays.
	* Cons: May incur additional overhead due to the use of a functional programming style.
3. **Map() Method**: This approach uses the `map()` method to create a new array with transformed elements.
	* Pros: Efficient, concise, and well-supported by most browsers.
	* Cons: Creates a new array, which may not be desirable in certain situations.

**Library Used**

The benchmark uses the `someFn` function, which is defined in the script preparation code:
```javascript
function someFn(i) {
  return i * 3 * 8;
}
```
This function takes an input value and returns a transformed value. The benchmark applies this transformation to each element of the array using each approach.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark that requires specific handling or optimization.

**Benchmark Results**

The latest benchmark results show that:

* `map()` method is the fastest, with an execution rate of 5769.12 executions per second.
* `for` loops are the slowest, with an average execution rate across all tests.
* `forEach` loops fall in between, with an average execution rate lower than both `for` and `map`.

**Other Alternatives**

If you're interested in exploring alternative approaches to array iteration, here are a few options:

1. **Array.prototype.reduce()**: This method can be used for reducing arrays, but it's not directly applicable for iterating over arrays.
2. **Set**: Arrays and sets share some similarities, but `set` data structures are not typically used for iterating over elements.
3. **Loops with a different indexing strategy**: Some developers prefer using alternative indexing strategies, such as incrementing a counter or using a more complex arithmetic approach.

Keep in mind that the choice of iteration method depends on your specific use case, performance requirements, and personal preference.

Related benchmarks: