Benchmark: Getting item by an index in json using for vs Object.keys vs Object.values

Script Preparation code:

var bigJSON = {};
for(var index = 0; index < 100000; index++) bigJSON[Math.random() * 453987] = Math.random() * 3579;
var bigTarget = 54365;

var smallJSON = {};
for(var index = 0; index < 100; index++) smallJSON[Math.random() * 4539] = Math.random() * 357;
var smallTarget = 54;

Tests:

for with a small json
var index = 0; var out; for(var key in smallJSON) { if(index++ != smallTarget) continue; out = smallJSON[key]; break; };
Object.keys with a small json
smallJSON[Object.keys(smallJSON)[smallTarget]];
Object.values with a small json
Object.values(smallJSON)[smallTarget]
for with a big json
var index = 0; var out; for(var key in bigJSON) { if(index++ != bigTarget) continue; out = bigJSON[key]; break; };
Object.keys with a big json
bigJSON[Object.keys(bigJSON)[bigTarget]];
Object.values with a big json
Object.values(bigJSON)[bigTarget]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for with a small json
Object.keys with a small json
Object.values with a small json
for with a big json
Object.keys with a big json
Object.values with a big json

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; rv:100.0) Gecko/20100101 Firefox/100.0

Browser/OS: Firefox 100 on Windows

View result in a separate tab

Test name	Executions per second
for with a small json	4293084.5 Ops/sec
Object.keys with a small json	1263206.4 Ops/sec
Object.values with a small json	883448.2 Ops/sec
for with a big json	5521.8 Ops/sec
Object.keys with a big json	615.7 Ops/sec
Object.values with a big json	484.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this specific benchmark.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for accessing an element in a JSON object by its index:

1. Using `for` loops with `in` operator
2. Using `Object.keys()` method to get the keys of the object and then access the desired key
3. Using `Object.values()` method to get the values of the object and then access the desired value

**Script Preparation Code**

The script preparation code creates two JSON objects: a large one (`bigJSON`) with 100,000 elements, and a small one (`smallJSON`) with 100 elements.

```javascript
// Create large JSON object
var bigJSON = {};
for (var index = 0; index < 100000; index++) {
  bigJSON[Math.random() * 453987] = Math.random() * 3579;
}

// Create small JSON object
var smallJSON = {};
for (var index = 0; index < 100; index++) {
  smallJSON[Math.random() * 4539] = Math.random() * 357;
}
```

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark is not concerned with rendering or updating any UI elements.

**Individual Test Cases**

The benchmark consists of six individual test cases, each testing one of the three approaches for accessing an element in a JSON object by its index. The test cases are:

1. `for` loops with `in` operator (twice: once with `bigJSON` and once with `smallJSON`)
2. Using `Object.keys()` method
3. Using `Object.values()` method

Here's a brief explanation of each approach:

* **For loops with `in` operator**: This approach uses the `for...in` loop to iterate over the keys of the object. The `continue` statement is used to skip elements that don't match the desired index.
* **Object.keys() method**: This approach uses the `Object.keys()` method to get an array of the object's keys, and then accesses the desired key using square bracket notation (`[]`).
* **Object.values() method**: This approach uses the `Object.values()` method to get an array of the object's values, and then accesses the desired value using square bracket notation (`[]`).

**Pros and Cons**

Here are some pros and cons for each approach:

* **For loops with `in` operator**:
	+ Pros: Fast and efficient, especially for large objects.
	+ Cons: Can be less readable and maintainable than other approaches.
* **Object.keys() method**:
	+ Pros: More readable and maintainable than `for...in` loop.
	+ Cons: Can be slower than `for...in` loop due to the overhead of creating an array of keys.
* **Object.values() method**:
	+ Pros: More concise and expressive than `Object.keys()` method, especially for accessing values directly.
	+ Cons: Slower than `for...in` loop and `Object.keys()` method.

**Special Considerations**

The benchmark doesn't mention any special JavaScript features or syntax that might affect the results. However, it's worth noting that the use of `for...in` loops can be affected by the order of properties in the object, which can vary across browsers.

**Other Alternatives**

If you're interested in exploring alternative approaches for accessing elements in a JSON object by its index, here are some options:

* Using `Array.prototype.findIndex()` method
* Using `Object.entries()` method to get an array of key-value pairs and then accessing the desired value using square bracket notation (`[]`)
* Using a library like Lodash or Ramda to simplify iteration over objects

Keep in mind that these alternatives might not be as efficient or readable as the approaches tested in this benchmark.

Related benchmarks:

Getting item by an index in json using for vs Object.keys vs Object.values (version: 2)

Comparing performance of: for with a small json vs Object.keys with a small json vs Object.values with a small json vs for with a big json vs Object.keys with a big json vs Object.values with a big json

Created: 2 years ago by: Registered User

Jump to the latest result

for with a small json

Object.keys with a small json

Object.values with a small json

for with a big json

Object.keys with a big json

Object.values with a big json

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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