var myArrayLarge = Array(10000);
for (let i=0; i<10000; i++) {
myArrayLarge[i] = i;
}
console.log("setup complete!");
console.log("starting test 1");
let myArr = []
for (ele of myArrayLarge) {
if (myArr.length > 300) {
continue;
}
myArr.push(ele);
}
console.log("for element of LARGE: ", myArr.length);
console.log("starting test 2");
let myArr = []
for (const ele of myArrayLarge) {
if (myArr.length > 300) {
continue;
}
myArr.push(ele);
}
console.log("for const element of LARGE: ", myArr.length, myArr);
let myArr = []
myArrayLarge.forEach(function(s) {
myArr.push(ele);
if (myArr.length > 300) {
return;
}
});
console.log("myArr forEach LARGE: ", myArr.length)
let myArr = new Array(300)
for (let i=0; i<300; i++) {
let something = myArrayLarge[i];
myArr[i] = myArrayLarge[i];
}
console.log("array index LARGE: ", myArr.length)
let myArr = []
myArrayLarge.map((i) => {
if (myArr.length > 300) {
continue;
}
myArr.push(i);
});
console.log("map LARGE: ", myArr.length)
let myArr = []
myArrayLarge.forEach(s => {
if (myArr.length > 300) {
continue;
}
myArr.push(s);
});
console.log("forEach ES6 LARGE: ", myArr.length)
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
for element of LARGE | |
for const element of LARGE | |
myArr forEach LARGE | |
array index LARGE | |
map LARGE | |
forEach ES6 LARGE |
Test name | Executions per second |
---|---|
for element of LARGE | 3287.2 Ops/sec |
for const element of LARGE | 231170.2 Ops/sec |
myArr forEach LARGE | 11.5 Ops/sec |
array index LARGE | 12.1 Ops/sec |
map LARGE | 12.0 Ops/sec |
forEach ES6 LARGE | 12.2 Ops/sec |
Let's break down the provided benchmark JSON and explain what's being tested.
Benchmark Definition
The benchmark definition is a JavaScript code snippet that describes the test. In this case, it's an array iteration benchmark with a large array (myArrayLarge
) containing 10,000 elements. The test checks how different ways of iterating over this array affect performance.
Options compared
There are four options being compared:
myArr
) from myArrayLarge
. We'll assume that the actual performance test involves using forEach()
or other methods on this array.Pros and Cons
Here's a brief overview of each option:
for...of
.Other considerations
When writing these benchmarks, it's essential to consider factors like:
Library/Function mentioned
In this benchmark, Array.prototype.forEach()
is being used as part of the test. The purpose of forEach()
here is to iterate over each element in the large array (myArrayLarge
) and push elements to a new array (myArr
).
Special JS feature or syntax
The main special feature used here is the modern JavaScript loop, specifically For...of, which allows iterating over arrays without an explicit index variable.
Now that we've explored the benchmark, let's discuss alternatives:
Array.prototype.forEach()
with a custom iterator to improve cache locality and branch prediction.Array.prototype.map()
or for...in
loops, which might offer different performance characteristics depending on the specific use case.For developers seeking alternative ways to approach this problem:
for
loop with an index variable for direct access and control.Array.prototype.forEach()
for a simpler, readable solution.Array.from()
, Array.prototype.slice()
) to find the most efficient approach.