Benchmark: for-of vs forEach

Script Preparation code:

var obj = Array.from({ length: 10000 }).map((value, i) => i).reduce((val, v) => { val[v] = v; return val; }, {})

Tests:

native for-of w/ entries
for (const [k, v] of Object.entries(obj)) {}
native forEach w/ entries
Object.entries(obj).forEach(function(v, k) {})
vanilla for-loop w/ Object.keys
const keys = Object.keys(obj); for (let i = 0; i < keys.length; i++) { const v = obj[keys[i]]; }
vanilla for-loop w/ Object.entries
const entries = Object.entries(obj); for (let i = 0; i < entries.length; i++) { }
vanilla for-loop w/ Object.values (no keys)
const values = Object.values(obj); for (let i = 0; i < values.length; i++){ }
native forEach w/ Object.values (no keys)
Object.values(obj).forEach(function(v) {})
native for-in
for (const prop in obj) { if (obj.hasOwnProperty(prop)) { const v = obj[prop]; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
native for-of w/ entries
native forEach w/ entries
vanilla for-loop w/ Object.keys
vanilla for-loop w/ Object.entries
vanilla for-loop w/ Object.values (no keys)
native forEach w/ Object.values (no keys)
native for-in

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark data.

**What is being tested?**

MeasureThat.net is testing four different approaches to iterate over an object in JavaScript:

1. **For...of loop with Object.entries**: This approach uses the `Object.entries()` method to get an array of key-value pairs, and then iterates using a traditional for...of loop.
2. **Native forEach loop with Object.values (no keys)**: This approach uses the `Object.values()` method to get an array of values, and then iterates using the native `forEach()` method without providing any callback function or initial value.
3. **Vanilla for-loop with Object.keys**: This approach uses the `Object.keys()` method to get an array of key names, and then iterates using a traditional for...loop.
4. **Vanilla for-loop with Object.entries**: Similar to the previous one, but uses `Object.entries()` instead of `Object.keys()`.
5. **Native for-in loop**: This approach uses the native `for...in` loop to iterate over an object's own enumerable properties.

**Options compared**

The benchmark is comparing the performance of these five approaches on a specific test case:

* A large object with 10,000 key-value pairs.
* The test case is executed repeatedly (number of executions per second) by different browsers and devices.

**Pros and Cons of each approach:**

1. **For...of loop with Object.entries**: Pros:
	* Clear and concise syntax
	* No need to manually increment an index variable
Cons:
	* May incur additional overhead due to the `Object.entries()` method call
2. **Native forEach loop with Object.values (no keys)**: Pros:
	* Convenient and concise syntax
	* Does not require manual iteration or indexing
Cons:
	* May not be as efficient as other approaches for large objects, since it only uses the values array.
3. **Vanilla for-loop with Object.keys**: Pros:
	* Widely supported and understood syntax
	* No external dependencies required
Cons:
	* Can be verbose and error-prone
4. **Vanilla for-loop with Object.entries**: Similar to the previous one, but uses `Object.entries()` instead of `Object.keys()`. This approach has similar pros and cons as the first one.
5. **Native for-in loop**: Pros:
	* Native implementation, likely optimized for performance
Cons:
	+ Syntax can be unfamiliar or error-prone for some developers

**Library usage**

None of the test cases use any external libraries.

**Special JavaScript features/syntax**

The benchmark does not mention any special JavaScript features or syntax, such as async/await, promises, or modern JavaScript classes.

**Other alternatives**

If you want to explore other approaches to iterating over an object in JavaScript, here are a few more:

* **Using a custom array**: Instead of using `Object.keys()` or `Object.values()`, you could create a custom array of key-value pairs and iterate over it. This approach can be more efficient for large objects.
* **Using a library function**: There are various library functions available that can help you iterate over an object, such as `lodash.each()` or `Underscore.forEach()`. These functions often provide additional features and optimizations compared to the native approaches.
* **Using a streaming solution**: If you're working with very large objects, you might consider using a streaming solution, where data is processed in smaller chunks rather than all at once. This approach can help reduce memory usage and improve performance.

Keep in mind that the best approach for your specific use case will depend on factors like object size, iteration requirements, and personal preference.

Related benchmarks:

for-of vs forEach (version: 0)

Comparing performance of: native for-of w/ entries vs native forEach w/ entries vs vanilla for-loop w/ Object.keys vs vanilla for-loop w/ Object.entries vs vanilla for-loop w/ Object.values (no keys) vs native forEach w/ Object.values (no keys) vs native for-in

Created: 4 years ago by: Guest

Jump to the latest result

native for-of w/ entries

native forEach w/ entries

vanilla for-loop w/ Object.keys

vanilla for-loop w/ Object.entries

vanilla for-loop w/ Object.values (no keys)

native forEach w/ Object.values (no keys)

native for-in

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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