Benchmark: Object key vs Array Filter

Script Preparation code:

var arrayHandlers = [];
var objectHandlers = {};

var handlersCount = 100;

var functionHandlersToFind = [];
var hashesToFind = [];

var generateHash = function(ix) {
    return 'hdl' + ix;
}

var createHandler = function() {
    return function(data) {
        return "#Count:" + data;
    }
};

for (let i = 0; i < handlersCount; i++) {
    let theNewHandler = createHandler();
    arrayHandlers.push(theNewHandler);
    functionHandlersToFind.push(theNewHandler);
    let generatedHash = generateHash(i);
    objectHandlers[generatedHash] = theNewHandler;
    hashesToFind.push(generatedHash);
}

Tests:

Find from array using function reference
functionHandlersToFind.forEach((fnHandler) => arrayHandlers.find(handler => handler === fnHandler))
Find by object keys
hashesToFind.forEach((hash, ix) => objectHandlers[hash])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Find from array using function reference
Find by object keys

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Find from array using function reference	48358.2 Ops/sec
Find by object keys	100072.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark tests two different approaches to access elements in an array: using a function reference (i.e., `arrayHandlers.find(handler => handler === fnHandler)` ) and using object keys (i.e., `hashesToFind.forEach((hash, ix) => objectHandlers[hash])`).

**Options Compared**

Two options are compared:

1. **Array Filtering**: This approach uses the `find()` method to search for an element in the `arrayHandlers` array based on a function reference.
2. **Object Key Access**: This approach uses the `objectHandlers` object to access elements based on their associated keys.

**Pros and Cons of Each Approach**

* **Array Filtering (Find)**:
	+ Pros:
		- Can be faster for large arrays since it only needs to iterate over a single array.
		- Allows for more flexibility in terms of the filtering function.
	+ Cons:
		- Requires creating a function reference, which can be slower than direct key access.
		- May have performance issues if the array is very large or if the filtering function is complex.
* **Object Key Access**:
	+ Pros:
		- Directly accesses elements using their associated keys, which can be faster for small to medium-sized arrays.
		- Reduces overhead of creating a function reference.
	+ Cons:
		- May have performance issues if the object is very large or if the key access pattern is irregular.

**Library Used**

The benchmark uses the `Array.prototype.find()` method and the `Object` data structure, which are built-in JavaScript features. No external libraries are required.

**Special JS Feature or Syntax**

This benchmark uses the following special JavaScript feature:

* **Arrow functions**: The filtering function in both test cases uses arrow functions (`(fnHandler) => arrayHandlers.find(handler => handler === fnHandler)` and `(hash, ix) => objectHandlers[hash]`), which were introduced in ECMAScript 2015 (ES6).

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* **Array size**: If you're working with very large arrays, array filtering might be a better choice. For smaller arrays or when direct key access is more suitable, object key access could be faster.
* **Filtering complexity**: If your filtering function is complex, it might slow down the array filtering approach.

**Alternative Approaches**

Other alternatives to consider:

1. **Using `indexOf()` instead of `find()`**: This can provide better performance for finding a specific element in an array since it doesn't require creating a new function reference.
2. **Using a data structure like a Map**: If you need to frequently access elements by key, using a Map data structure could be more efficient than an object with a large number of keys.

Keep in mind that the best approach depends on your specific use case and performance requirements.

Related benchmarks:

Object key vs Array Filter (version: 0)

Access an stored element through object property key vs array filtering. Util for handlers references, when you need to store handlers and have acces for them later.

Comparing performance of: Find from array using function reference vs Find by object keys

Created: 4 years ago by: Guest

Jump to the latest result

Find from array using function reference

Find by object keys

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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