var arr = [];
for (var i = 0; i < 100000; i++) {
arr[i] = i;
}
function someFn(i) {
return i * 3 * 8;
}
const res = []
arr.forEach(function (item){
res.push(someFn(item))
})
const res = []
for (var i = 0, len = arr.length; i < len; i++) {
res.push(someFn(arr[i]))
}
const res = arr.map(item => someFn(item))
const res = []
for (const el of arr) {
res.push(someFn(el))
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
foreach | |
for | |
map | |
for of |
Test name | Executions per second |
---|---|
foreach | 135.4 Ops/sec |
for | 89.7 Ops/sec |
map | 166.8 Ops/sec |
for of | 163.6 Ops/sec |
Let's break down the provided benchmark and its test cases.
Benchmark Definition
The benchmark is defined by a JSON object with the following properties:
Name
: The name of the benchmark, which is "Array loop vs foreach vs map vs for of".Description
: An empty string, indicating that there is no description for this benchmark.Script Preparation Code
: A JavaScript code snippet that prepares the test environment. It creates an array arr
with 100,000 elements and defines a function someFn
that takes an integer i
as input and returns the result of (i * 3 * 8)
.Html Preparation Code
: An empty string, indicating that no HTML preparation code is required.Individual Test Cases
The benchmark consists of four individual test cases, each defined by a JSON object with the following properties:
Benchmark Definition
: A JavaScript code snippet that represents the specific test case. Each test case uses the arr
array and the someFn
function defined in the Script Preparation Code
.Test Name
: The name of the test case.Here's a brief explanation of each test case:
forEach
method to iterate over the arr
array, calling someFn
for each element and pushing the result to an empty array res
.for
loop to iterate over the arr
array, calling someFn
for each element and pushing the result to an empty array res
.map
method to create a new array with the results of applying someFn
to each element in arr
, without iterating over arr
explicitly.for...of
loop (also known as the "forEach" loop) to iterate over the arr
array, calling someFn
for each element and pushing the result to an empty array res
.Options Compared
The benchmark compares four different approaches:
forEach
method to iterate over the array.for
loop to iterate over the array.map
method to create a new array with the results of applying someFn
to each element in arr
.for...of
loop (the "forEach" loop) to iterate over the array.Pros and Cons
Here's a brief summary of the pros and cons of each approach:
forEach
method.forEach
or map
for large arrays, as it avoids the overhead of an extra function call.foreach
, requires manual indexing.for
or foreach
.for
due to the overhead of creating a new array, and may use more memory.forEach
, but with the benefits of an optimized loop implementation.for...of
loop in JavaScript engines.Other Considerations
The benchmark does not account for other factors that may affect performance, such as:
for...of
loop differently, affecting performance.Alternatives
If you were to reimplement this benchmark with different approaches, some alternatives could be:
reduce
, every
, or some
.someFn
function for better performance.Keep in mind that this is just one possible set of alternatives, and there are many other approaches you could consider depending on your specific use case and requirements.