Benchmark: Reduce + findIndex vs Loops + Object.values()

Tests:

reduce + findIndex
const movies = Array.from({ length: 50 }).map(() => ({ characters: Array.from({ length: 50 }).map((_, i) => ({ id: Math.floor(Math.random() * 100), })), })); const mergedCharacters = movies.reduce( (characters, movie) => characters.concat(movie.characters), [] ); const uniqueCharacters = mergedCharacters.filter( (character, index) => mergedCharacters.findIndex((mCharacter) => mCharacter.id === character.id) === index );
Loops + Object.keys
const movies = Array.from({ length: 50 }).map(() => ({ characters: Array.from({ length: 50 }).map((_, i) => ({ id: Math.floor(Math.random() * 100) })) })) const uniqueCharacters = {} for (let i = 0; i < movies.length; i++) { for (let j = 0; j < movies[i].characters.length; j++) { uniqueCharacters[movies[i].characters[j].id] = movies[i].characters[j]; } } const characters = Object.values(uniqueCharacters);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + findIndex
Loops + Object.keys

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce + findIndex	1187.7 Ops/sec
Loops + Object.keys	3139.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance of JavaScript microbenchmarks!

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

**Benchmark Definition**

The benchmark definition is a JSON object that describes two test cases:

1. "Reduce + findIndex vs Loops + Object.values()":
	* This test case compares the performance of using `Array.prototype.reduce()` with `Array.prototype.findIndex()` (or `Array.prototype.includes()` for older browsers) to merge and filter arrays, against using explicit loops (`for`-loops).
2. The second test case is identical to the first one, but uses `Object.keys()` instead of `Array.prototype.values()`.

**Options Compared**

Two approaches are compared:

1. **Reduce + findIndex (or includes)**: This approach uses the built-in `reduce()` method to merge and filter arrays.
2. **Loops + Object.keys**: This approach uses explicit loops (`for`-loops) to achieve the same result, and also uses `Object.keys()` to iterate over object values.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Reduce + findIndex (or includes)**:
	* Pros:
		+ More concise and expressive code.
		+ Built-in method, so it's likely to be optimized by the engine.
	* Cons:
		+ May not be as easy to understand for beginners or those without experience with these methods.
2. **Loops + Object.keys**:
	* Pros:
		+ More familiar and understandable for some developers.
		+ Can be more control over the iteration order and filtering process.
	* Cons:
		+ More verbose code, which can lead to performance overhead.

**Library/Functionality Used**

In this benchmark, `Array.prototype.reduce()` is used in the "Reduce + findIndex" test case. This method was introduced in ECMAScript 2011 (ES6) and is widely supported by modern browsers and engines.

`Object.keys()` is used in both test cases to iterate over object values.

**Special JavaScript Feature/Syntax**

None of the provided benchmark tests use any special JavaScript features or syntax that would require specific knowledge or expertise. However, if you're interested in exploring other advanced features, some examples might include:

* `Set.prototype.add()`, `Map.prototype.set()`, or `ArrayBuffer.prototype.subarray()` for array operations.
* `Object.create()`, `Object.assign()`, or `JSON.parse()` for object manipulation.
* `RegExp.prototype.test()`, `String.prototype.replace()`, or `Function.prototype.call()` for string and function operations.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

1. **Using `Array.from()`**: Instead of using an array literal `[ ]`, consider using `Array.from()` to create a new array.
2. **Using `map()` instead of `reduce()`**: If you need to perform multiple operations on each element, consider using the `map()` method instead.
3. **Using `filter()` with arrow functions**: For filtering arrays or objects, use the `filter()` method with an arrow function as the callback.

Keep in mind that these alternatives might change the performance characteristics of your code, so be sure to test and profile your code accordingly.

Related benchmarks:

Reduce + findIndex vs Loops + Object.values() (version: 0)

Comparing performance of: reduce + findIndex vs Loops + Object.keys

Created: 5 years ago by: Guest

Jump to the latest result

reduce + findIndex

Loops + Object.keys

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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