Benchmark: for-in vs object.keys vs object.values for objects - output object values

Script Preparation code:

var obj = {
  'a': {
    id: 'a',
    num: 1
  },
  'b': {
    id: 'b',
    num: 1
  },
  'c': {
    id: 'c',
    num: 1
  },
  'd': {
    id: 'd',
    num: 1
  },
  'e': {
    id: 'e',
    num: 1
  },
  'f': {
    id: 'f',
    num: 1
  },
  'g': {
    id: 'g',
    num: 1
  },
};

AخA
 
var obj = {  'a': {    id: 'a',    num: 1  },  'b': {    id: 'b',    num: 1  },  'c': {    id: 'c',    num: 1  },  'd': {    id: 'd',    num: 1  },  'e': {    id: 'e',    num: 1  },  'f': {    id: 'f',    num: 1  },  'g': {    id: 'g',    num: 1  },};

Tests:

for-in

for (var i=10000; i > 0; i--) {
  var output = []
  for (var key in obj) {
      output.push(obj[key]); 
  }
  console.log(output)
}

 
for (var i=10000; i > 0; i--) {  var output = []  for (var key in obj) {      output.push(obj[key]);   }  console.log(output)}

Object.keys

for (var i=10000; i > 0; i--) {
  var output = Object.keys(obj).map(key => obj[key]);
  console.log(output)
}

 
for (var i=10000; i > 0; i--) {  var output = Object.keys(obj).map(key => obj[key]);  console.log(output)}

Object.values
for (var i=10000; i > 0; i--) { var output = Object.values(obj); console.log(output) }
for (var i=10000; i > 0; i--) {
var output = Object.values(obj);
console.log(output)
}

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
for-in
Object.keys
Object.values

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Linux

View result in a separate tab

Test name	Executions per second
for-in	22.2 Ops/sec
Object.keys	21.9 Ops/sec
Object.values	22.6 Ops/sec

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

Let's dive into the explanation of the provided benchmark.

Benchmark Overview

The benchmark is designed to compare the performance of three different approaches for iterating over an object in JavaScript:

for-in
Object.keys()
Object.values()

Each approach has its own pros and cons, which will be discussed below.

Script Preparation Code

The script preparation code defines a single object obj with six properties, each containing an id and a num value. This object is used as the input for the benchmarking tests.

Benchmark Definition json

The benchmark definition JSON contains three test cases:

for-in: This test case uses the traditional for-in loop to iterate over the object's properties. The loop pushes each property value to an output array.
Object.keys(): This test case uses the Object.keys() method to get an array of the object's property names, which are then mapped to their corresponding values using the spread operator (obj[key]).
Object.values(): This test case uses the Object.values() method to get an array of the object's property values directly.

Other Considerations

The benchmark is run on a Safari 17 browser on a Mac OS X 10.15.7 desktop platform.
Each test case runs for 10000 iterations, with the output console logs being printed to the console.
The RawUAString field contains information about the browser's User Agent string, which may be useful for identifying specific browsers or platforms.

Pros and Cons of each approach

for-in
- Pros: Can iterate over all properties, including symbolic and inherited ones.
- Cons: Has a higher overhead due to the need to access property descriptors, which can lead to slower performance in some cases.
Object.keys()
- Pros: Fast and efficient way to get an array of property names.
- Cons: May not work as expected with objects that have dynamic or inherited properties.
Object.values()
- Pros: Directly returns the values, avoiding the need to access property descriptors.
- Cons: May not be compatible with all browsers or environments (e.g., older versions of Internet Explorer).

Library and Syntax Considerations

None of the test cases explicitly use any external libraries or syntax features. However, it's worth noting that Object.keys() and Object.values() were introduced in ECMAScript 2015 (ES6) and are widely supported by modern browsers.

Alternatives

Other approaches for iterating over objects include:

Using a forEach loop with the in operator
Using the for...of loop with an iterator object
Using a library like Lodash or Ramda to handle iteration

However, these alternatives may not be as widely supported or efficient as the three test cases in this benchmark.

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different approaches for iterating over an object in JavaScript:

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

Each approach has its own pros and cons, which will be discussed below.

**Script Preparation Code**

The script preparation code defines a single object `obj` with six properties, each containing an `id` and a `num` value. This object is used as the input for the benchmarking tests.

**Benchmark Definition json**

The benchmark definition JSON contains three test cases:

1. **for-in**: This test case uses the traditional `for-in` loop to iterate over the object's properties. The loop pushes each property value to an output array.
2. **Object.keys()**: This test case uses the `Object.keys()` method to get an array of the object's property names, which are then mapped to their corresponding values using the spread operator (`obj[key]`).
3. **Object.values()**: This test case uses the `Object.values()` method to get an array of the object's property values directly.

**Other Considerations**

* The benchmark is run on a Safari 17 browser on a Mac OS X 10.15.7 desktop platform.
* Each test case runs for 10000 iterations, with the output console logs being printed to the console.
* The `RawUAString` field contains information about the browser's User Agent string, which may be useful for identifying specific browsers or platforms.

**Pros and Cons of each approach**

1. **for-in**
	* Pros: Can iterate over all properties, including symbolic and inherited ones.
	* Cons: Has a higher overhead due to the need to access property descriptors, which can lead to slower performance in some cases.
2. **Object.keys()**
	* Pros: Fast and efficient way to get an array of property names.
	* Cons: May not work as expected with objects that have dynamic or inherited properties.
3. **Object.values()**
	* Pros: Directly returns the values, avoiding the need to access property descriptors.
	* Cons: May not be compatible with all browsers or environments (e.g., older versions of Internet Explorer).

**Library and Syntax Considerations**

None of the test cases explicitly use any external libraries or syntax features. However, it's worth noting that `Object.keys()` and `Object.values()` were introduced in ECMAScript 2015 (ES6) and are widely supported by modern browsers.

**Alternatives**

Other approaches for iterating over objects include:

* Using a `forEach` loop with the `in` operator
* Using the `for...of` loop with an iterator object
* Using a library like Lodash or Ramda to handle iteration

However, these alternatives may not be as widely supported or efficient as the three test cases in this benchmark.

Related benchmarks:

for-in vs object.keys vs object.values for objects - output object values (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result