Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
map vs for...of vs for
(version: 0)
Benchmark.js
Comparing performance of:
map vs for i loop vs for of loop
Created:
5 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var data = [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8,];
Tests:
map
data.map(function (number) { return number * 2});
for i loop
let items = []; for(let i = 0; i < data.length; i++){ items.push(data[i] * 2); }
for of loop
let items = []; for(let item of data){ items.push(item * 2); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
map
for i loop
for of loop
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.127 Safari/537.36 OPR/60.3.3004.55692
Browser/OS:
Opera 60 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=622963" width="100%" height="500px"></iframe>
for of loop
264K/s
map
224K/s
for i loop
88K/s
View exact numbers
Test name
Executions per second
✓
for of loop
263,691 Ops/sec
map
223,860 Ops/sec
for i loop
87,879 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is being tested. **Benchmark Overview** The benchmark compares three approaches to iterate over an array: `map`, `for...of` loop, and traditional `for` loop with an index variable (`i`). The goal is to determine which approach is most efficient in terms of execution speed. **Test Case Breakdown** Each test case represents a specific iteration method. Here's what's being tested: 1. **Map**: `data.map(function (number) { return number * 2 });` - This tests the use of the `map()` method to create a new array with transformed values. 2. **For...of Loop**: `let items = []; for(let item of data){ items.push(item * 2); }` - This tests the use of the `for...of` loop to iterate over an array and push values into a new array. 3. **Traditional For Loop**: `let items = []; for(let i = 0; i < data.length; i++){ items.push(data[i] * 2); }` - This tests the traditional `for` loop with an index variable. **Library Used: None** No specific libraries are used in these test cases, so there's no additional functionality or overhead to consider. **Special JS Feature/ Syntax: For...of Loop** The `for...of` loop is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows iterating over arrays and other iterable objects without the need for an explicit index variable. The use of `let items = [];` before the loop suggests that the test case is verifying that the array is populated correctly, but this is not directly related to the performance comparison. **Pros and Cons** Here's a brief summary of each approach: * **Map**: Pros: concise, efficient, and easy to read. Cons: can be slower for small arrays due to the overhead of creating a new array, and may have additional memory allocation. * **For...of Loop**: Pros: readable, efficient, and often faster than traditional `for` loops due to its optimized implementation in modern browsers. Cons: less familiar to some developers, and may require additional setup (e.g., declaring variables before the loop). * **Traditional For Loop**: Pros: widely supported, easy to understand, and flexible. Cons: can be slower than other approaches due to the need for manual indexing. **Other Alternatives** Some alternative iteration methods you might consider include: * `forEach()`: similar to `map()` but returns no value. * `reduce()`: can be used to accumulate values in an array. * Generators or iterators: allow more fine-grained control over iteration and iteration logic. Keep in mind that performance differences between these approaches may vary depending on specific use cases, data structures, and browser implementations.
Related benchmarks
Array.prototype.map vs Lodash.map 4.17.15
Comments
Confirm delete:
Do you really want to delete benchmark?