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

Tests:

for - create new array
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)); })
map - create new array
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]); }
forEach - overwrite array
resetArray() arr.forEach(function (item, index){ arr[index] = someFn(item); })
map - overwrite array
resetArray() arr = arr.map(function(item, index){ return someFn(item) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

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: