Benchmark: Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array vs. for...in

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.parentObj = {};

for (let i = 0; i < 100; i++) {
	window.parentObj[makeid()] = makeid();
}

​x
 
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.parentObj = {};​for (let i = 0; i < 100; i++) {    window.parentObj[makeid()] = makeid();}​​

Tests:

Object.entries

const newObj = {};
Object.entries(window.parentObj).forEach(([k, v], i) => {
  if ((i % 2) === 0) {
	newObj[k] = v;    
  }
});

 
const newObj = {};Object.entries(window.parentObj).forEach(([k, v], i) => {  if ((i % 2) === 0) {    newObj[k] = v;      }});

Object.keys

const newObj = {};
Object.keys(window.parentObj).forEach((k, i) => {
  if ((i % 2) === 0) {
	newObj[k] = window.parentObj[k];    
  }
});

 
const newObj = {};Object.keys(window.parentObj).forEach((k, i) => {  if ((i % 2) === 0) {    newObj[k] = window.parentObj[k];      }});

Object.keys with extra array

const newObj = {};
Object.keys(window.parentObj).forEach((k, i) => {
  const [extraK, v] = [k, window.parentObj[k]]
  if ((i % 2) === 0) {
	newObj[extraK] = v;    
  }
});

 
const newObj = {};Object.keys(window.parentObj).forEach((k, i) => {  const [extraK, v] = [k, window.parentObj[k]]  if ((i % 2) === 0) {    newObj[extraK] = v;      }});

Object.entries without array
const newObj = {}; Object.entries(window.parentObj).forEach((keyAndVal, i) => { if ((i % 2) === 0) { newObj[keyAndVal[0]] = keyAndVal[1]; } });
const newObj = {};
Object.entries(window.parentObj).forEach((keyAndVal, i) => {
if ((i % 2) === 0) {
newObj[keyAndVal[0]] = keyAndVal[1];
}
});

Object for..in

const newObj = {};
for(var key in window.parentObj) {
  if ((i % 2) === 0) {
	newObj[key] = window.parentObj[key]
  }
};

 
const newObj = {};for(var key in window.parentObj) {  if ((i % 2) === 0) {    newObj[key] = window.parentObj[key]  }};​

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Object.entries
Object.keys
Object.keys with extra array
Object.entries without array
Object for..in

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 13; RMX3686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 111 on Android

View result in a separate tab

Test name	Executions per second
Object.entries	27418.3 Ops/sec
Object.keys	37569.8 Ops/sec
Object.keys with extra array	23536.2 Ops/sec
Object.entries without array	33381.2 Ops/sec
Object for..in	237421.3 Ops/sec

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

Measuring JavaScript performance is crucial for optimizing code and ensuring efficient execution.

Benchmark Overview

The provided JSON represents a JavaScript microbenchmarking test case named "Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array vs. for...in". The test evaluates the performance of four different approaches to iterate over an object:

Object.entries
Object.keys
Object.keys with an extra array
Object.entries without using an array (i.e., directly iterating over object keys)
For-each loop (for...in)

Options Compared

The test compares the performance of these five approaches:

Object.entries: returns an array of a given object's own enumerable key-value pairs
Object.keys: returns an array of a given object's own enumerable property names
Object.keys with extra array: uses both Object.keys and an array to iterate over the properties (not recommended, as it introduces unnecessary complexity)
Object.entries without array: directly iterates over the keys using Object.entries
For-each loop (for...in): uses a traditional for-each loop to iterate over the object's properties

Pros and Cons

Here are some general pros and cons of each approach:

Object.entries: Pros - concise, efficient, and modern way to iterate over objects. Cons - not all browsers support this method (older versions).
Object.keys: Pros - widely supported, simple to use. Cons - can be slower than Object.entries for large objects.
Object.keys with extra array: This approach is not recommended due to its unnecessary complexity and potential performance issues.
Object.entries without array: Similar to Object.entries, but avoids using an array, making it more concise.
For...in: Pros - widely supported, traditional way of iterating over objects. Cons - can be slower than other methods, especially for large objects.

