Benchmark: arr vs obj - MeasureThat.net

Script Preparation code:

    var a = [{
        id: 'id',
        sortingField: 'id',
        header: 'header',
        cell: 'cell_id'
      },

      {
        id: 'token',
        sortingField: 'token',
        header: 'header',
        cell: 'cell_token'
      },

      {
        id: 'family',
        sortingField: 'family',
        header: 'header',
        cell: 'cell_family'
      },

      {
        id: 'grade',
        sortingField: 'grade',
        header: 'header',
        cell: 'cell_grade'
      },

      {
        id: 'hex',
        sortingField: 'hex',
        header: 'header',
        cell: 'cell_hex'
      },

      {
        id: 'vivid',
        sortingField: 'vivid',
        header: 'header',
        cell: 'cell_variant'
      },
    ];

    var o = {
      id: {
        id: 'id',
        sortingField: 'id',
        header: 'header',
        cell: 'cell_id'
      },

      token: {
        id: 'token',
        sortingField: 'token',
        header: 'header',
        cell: 'cell_token'
      },

      family: {
        id: 'family',
        sortingField: 'family',
        header: 'header',
        cell: 'cell_family'
      },

      grade: {
        id: 'grade',
        sortingField: 'grade',
        header: 'header',
        cell: 'cell_grade'
      },

      hex: {
        id: 'hex',
        sortingField: 'hex',
        header: 'header',
        cell: 'cell_hex'
      },

      vivid: {
        id: 'vivid',
        sortingField: 'vivid',
        header: 'header',
        cell: 'cell_variant'
      },
    };

    var k = 'grade';

Tests:

arr
a.find(e => e.id === (k ?? 'id'));
obj
o[k ?? 'id'];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arr
obj

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is testing two approaches to find an element in an array (`a`) or object (`o`):

1. **Array**: `a.find(e => e.id === (k ?? 'id'))`
2. **Object**: `o[k ?? 'id'];`

The test case uses a variable `k` which can be either "grade" or another value if not set.

**What is being tested?**

In this benchmark, we're comparing the performance of two approaches:

1. Using the `find()` method on an array to find an element that matches a condition.
2. Directly accessing an object using its key (`o[k ?? 'id']`).

**Options compared**

The options being compared are:

* **Array**: `a.find()`
* **Object**: direct access using bracket notation (`o[key]`)
* **Default value**: when `k` is not set, the test uses a default value `'id'`

**Pros and Cons of each approach**

1. **Array: `find()`**
	* Pros:
		+ Can be more expressive and flexible for complex conditions.
		+ Allows for early exit if no element matches.
	* Cons:
		+ May have performance overhead due to the iteration and filtering process.
		+ Not all browsers support `find()`.
2. **Object: direct access**
	* Pros:
		+ Typically faster since it's a direct lookup.
		+ Can be more cache-friendly, as it doesn't involve iterating over elements.
	* Cons:
		+ Limited to using the key of the object; no flexibility for complex conditions.
		+ May not work if the object is large or has many keys.

**Other considerations**

In this benchmark, we should note that `k` is used to determine the condition for finding an element. In JavaScript, when `k` is not set, it defaults to `'id'`. This means that the array and object approaches will use different conditions in their respective implementations.

**Library/Functionality being tested**

In this case, we're using built-in functions: `find()` on arrays and direct access using bracket notation on objects. There are no external libraries being used.

**Special JS feature or syntax**

There's one special thing to note here: the use of the nullish coalescing operator (`??`) which returns its right-hand operand if it's not null or undefined, otherwise returning its left-hand operand. This is a relatively recent addition in JavaScript (introduced in ECMAScript 2020) and allows for more concise code when dealing with default values.

**Other alternatives**

Some alternative approaches could be:

* Using `indexOf()` on the array to find the index of the element
* Using a loop or a library like Lodash to iterate over the object keys
* Using a different data structure, such as a Map (if available in the browser), for faster lookups

However, these alternatives are not being tested in this specific benchmark.

Related benchmarks:

arr vs obj (version: 0)

Comparing performance of: arr vs obj

Created: 2 years ago by: Guest

Jump to the latest result

arr

obj

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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