Benchmark: Object.keys.filter vs Object.values.join

Script Preparation code:

window.foo = {
	one: 'one',
  	two: 'two',
  	three: 'three',
  	four: 'four',
  	five: 'five'
};

Tests:

Object.keys.filter
Object.keys(window.foo).filter(key => window.foo[key])
Object.values.join
Object.values(window.foo ?? []).join('');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.keys.filter
Object.values.join

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 113 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.keys.filter	1633393.9 Ops/sec
Object.values.join	4512879.5 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.

**Benchmark Overview**

The benchmark is comparing two approaches to filter objects in JavaScript:

1. `Object.keys(window.foo).filter(key => window.foo[key])`
2. `Object.values(window.foo ?? []).join('')`

These tests aim to determine which approach is faster, more efficient, or both.

**Approach 1: `Object.keys(window.foo).filter(key => window.foo[key])`**

This approach uses the `filter()` method on an array of keys returned by `Object.keys()`. It then iterates over this array and checks if each key exists in the original object (`window.foo`). If it does, the value associated with that key is included in the result.

**Pros:**

* This approach can be more intuitive for developers familiar with arrays and the `filter()` method.
* It might be easier to understand and implement for those who are not comfortable working with objects directly.

**Cons:**

* Using `Object.keys()` and `filter()` can lead to overhead due to the creation of an array, even if it's empty.
* Iterating over an array can be slower than accessing properties directly on an object.

**Approach 2: `Object.values(window.foo ?? []).join('')`**

This approach uses the `Object.values()` method to get an array of values from the object (`window.foo`). If the object is null or undefined, `??` (the optional chaining operator) returns an empty object `{}`, which also has a `values()` method. The resulting array is then joined into a string using `join('')`.

**Pros:**

* This approach avoids creating an unnecessary array and directly accesses properties on the object.
* It's likely to be faster since it doesn't involve iterating over an array.

**Cons:**

* This approach relies on understanding optional chaining (`??`) and its behavior when applied to objects.
* The `join('')` method might not be as efficient for large arrays, although this is generally a minor concern in most cases.

**Library/Language Features Used**

The benchmark uses the following JavaScript features:

* `Object.keys()`: Returns an array of a given object's own property names.
* `filter()`: Applies a specified condition to each element in an array and returns a new array with only those elements that pass the test.
* `Object.values()`: Returns an array containing all properties (value) of a given object, except own enumerable string-keyed property.
* `??` (optional chaining operator): Returns its operand if reachable, otherwise undefined. It's used here to provide a default value for objects that might be null or undefined.

**Special JavaScript Features/Syntax**

The benchmark uses the optional chaining operator (`??`) and template literals (`\r\n`) in the script preparation code. However, these features are not particularly complex and are widely supported by most modern browsers.

In summary, Approach 2 (`Object.values(window.foo ?? []).join('')`) is likely to be faster due to its direct access to object properties and avoidance of unnecessary array creation. Approach 1 (`Object.keys(window.foo).filter(key => window.foo[key])`) may be more intuitive for some developers but comes with potential overhead from creating an array and iterating over it.

Other alternatives for filtering objects in JavaScript include:

* Using `for...in` loop to iterate over object properties
* Utilizing libraries like Lodash (`_.pick()`, `_filter()`) or Underscore (`_.pick()`, `_filter()`)
* Implementing custom filter functions

Keep in mind that the best approach depends on the specific use case, performance requirements, and developer familiarity with JavaScript features.

Related benchmarks:

Object.keys.filter vs Object.values.join (version: 0)

Comparing performance of: Object.keys.filter vs Object.values.join

Created: one year ago by: Guest

Jump to the latest result

Object.keys.filter

Object.values.join

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