Libraries and Special Features

There are no libraries used in this benchmark. However, note that some JavaScript engines (e.g., V8) use internal optimization techniques to improve performance for certain operations.

Special JS Features or Syntax

This test does not explicitly mention any special features or syntax, but it's worth noting that the use of Object.entries and other modern JavaScript methods can take advantage of browser-specific optimizations, such as:

Array iteration: Modern browsers like Chrome, Firefox, and Edge optimize array iteration using a specialized engine.
Object iteration: Some browsers, like V8, have optimized object iteration using a technique called "object pooling."

Other Alternatives

Some alternative approaches to iterating over objects include:

Loops with in keyword: Using a traditional for loop with the in keyword: for (var key in obj) { ... }
Using forEach with array: Iterating over an object's keys using the forEach method on an array created from the object's keys.
Using Map or Set: Converting an object to a Map or Set and iterating over its entries.

Keep in mind that each approach has its trade-offs, and the best choice depends on the specific use case and performance requirements.

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial for optimizing code and ensuring efficient execution.

**Benchmark Overview**

1. `Object.entries`
2. `Object.keys`
3. `Object.keys` with an extra array
4. `Object.entries` without using an array (i.e., directly iterating over object keys)
5. For-each loop (`for...in`)

**Options Compared**

The test compares the performance of these five approaches:

* `Object.entries`: returns an array of a given object's own enumerable key-value pairs
* `Object.keys`: returns an array of a given object's own enumerable property names
* `Object.keys` with extra array: uses both `Object.keys` and an array to iterate over the properties (not recommended, as it introduces unnecessary complexity)
* `Object.entries` without array: directly iterates over the keys using `Object.entries`
* For-each loop (`for...in`): uses a traditional for-each loop to iterate over the object's properties

**Pros and Cons**

Here are some general pros and cons of each approach:

1. **Object.entries**: Pros - concise, efficient, and modern way to iterate over objects. Cons - not all browsers support this method (older versions).
2. **Object.keys**: Pros - widely supported, simple to use. Cons - can be slower than `Object.entries` for large objects.
3. **Object.keys with extra array**: This approach is not recommended due to its unnecessary complexity and potential performance issues.
4. **Object.entries without array**: Similar to `Object.entries`, but avoids using an array, making it more concise.
5. **For...in**: Pros - widely supported, traditional way of iterating over objects. Cons - can be slower than other methods, especially for large objects.

**Libraries and Special Features**

There are no libraries used in this benchmark. However, note that some JavaScript engines (e.g., V8) use internal optimization techniques to improve performance for certain operations.

**Special JS Features or Syntax**

This test does not explicitly mention any special features or syntax, but it's worth noting that the use of `Object.entries` and other modern JavaScript methods can take advantage of browser-specific optimizations, such as:

* **Array iteration**: Modern browsers like Chrome, Firefox, and Edge optimize array iteration using a specialized engine.
* **Object iteration**: Some browsers, like V8, have optimized object iteration using a technique called "object pooling."

**Other Alternatives**

Some alternative approaches to iterating over objects include:

* **Loops with `in` keyword**: Using a traditional for loop with the `in` keyword: `for (var key in obj) { ... }`
* **Using `forEach` with array**: Iterating over an object's keys using the `forEach` method on an array created from the object's keys.
* **Using `Map` or `Set`**: Converting an object to a `Map` or `Set` and iterating over its entries.

Keep in mind that each approach has its trade-offs, and the best choice depends on the specific use case and performance requirements.

Related benchmarks:

Object.entries VS Object.keys VS Object.keys with extra array VS Object.entries without array vs. for...in (version: 0)

Comparing performance of: Object.entries vs Object.keys vs Object.keys with extra array vs Object.entries without array vs Object for..in

Created: 4 years ago by: Guest

Jump to the latest result