Benchmark: Object.values vs cached array

Script Preparation code:

class Basic {
  obj = {};
  add(k, v) {
    this.obj[k] = v;
  }
  getValues() {
    return Object.values(this.obj);
  }
};

class Cached {
  obj = {};
  cache = [];
  add(k, v) {
    this.obj[k] = this.cache.length;
    this.cache.push(v);
  }
  getValues() {
    return this.cache;
  }
};

basic = new Basic();
cached = new Cached();

for (let i = 0; i < 1000; i++) {
  basic.add('a' + i, i);
  cached.add('a' + i, i);
}

Tests:

Fetch vias Object.values()
basic.getValues()
Fetch via cached array
cached.getValues()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Fetch vias Object.values()
Fetch via cached array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.1.1

View result in a separate tab

Test name	Executions per second
Fetch vias Object.values()	105617.7 Ops/sec
Fetch via cached array	9609163.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Overview**

The benchmark compares two approaches to fetching values from an object: `Object.values()` and a cached array. The test creates two classes, `Basic` and `Cached`, which simulate these two approaches. Each class has methods to add key-value pairs to the object and retrieve the values using one of the two approaches.

**What's being tested**

The benchmark is testing the performance of these two approaches:

1. **Fetching values via `Object.values()`**: This approach involves calling the `getValues()` method on an object, which returns an array containing all the values in the object.
2. **Fetching values via a cached array**: This approach stores the added key-value pairs in an array and then returns this array when `getValues()` is called.

**Options compared**

The benchmark is comparing two options:

1. **Object.values()**
2. **Cached array**

**Pros and cons of each approach:**

1. **Object.values()**:
	* Pros:
		+ Easy to implement
		+ Works with any object that has a `values()` method
	* Cons:
		+ May be slower due to the overhead of calling a method on every iteration
		+ May not perform well if the object is large or complex
2. **Cached array**:
	* Pros:
		+ Can be faster for large or complex objects since it avoids the overhead of calling `getValues()`
		+ Allows for caching and reuse of previously computed values
	* Cons:
		+ Requires additional memory to store the cached array
		+ May require more complex implementation to manage the cache

**Library**

In this benchmark, no external libraries are used. The `Object.values()` method is a built-in JavaScript method.

**Special JS feature/syntax**

The benchmark uses ES6 syntax (e.g., arrow functions, classes) and modern JavaScript features (e.g., template literals). If you're using an older version of JavaScript that doesn't support these features, you may need to modify the code accordingly.

**Other alternatives**

While `Object.values()` is a common approach for fetching values from an object, other alternatives include:

* Using a library like Lodash or Ramda to access object values
* Implementing your own custom solution for caching and retrieving values

In terms of benchmarking, you might also consider testing other approaches, such as:

* Using `for...in` loops instead of `Object.values()`
* Caching values in an array using a different data structure (e.g., Set)
* Comparing the performance of different caching strategies (e.g., least-recently-used, most-recently-used)

I hope this explanation helps!

Related benchmarks:

Object.values vs cached array (version: 0)

Compare fetching values by calling Object.values on the fly vs a cached array

Comparing performance of: Fetch vias Object.values() vs Fetch via cached array

Created: one year ago by: Guest

Jump to the latest result

Fetch vias Object.values()

Fetch via cached array

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):