Benchmark: foreach: array vs object keys vs object values vs object entries

Script Preparation code:

var arr = [];
var obj = {};

for (i = 0; i < 1000; ++i) {
  arr.push(i);
  obj[i] = i;
}

Tests:

array
arr.forEach( (item) => item, );
object with keys
Object.keys(obj).forEach( (key) => key, );
object with values
Object.values(obj).forEach( (value) => value, );
object with entries 1
Object.entries(obj).forEach( (entry) => entry, );
object with entries 2
Object.entries(obj).forEach( ([key, value]) => [key, value], );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array
object with keys
object with values
object with entries 1
object with entries 2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

Browser/OS: Firefox 142 on Windows

View result in a separate tab

array

629K/s

object with values

317K/s

object with keys

102K/s

object with entries 1

65K/s

object with entries 2

53K/s

View exact numbers

Test name	Executions per second
✓ array	629,029 Ops/sec
object with values	316,644 Ops/sec
object with keys	102,265 Ops/sec
object with entries 1	64,737 Ops/sec
object with entries 2	53,446 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition**

The benchmark is designed to test the performance of different methods for iterating over an object in JavaScript: `arr.forEach`, `Object.keys(obj).forEach`, `Object.values(obj).forEach`, and two variants of `Object.entries(obj).forEach`.

**Script Preparation Code**

The script preparation code creates two objects, `arr` (an empty array) and `obj` (an empty object), using a loop that pushes 1000 values into both objects. This ensures that the benchmark is testing iteration over large datasets.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark focuses solely on JavaScript performance.

**Individual Test Cases**

Each test case represents a different method for iterating over an object:

1. `arr.forEach`: Iterates over an array using the `forEach` method.
2. `Object.keys(obj).forEach`: Iterates over an object's keys using the `Object.keys()` method and the `forEach` method.
3. `Object.values(obj).forEach`: Iterates over an object's values using the `Object.values()` method and the `forEach` method.
4. `Object.entries(obj).forEach`: Iterates over an object's entries (key-value pairs) using the `Object.entries()` method and the `forEach` method. The second variant uses destructuring syntax (`[key, value] => [key, value]`) to iterate over the entries.
5. `object with keys`, `object with values`, `object with entries 1`, and `object with entries 2`: These test cases are identical to the above ones but have different names.

**Library Usage**

There is no explicit library usage mentioned in the benchmark definition or the script preparation code.

**Special JS Features/Syntax**

The only notable feature used in this benchmark is destructuring syntax (`[key, value] => [key, value]`) in one of the `Object.entries()` test cases. This is a relatively recent addition to JavaScript ( introduced in ECMAScript 2015) and allows for more concise iteration over objects.

**Pros and Cons**

Here are some general pros and cons for each method:

* `arr.forEach`:
	+ Pros: Simple, well-supported, and fast.
	+ Cons: Only works on arrays, not objects.
* `Object.keys(obj).forEach`:
	+ Pros: Works on any object with a defined prototype chain.
	+ Cons: Requires two methods ( `Object.keys()` and `forEach`), which might incur some overhead.
* `Object.values(obj).forEach`:
	+ Pros: Similar to `Object.keys()` but returns values instead of keys, making it suitable for objects with numerical or string keys.
	+ Cons: Also requires two methods (`Object.values()` and `forEach`).
* `Object.entries(obj).forEach` (with destructuring syntax):
	+ Pros: More concise and readable than the previous variants, especially when iterating over large datasets.
	+ Cons: Requires support for modern JavaScript features.

**Other Alternatives**

For objects with numerical or string keys, you could use a simple loop instead of `Object.keys()`:

```javascript
for (const key in obj) {
  // process key
}
```

This method is not as concise but can be faster and more efficient, especially for large datasets.

Keep in mind that the choice of iteration method ultimately depends on your specific use case, personal preference, and performance requirements.

foreach: array vs object keys vs object values vs object entries (version: 0)

Comparing performance of: `array vs object with keys vs object with values vs object with entries 1 vs object with entries 2`

Created: 4 years ago by: Guest

Go to the latest result

array

object with keys

object with values

object with entries 1

object with entries 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

foreach: array vs object keys vs object values vs object entries (version: 0)

Comparing performance of: array vs object with keys vs object with values vs object with entries 1 vs object with entries 2

Created: 4 years ago by: Guest

Go to the latest result

array

object with keys

object with values

object with entries 1

object with entries 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `array vs object with keys vs object with values vs object with entries 1 vs object with entries 2`