Benchmark: Object.keys + for vs Object.values + for vs for...in

Script Preparation code:

function randNum(max, min) {
	const x = Math.floor(Math.random() * max)
	if (!isFinite(min) && x < min) {
		return min
	}
	return x
}

function randString(max, min, base) {
	let len = randNum(max)
	if (min && len < min) {len = min}
	if (len > max) {len = max}

	let arr = new Uint8Array(len / 2)
	window.crypto.getRandomValues(arr)
	return Array.from(arr, (dec)=> (
		dec.toString(base || 36).padStart(2, '0')
	)).join('')
}

var obj = {};
for(let i = 0; i < 1000; i++) {
  const id = randString(32,32);
  obj[id] = {
    id,
    firstName: randString(40,5),
    lastName: randString(40,5),
    email: randString(40,5),
    address: {
      country: randString(40,5),
      state: randString(40,5),
    },
  };
}

Tests:

Object.keys + for
const keys = Object.keys(obj); for (let i = 0; i < keys.length; i++) {const el = obj[keys[i]]; console.count('keys + for')}
Object.values + for
const values = Object.values(obj); for (let i = 0; i < values.length; i++) {const el = values[i]; console.count('values + for')}
for...in
for (const key in obj) {const el = obj[key]; console.count('for...in')}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.keys + for
Object.values + for
for...in

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Object.keys + for	330.1 Ops/sec
Object.values + for	277.4 Ops/sec
for...in	286.3 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 compare three approaches:

1. `Object.keys() + for`
2. `Object.values() + for`
3. `for...in`

These approaches are used to iterate over the properties of an object, in this case, a large object created using JavaScript's dynamic property creation feature.

**Options Compared:**

Here's a brief overview of each option:

*   **`Object.keys()`**: Returns an array of strings representing the keys of an object. This approach uses the `length` property to determine the number of iterations.
*   **`Object.values()`**: Returns an array of values of an object. Similar to `Object.keys()`, this approach uses the `length` property to determine the number of iterations.
*   **`for...in`**: Iterates over the properties of an object using a loop that includes both inherited and own properties.

**Pros and Cons:**

Here's a summary of each option:

*   **`Object.keys()` + for`**:
    *   Pros:
        *   Fast iteration
        *   Can be more memory-efficient since it doesn't require creating arrays for values or keys.
    *   Cons:
        *   May not work as expected if the object has inherited properties, which can cause unexpected behavior.
*   **`Object.values()` + for`**:
    *   Pros:
        *   Similar performance to `Object.keys() + for`
        *   Can be more intuitive for developers who are familiar with using `Object.values()` in other contexts
    *   Cons:
        *   May not work as expected if the object has inherited properties, similar to `Object.keys() + for`.
*   **`for...in`**:
    *   Pros:
        *   Works well even when there are inherited properties
        *   Can be more readable in certain cases (e.g., when working with complex objects)
    *   Cons:
        *   May be slower due to the overhead of checking for each property.
        *   Less memory-efficient since it requires creating an iterator object.

**Library Used:**

There is no explicit library used in this benchmark, but JavaScript's built-in `Object` methods and the `for...in` loop are utilized.

**Special JS Feature/Syntax:**

The benchmark uses several advanced JavaScript features, including:

*   **Dynamic property creation**: The object being iterated over has dynamically created properties using `var obj = {}`. This is not explicitly mentioned in the explanation but the fact that a large number of properties was dynamically added to the object makes this relevant.

**Alternatives:**

Other approaches for iterating over objects could be:

*   **Using `Array.prototype.forEach()`**: This method iterates over an array-like object, including arrays and other data structures that provide the `length` property.
*   **Using a simple loop with `in`**: Similar to `for...in`, but without the overhead of creating an iterator object.

However, these alternatives might not be suitable for every use case. The choice of approach ultimately depends on the specific requirements of your project and personal familiarity with each method.

Keep in mind that JavaScript performance can vary greatly depending on the browser and device being used, making it essential to test different approaches to find the most optimal solution for your particular scenario.

Related benchmarks:

Object.keys + for vs Object.values + for vs for...in (version: 0)

Comparing performance of: Object.keys + for vs Object.values + for vs for...in

Created: 2 years ago by: Guest

Jump to the latest result

Object.keys + for

Object.values + for

for...in

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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