Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Promo Map
(version: 0)
Comparing performance of:
testArrayIteration vs testArrayMap vs testUnderscoreMap vs testLodashMap vs testForLoop
Created:
9 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script> underscore = _; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js"></script> <script> lodash = _; </script> </head> <body> </body> </html>
Script Preparation code:
var PromosArray = [ { type: "regular", display: "$123.00" }, { type: "markdown", display: "$100.00" }, { type: "promo", display: "$80.00" } ]; function testArrayIteration() { var items = []; var i; for (i = 0; i < PromosArray.length; i++) { items.push(PromosArray[i].type); } return items; } function testArrayMap() { return PromosArray.map(function (promo) { return promo.type; }); } function testUnderscoreMap() { return underscore.map(PromosArray, function (promo) { return promo.type; }); } function testLodashMap() { return lodash.map(PromosArray, function (promo) { return promo.type; }); } function testForLoop() { var newArray = []; for (var i = 0; i < PromosArray.length; i++) { newArray.push(PromosArray[i].type); } return newArray; }
Tests:
testArrayIteration
testArrayIteration();
testArrayMap
testArrayMap();
testUnderscoreMap
testUnderscoreMap();
testLodashMap
testLodashMap();
testForLoop
testForLoop();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
testArrayIteration
testArrayMap
testUnderscoreMap
testLodashMap
testForLoop
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):
Measuring the performance of different JavaScript array iteration methods is an essential task in understanding how to optimize code for various use cases. **Benchmark Overview** The provided benchmark measures the execution time of four different ways to iterate over an array: 1. **Array.prototype.map()** 2. **Underscore.js (.map())** 3. **Lodash.js (.map())** 4. **Traditional For Loop** Each test case involves iterating over a predefined array (`PromosArray`) and extracting the `type` property of each object. **Options Compared:** ### Array.prototype.map() * This method is built-in to JavaScript arrays, making it a convenient choice for many developers. * It iterates over the array once, using a closure to process each element. * The closure provides access to the current index and value in the array. Pros: * Native support and performance * Easy to use Cons: * Only suitable for arrays with a fixed number of elements. When dealing with large datasets or dynamic lengths, it can be inefficient. ### Underscore.js (.map()) * `_.map()` is part of the popular Underscore.js library. * It uses a similar approach to `Array.prototype.map()`, but as a function outside the array context. * This allows for a closure-like behavior with additional functionality provided by Underscore.js. Pros: * Extends the native `.map()` method with utility functions * Suitable for large datasets and dynamic lengths Cons: * Requires including an external library, adding overhead * The additional features might not be necessary or useful in this specific scenario ### Lodash.js (.map()) * `_.map()` is another popular function from the Lodash library. * Similar to Underscore.js, it extends the native `.map()` method with utility functions. Pros: * Includes a broader range of utility functions than Underscore.js * Suitable for large datasets and dynamic lengths Cons: * Requires including an external library, adding overhead * The additional features might not be necessary or useful in this specific scenario ### Traditional For Loop * A basic, manual approach to iterating over the array. * Can be more flexible when working with non-array data structures. Pros: * No dependencies on external libraries * Highly customizable and flexible Cons: * Can be error-prone due to lack of explicit type checking * Less performant than native `.map()` methods or those provided by utility libraries
Related benchmarks:
Array.prototype.map vs Lodash.map
foreach vs map vs for in v2
array.map vs _.map
String to number conversion in Vanilla JS
Test map
Comments
Confirm delete:
Do you really want to delete benchmark?