Benchmark: keys vs entires vs values vs for...of

Script Preparation code:

var obj = {
	visible: '1',
  	value: '2'
}

Tests:

keys
let i = ''; Object.keys(obj).forEach(key => { if (!obj[key]) { return; } i += obj[key]; });
keys with variable
let i = ''; Object.keys(obj).forEach(key => { const value = obj[key]; if (!value) { return; } i += value; });
entries
let i = ''; Object.entries(obj).forEach(([key, value]) => { if (!value) { return; } i += value; });
values
let i = ''; Object.values(obj).forEach((value) => { if (!value) { return; } i += value; });
entries with variable
let i = ''; Object.entries(obj).forEach((entry) => { const [key, value] = entry; if (!value) { return; } i += value; });
for...of
let i = ''; for (const [key, value] of Object.entries(obj)) { if (!value) { return; } i += value; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
keys
keys with variable
entries
values
entries with variable
for...of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
keys	2967572.5 Ops/sec
keys with variable	4086504.0 Ops/sec
entries	6178637.5 Ops/sec
values	6647100.0 Ops/sec
entries with variable	6189576.0 Ops/sec
for...of	7079943.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

I'd be happy to explain what's being tested in the provided JSON benchmark.

The goal of this benchmark is to compare the performance of different ways to iterate over an object's properties (values) and check if they are truthy. The test cases use JavaScript's built-in `Object` methods to access the object's properties:

1. **Keys**: `Object.keys(obj).forEach(key => { ... })`
2. **Keys with variable**: Similar to the previous one, but uses a variable `key`.
3. **Entries**: `Object.entries(obj).forEach(([key, value]) => { ... })`
4. **Entries with variable**: Similar to the previous one, but uses a variable for both `key` and `value`.
5. **For...of**: A modern JavaScript feature that allows iterating over an array (or object's entries) using a for loop.

The test cases aim to measure which approach is the fastest in terms of the number of executions per second on a given machine.

Now, let's discuss the pros and cons of each approach:

1. **Keys**:
	* Pros: Simple and widely supported.
	* Cons: Can be slower due to the `forEach` loop and checking if `obj[key]` is truthy.
2. **Keys with variable**:
	* This variation doesn't provide significant advantages over the standard "keys" approach, as it's still using a similar loop structure.
3. **Entries**:
	* Pros: Can be faster due to the ability to access both key and value in each iteration without unnecessary checks.
	* Cons: May require more memory allocation, as `Object.entries()` returns an array of arrays (key-value pairs).
4. **Entries with variable**:
	* Similar pros and cons to the standard "entries" approach.
5. **For...of**:
	* Pros: Modern JavaScript feature that allows for efficient iteration over object entries without unnecessary checks.
	* Cons: May not be supported by older browsers or environments.

Other considerations:

* Using `Object.entries()` can provide better performance due to the ability to access both key and value in each iteration. However, it may require more memory allocation.
* The use of a variable for `key` and `value` (in "entries with variable" cases) doesn't significantly impact the performance differences between these approaches.

As for the libraries used in this benchmark, none are explicitly mentioned. The test relies solely on JavaScript's built-in methods to access object properties.

Regarding special JavaScript features or syntax, the only notable feature is **For...of**, which allows iterating over an array (or object's entries) using a for loop. This feature was introduced in ECMAScript 2015 and has since become widely adopted.

Other alternatives to test these iterations would be:

* Using `Object.keys()` with a callback function
* Using a traditional `for` loop to access object properties by index
* Using a library like Lodash, which provides utility functions for iterating over objects

Keep in mind that the performance differences between these approaches can vary depending on the specific use case and environment.

Related benchmarks:

keys vs entires vs values vs for...of (version: 1)

Comparing performance of: keys vs keys with variable vs entries vs values vs entries with variable vs for...of

Created: 2 years ago by: Registered User

Jump to the latest result

keys

keys with variable

entries

values

entries with variable

for...of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):