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() {
    underscore.map(PromosArray, function (promo) {
        return promo.type;
    });
}

function testLodashMap() {
    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() {    underscore.map(PromosArray, function (promo) {        return promo.type;    });}​function testLodashMap() {    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	1265912.2 Ops/sec
testArrayMap	1507532.5 Ops/sec
testUnderscoreMap	1907867.9 Ops/sec
testLodashMap	1977808.5 Ops/sec
testForLoop	1285028.4 Ops/sec

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

Let's break down what's being tested in this benchmark.

What is being tested?

The test cases are designed to compare the performance of different approaches for mapping over an array of objects. The array contains three objects with different types: "regular", "markdown", and "promo".

Options compared

There are four options being compared:

Native JavaScript map() method: This is a built-in method in JavaScript that maps over an array, applying a specified function to each element.
Underscore.js map() method: Underscore.js is a utility library for functional programming in JavaScript. Its map() method is similar to the native map() method but provides additional features and convenience methods.
Lodash.js map() method: Lodash.js is another utility library for functional programming in JavaScript. Its map() method is similar to Underscore.js' map() method but offers more advanced functions and options.

Pros and Cons of each approach

Native JavaScript map() method:
- Pros: Fast, lightweight, and widely supported.
- Cons: May not be as convenient or feature-rich as other libraries.
Underscore.js map() method:
- Pros: Provides additional convenience methods and features beyond the native map() method.
- Cons: Adds an external dependency (Underscore.js) to the project.
Lodash.js map() method:
- Pros: Offers more advanced functions and options compared to Underscore.js.
- Cons: Also adds an external dependency (Lodash.js) to the project.

Other considerations

The test cases are designed to measure the performance of each approach in terms of executions per second. This suggests that the benchmark is focused on evaluating the speed and efficiency of each method.
The use of a fixed-size array with a small number of elements may not accurately represent real-world scenarios, where arrays can be much larger.

Library descriptions

Underscore.js: A utility library for functional programming in JavaScript, providing convenience methods for common tasks such as mapping, filtering, and reducing.
Lodash.js: Another utility library for functional programming in JavaScript, offering a wide range of functions and options beyond those provided by Underscore.js.

Special JS feature or syntax

None mentioned in the benchmark.

Alternatives

Other alternatives to these three approaches could include:

Array.prototype.reduce(): Instead of using map() to create a new array, you can use reduce() to accumulate the results in an existing array.
For loops with Array.prototype.forEach(): Another approach is to use traditional for loops with forEach() to iterate over the array and apply the transformation.

Note that these alternatives may have different performance characteristics or trade-offs compared to using map() or other functional programming methods.

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**What is being tested?**

**Options compared**

There are four options being compared:

1. **Native JavaScript `map()` method**: This is a built-in method in JavaScript that maps over an array, applying a specified function to each element.
2. **Underscore.js `map()` method**: Underscore.js is a utility library for functional programming in JavaScript. Its `map()` method is similar to the native `map()` method but provides additional features and convenience methods.
3. **Lodash.js `map()` method**: Lodash.js is another utility library for functional programming in JavaScript. Its `map()` method is similar to Underscore.js' `map()` method but offers more advanced functions and options.

**Pros and Cons of each approach**

1. **Native JavaScript `map()` method**:
	* Pros: Fast, lightweight, and widely supported.
	* Cons: May not be as convenient or feature-rich as other libraries.
2. **Underscore.js `map()` method**:
	* Pros: Provides additional convenience methods and features beyond the native `map()` method.
	* Cons: Adds an external dependency (Underscore.js) to the project.
3. **Lodash.js `map()` method**:
	* Pros: Offers more advanced functions and options compared to Underscore.js.
	* Cons: Also adds an external dependency (Lodash.js) to the project.

**Other considerations**

* The test cases are designed to measure the performance of each approach in terms of executions per second. This suggests that the benchmark is focused on evaluating the speed and efficiency of each method.
* The use of a fixed-size array with a small number of elements may not accurately represent real-world scenarios, where arrays can be much larger.

**Library descriptions**

1. **Underscore.js**: A utility library for functional programming in JavaScript, providing convenience methods for common tasks such as mapping, filtering, and reducing.
2. **Lodash.js**: Another utility library for functional programming in JavaScript, offering a wide range of functions and options beyond those provided by Underscore.js.

**Special JS feature or syntax**

None mentioned in the benchmark.

**Alternatives**

Other alternatives to these three approaches could include:

1. **Array.prototype.reduce()**: Instead of using `map()` to create a new array, you can use `reduce()` to accumulate the results in an existing array.
2. **For loops with Array.prototype.forEach()**: Another approach is to use traditional for loops with `forEach()` to iterate over the array and apply the transformation.

Note that these alternatives may have different performance characteristics or trade-offs compared to using `map()` or other functional programming 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 5 months ago):