Benchmark: entries vs for vs foreach vs some vs every length

Script Preparation code:

function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

window.parentArr = [];

for (let i = 0; i < 100; i++) {
	window.parentArr.push(makeid());
}

Tests:

entries
const newObj = {}; for (const [i, v] of window.parentArr.entries()) { if ((i % 2) === 0) { newObj[i] = v; } }
for
const newObj = {}; for (let i = 0; i < window.parentArr.length; i++) { if ((i % 2) === 0) { newObj[i] = window.parentArr[i]; } }
foreach
const newObj = {}; window.parentArr.forEach((v, i) => { if ((i % 2) === 0) { newObj[i] = v; } })
some
const newObj = {}; window.parentArr.some((v, i) => { if ((i % 2) === 0) { newObj[i] = v; } return false; })
every
const newObj = {}; window.parentArr.every((v, i) => { if ((i % 2) === 0) { newObj[i] = v; } return true; })
for-length
const newObj = {}; for (let i = 0, length = window.parentArr.length; i < length; i++) { if ((i % 2) === 0) { newObj[i] = window.parentArr[i]; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
entries
for
foreach
some
every
for-length

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
entries	382486.5 Ops/sec
for	30506.1 Ops/sec
foreach	542238.2 Ops/sec
some	562642.5 Ops/sec
every	553186.7 Ops/sec
for-length	84313.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Measuring performance differences between various JavaScript iteration methods can be a valuable exercise for developers.

**What is being tested?**

The provided benchmark tests the execution time of different methods to iterate over an array and populate an object with values from the array, while skipping every other element. The methods compared are:

1. `entries` method
2. Traditional `for` loop
3. `forEach` method
4. `some` method
5. `every` method
6. Traditional `for` loop with a variable `length` stored in a separate variable

**Options comparison**

Each option has its pros and cons:

1. **entries**: This method is the most concise way to iterate over an array and provides access to both the index and value of each element. It's also a good candidate for iteration methods, as it iterates until the end of the array. However, performance may be impacted if the browser doesn't optimize this specific method.
2. **Traditional `for` loop**: This is a classic way of iterating over an array in JavaScript. While it provides full control and flexibility, it can result in slower execution compared to other methods due to the overhead of indexing the array.
3. **forEach** (Arrow Function): This method is similar to the traditional `for` loop but uses an arrow function to simplify the code. It's a good choice when you want to perform some operation on each element and skip others, while providing access to both index and value. However, performance may be impacted if the browser doesn't optimize this specific method.
4. **some** method: This method is designed for short-circuit iteration and returns as soon as it finds a falsey value. While it's useful in certain scenarios, its use here results in unexpected behavior (it will not skip elements) because `every` returns true if all values are truthy, not just non-falsy.
5. **every** method: Similar to the `some` method but with different logic (returns false if at least one value is falsy). While it provides a convenient way to check if all elements meet certain conditions, its use here results in unexpected behavior (it will iterate over all elements).
6. **Traditional `for` loop with length stored in variable**: This approach allows for some flexibility but may result in slower performance due to the overhead of indexing the array.

**Other considerations**

*   Use cases: Depending on the specific requirements, one method might be more suitable than others.
*   Optimizations: Browser optimizations can greatly impact the results, especially if multiple methods are compared.
*   Code readability: While the "for" loop is often considered less readable due to its verbosity, it's sometimes necessary for maintaining code clarity.

**Comparison**

The benchmark test reveals that:

*   The `entries` method performs best overall, with faster execution times.
*   Traditional `for` loops have slower execution times but provide more control and flexibility.
*   `forEach` (Arrow Function) performs reasonably well, but performance may be impacted by browser optimizations.
*   The `some` and `every` methods are not optimized for this specific use case and result in unexpected behavior.

**Conclusion**

The results show that the `entries` method is generally the best choice when iterating over an array and skipping every other element. While traditional `for` loops provide more control, their execution times may be slower due to indexing overhead. The `forEach` (Arrow Function) performs reasonably well but might require browser optimizations for optimal performance.

Related benchmarks:

entries vs for vs foreach vs some vs every length (version: 0)

Comparing performance of: entries vs for vs foreach vs some vs every vs for-length

Created: one year ago by: Guest

Jump to the latest result

entries

for

foreach

some

every

for-length

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):