<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>
var PromosArray = [
{
type: "regular",
display: "$123.00"
},
{
type: "markdown",
display: "$100.00"
},
{
type: "promo",
display: "$80.00"
}
];
var PromosObject = {
regular: "$123.00",
markdown: "$100.00",
promo: "$80.00"
};
function find(array, type) {
for (var i = 0; i < array.length; i++) {
if (array[i]["type"] === type) {
return array[i];
}
}
return undefined;
}
function testArrayFind() {
find(PromosArray, "regular");
find(PromosArray, "markdown");
find(PromosArray, "promo");
}
function testObjectFind() {
var foo = PromosObject.regular;
var foo = PromosObject.markdown;
var foo = PromosObject.promo;
}
function testUnderscoreFind() {
underscore.find(PromosArray, "type", "regular");
underscore.find(PromosArray, "type", "markdown");
underscore.find(PromosArray, "type", "promo");
}
function testLodashFind() {
lodash.find(PromosArray, "type", "regular");
lodash.find(PromosArray, "type", "markdown");
lodash.find(PromosArray, "type", "promo");
}
testArrayFind();
testObjectFind();
testUnderscoreFind();
testLodashFind();
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
testArrayFind(); | |
testObjectFind(); | |
testUnderscoreFind(); | |
testLodashFind(); |
Test name | Executions per second |
---|---|
testArrayFind(); | 41377572.0 Ops/sec |
testObjectFind(); | 122322600.0 Ops/sec |
testUnderscoreFind(); | 4491427.5 Ops/sec |
testLodashFind(); | 3408219.5 Ops/sec |
Measuring performance differences between various JavaScript functions is a complex task, but I'll break it down for you.
Benchmark Definition
The benchmark definition is a JSON object that describes the test case. In this case, there are four test cases:
testArrayFind()
: This function uses a simple array-based approach to find an element in the PromosArray
array. It iterates through each element and checks if its type
property matches the specified value.testObjectFind()
: This function uses a similar approach, but it accesses object properties directly on the PromosObject
object instead of using an array-based index.testUnderscoreFind()
and testLodashFind()
: These functions use external libraries, Underscore.js and Lodash.js, respectively, to perform the same operation as testArrayFind()
.Options Compared
The benchmark compares the performance differences between:
testArrayFind()
)testObjectFind()
)Pros and Cons
Here are some general pros and cons for each approach:
PromosObject
object, which may not be available in all contextsOther Considerations
When choosing an approach, consider the following factors:
testObjectFind()
) can be more intuitive for developers familiar with object-oriented programming, while the built-in JavaScript array-based approach is straightforward.PromosObject
is available in the context where the function will be used. If not, the object-based approach may not work as expected.Library Descriptions
Special JS Feature/Syntax
There are no special JavaScript features or syntax used in this benchmark beyond what is typically available in modern JavaScript implementations (ECMAScript 2015+).