function generateTestArray() { const result = []; for (let i = 0; i < 1000; ++i) { result.push({ a: i, b: i / 2, r: 0, }); } return result;}const array = generateTestArray();array.forEach((x) => { x.r = x.a + x.b;});const array = generateTestArray();for(const x of array) { x.r = x.a + x.b;}const array = generateTestArray();const r = [];for(const {a, b} of array) { r.push(a + b);}const array = generateTestArray();array.map(x => x.a + x.b)const array = generateTestArray();array.map(({a,b}) => a + b)const array = generateTestArray();const r = new Array(array.length);for (let i = 0; i < array.length; ++i) { r[i] = array[i].a + array[i].b;}const array = generateTestArray();array.reduce((p, x) => p + x.a + x.b, 0);const array = generateTestArray();array.reduce((p, {a,b}) => p + a + b, 0);const array = generateTestArray();let r = 0;for (const x of array) { r += x.a + x.b;}const array = generateTestArray();let r = 0;for (const {a,b} of array) { r += a + b;}--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| .forEach | |
| for..of | |
| for..of (destructuring) | |
| .map | |
| .map (destructuring) | |
| .for (init array) | |
| .reduce | |
| .reduce (destructuring) | |
| for..of (reduce) | |
| for..of (reduce) (destructuring) |
| Test name | Executions per second |
|---|---|
| .forEach | 137823.6 Ops/sec |
| for..of | 144124.4 Ops/sec |
| for..of (destructuring) | 104607.4 Ops/sec |
| .map | 102005.7 Ops/sec |
| .map (destructuring) | 102275.8 Ops/sec |
| .for (init array) | 128094.4 Ops/sec |
| .reduce | 116140.6 Ops/sec |
| .reduce (destructuring) | 115085.2 Ops/sec |
| for..of (reduce) | 149802.0 Ops/sec |
| for..of (reduce) (destructuring) | 149635.4 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks.
Benchmark Definition
The benchmark measures the performance of different ways to iterate over an array in JavaScript:
for loop with initialization ("for (var i = 0; i < arr.length; i++) { ... }"), which is known as "index-based" iteration..forEach() method, which is a more modern and concise way to iterate over arrays.map() function, which applies a transformation to each element of the array and returns a new array with the results.filter() function, which constructs a new array from elements in the original array that pass the test implemented by the provided function.The Catch
All these methods are being compared for their performance on identical input arrays, but with varying execution strategies.
Performance Comparison
The benchmark results show that:
for loop with initialization (index-based) is the slowest, followed closely by .forEach(), which is faster due to its optimized implementation..map() and .filter() tend to be slower than for loop with initialization. However, when they're combined into a single pass (e.g., using Array.prototype.map(), followed by Array.prototype.filter()), the results improve significantly.map() and filter() cases.Insights
.forEach() is faster than for loop with initialization because it's a built-in method optimized for iteration.map() and filter() together can be slower due to additional overhead, but still faster than using for loop with initialization alone.for) is generally the slowest because of the need to increment the index variable manually.Recommendations
Based on these results, if you're working with large arrays or performance-critical code:
.forEach() for simple iteration tasks when speed matters most.Array.prototype.map() and Array.prototype.filter() in a single pass for more complex operations to avoid additional overhead.for loop with initialization might be the best choice.Keep in mind that these are general guidelines, and actual performance may vary depending on your specific use case, hardware, and other factors.
