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 = new Array(PromosArray.length);
  
  	for (var i = 0; i < PromosArray.length; i++) {
     	newArray[i] = 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 = new Array(PromosArray.length);      for (var i = 0; i < PromosArray.length; i++) {        newArray[i] = 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 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

Browser/OS: Chrome 53 on Mac OS X 10.11.3

View result in a separate tab

Test name	Executions per second
testArrayIteration	1270250.0 Ops/sec
testArrayMap	1542518.2 Ops/sec
testUnderscoreMap	1847689.5 Ops/sec
testLodashMap	1861179.5 Ops/sec
testForLoop	988817.4 Ops/sec

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

I'd be happy to help explain the benchmark.

Benchmark Overview

The benchmark is designed to test the performance of different methods for iterating over an array in JavaScript. The array contains three elements, each with a "type" property. The benchmark measures the time it takes to extract the "type" property from each element using four different approaches: map(), underscore.map(), lodash.map(), and a simple for loop.

Options Compared

Array.prototype.map(): This method creates a new array with the results of applying a provided function to each element in the original array.
_underscore.map(): This is an implementation of the map() method from the Underscore.js library, which provides utility functions for functional programming.
_lodash.map(): This is an implementation of the map() method from the Lodash library, which provides a comprehensive set of helper functions for functional programming.
Simple For Loop: This approach uses a traditional for loop to iterate over the array and extract the "type" property from each element.

Pros and Cons

Array.prototype.map():
- Pros: Simple and intuitive, widely supported in modern browsers.
- Cons: Creates a new array, which can be memory-intensive for large datasets.
_underscore.map()`:
- Pros: Fast and efficient, optimized for performance.
- Cons: Requires the Underscore.js library, which may add unnecessary overhead.
_lodash.map()`:
- Pros: Highly customizable and flexible, with many options for modifying the output.
- Cons: Also requires the Lodash library, and its size can impact page load times.
Simple For Loop:
- Pros: Memory-efficient, as it only iterates over the array once.
- Cons: More verbose and error-prone than other approaches.

Other Considerations

The benchmark uses a relatively small dataset (3 elements) to keep execution times short.
The results may not be representative of performance in larger datasets or more complex scenarios.
The benchmark assumes that the "type" property is accessed directly, which may not always be the case in real-world applications.

Library Descriptions

Underscore.js: A utility library for functional programming, providing functions like map(), filter(), and reduce(). It aims to provide a concise and consistent API for working with data.
Lodash: A comprehensive utility library that builds on top of Underscore.js, adding many more functions and features for functional programming.

Special JS Feature/ Syntax

None mentioned in this benchmark, as it focuses on iterating over an array using different methods.

LLMs can make mistakes. Check important info.

I'd be happy to help explain the benchmark.

**Benchmark Overview**

The benchmark is designed to test the performance of different methods for iterating over an array in JavaScript. The array contains three elements, each with a "type" property. The benchmark measures the time it takes to extract the "type" property from each element using four different approaches: `map()`, `underscore.map()`, `lodash.map()`, and a simple `for` loop.

**Options Compared**

1. **Array.prototype.map()**: This method creates a new array with the results of applying a provided function to each element in the original array.
2. **_underscore.map()**: This is an implementation of the `map()` method from the Underscore.js library, which provides utility functions for functional programming.
3. **_lodash.map()**: This is an implementation of the `map()` method from the Lodash library, which provides a comprehensive set of helper functions for functional programming.
4. **Simple For Loop**: This approach uses a traditional `for` loop to iterate over the array and extract the "type" property from each element.

**Pros and Cons**

1. **Array.prototype.map()**:
	* Pros: Simple and intuitive, widely supported in modern browsers.
	* Cons: Creates a new array, which can be memory-intensive for large datasets.
2. **_underscore.map()`**:
	* Pros: Fast and efficient, optimized for performance.
	* Cons: Requires the Underscore.js library, which may add unnecessary overhead.
3. **_lodash.map()`**:
	* Pros: Highly customizable and flexible, with many options for modifying the output.
	* Cons: Also requires the Lodash library, and its size can impact page load times.
4. **Simple For Loop**:
	* Pros: Memory-efficient, as it only iterates over the array once.
	* Cons: More verbose and error-prone than other approaches.

**Other Considerations**

* The benchmark uses a relatively small dataset (3 elements) to keep execution times short.
* The results may not be representative of performance in larger datasets or more complex scenarios.
* The benchmark assumes that the "type" property is accessed directly, which may not always be the case in real-world applications.

**Library Descriptions**

1. **Underscore.js**: A utility library for functional programming, providing functions like `map()`, `filter()`, and `reduce()`. It aims to provide a concise and consistent API for working with data.
2. **Lodash**: A comprehensive utility library that builds on top of Underscore.js, adding many more functions and features for functional programming.

**Special JS Feature/ Syntax**

None mentioned in this benchmark, as it focuses on iterating over an array using different methods.

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 6 months ago):