Benchmark: Promo Map - MeasureThat.net

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>

​x
 
<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;
}

 
​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();
testArrayIteration();
testArrayMap
testArrayMap();
testArrayMap();
testUnderscoreMap
testUnderscoreMap();
testUnderscoreMap();
testLodashMap
testLodashMap();
testLodashMap();
testForLoop
testForLoop();
testForLoop();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
testArrayIteration
testArrayMap
testUnderscoreMap
testLodashMap
testForLoop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Browser/OS: Chrome 52 on Windows 7

View result in a separate tab

Test name	Executions per second
testArrayIteration	1290710.0 Ops/sec
testArrayMap	1702379.6 Ops/sec
testUnderscoreMap	2092334.5 Ops/sec
testLodashMap	2214293.8 Ops/sec
testForLoop	1288239.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months 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:

Array.prototype.map()
Underscore.js (.map())
Lodash.js (.map())
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

LLMs can make mistakes. Check important info.

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:

Promo Map (version: 0)

Comparing performance of: testArrayIteration vs testArrayMap vs testUnderscoreMap vs testLodashMap vs testForLoop

Created: 8 years ago by: Guest

Jump to the latest result

testArrayIteration

testArrayMap

testUnderscoreMap

testLodashMap

testForLoop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Array.prototype.map()

Underscore.js (.map())

Lodash.js (.map())

Traditional For Loop