Benchmark: Building object from big arrays

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

function getItems(count) {
  return _.times(count, (index) => ({
    name: `city${i}`,
    visited: true
  }))
}

var items = getItems(100000)

Tests:

for...of
const result = {}; for(let item of items) { result[item.name] = item.visited; }
reduce spread
let initial = {}; const result = items.reduce((accumulator, item) => ({ ...accumulator, [item.name]: item }), initial);
reduce mutate
let initial = {}; const result = items.reduce((accumulator, item) => { accumulator[item.name] = item return accumulator }, initial);
object.fromEntries ...map
let result = Object.fromEntries( items.map((item) => [item.name, item]) );
Lodash Keyby
_.keyBy(items, (item) => item.name)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for...of
reduce spread
reduce mutate
object.fromEntries ...map
Lodash Keyby

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 84 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
for...of	384.3 Ops/sec
reduce spread	55.0 Ops/sec
reduce mutate	224.4 Ops/sec
object.fromEntries ...map	50.8 Ops/sec
Lodash Keyby	725.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Definition**

The benchmark is designed to test how fast different approaches can build an object from two large arrays of objects. The benchmark definition provides the script and HTML preparation codes, which are used to generate the input data and set up the environment for the tests.

**Input Data**

The input data consists of two arrays:

1. `items`: An array of 100,000 objects, each with a `name` property and a `visited` property.
2. The `cities` array is not explicitly used in this benchmark definition but its usage is present in another test case as the source of items:  "var cities = _._.keyBy(items, (item) => item.name)"

**Options Compared**

The benchmark compares four different approaches to build an object from the two arrays:

1. **For...of loop**: Iterates over the `items` array and adds each item to a new object.
2. **Reduce spread**: Uses the `reduce()` method with the spread operator (`...`) to accumulate the items into a single object.
3. **Reduce mutate**: Uses the `reduce()` method without the spread operator, modifying the accumulator directly as it iterates over the `items` array.
4. **Object.fromEntries ...map**: Creates an object from an array of key-value pairs using `Object.fromEntries()` and maps each item in the `items` array to a key-value pair.

**Pros and Cons**

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

1. **For...of loop**:
	* Pros: Simple, easy to understand, and efficient.
	* Cons: May be slower due to the overhead of creating a new object on each iteration.
2. **Reduce spread**:
	* Pros: Efficient, as it avoids the overhead of creating multiple objects or modifying an accumulator.
	* Cons: Requires understanding of the `reduce()` method and the spread operator.
3. **Reduce mutate**:
	* Pros: Can be faster than create multiple objects or using `Object.fromEntries()`.
	* Cons: May lead to unexpected behavior if not used carefully, as the accumulator is modified directly.
4. **Object.fromEntries ...map**:
	* Pros: Convenient and expressive way to create an object from an array of key-value pairs.
	* Cons: May be slower than other approaches due to the overhead of creating multiple objects.

**Lodash Keyby**

The benchmark also includes a Lodash `keyBy` function, which is used in one of the test cases. The `keyBy` function takes an array and returns an object with each item as a key-value pair based on a provided function (in this case, `item.name`).

**Other Considerations**

* The benchmark uses a fixed input size of 100,000 items, which may not be representative of real-world scenarios where data sizes can vary greatly.
* The benchmark assumes that the input data is in a specific format and structure, which may limit its applicability to other use cases.

**Alternatives**

If you're looking for alternative approaches or libraries to build objects from arrays, consider the following:

1. **Array.prototype.reduce()**: A built-in method that accumulates values in an array into a single value.
2. **Array.prototype.map()**: A built-in method that creates a new array with transformed versions of each element.
3. **Immutable.js**: A library that provides immutable data structures and functions to work with them.
4. **Ramda**: A functional programming library that includes various utility functions, including `keyBy` (similar to Lodash).

These alternatives may offer different trade-offs in terms of performance, readability, and maintainability, depending on your specific use case and preferences.

Related benchmarks:

Building object from big arrays (version: 0)

Adapted from https://gist.github.com/snapwich/7604b2d827f320e470a07e088e0293f3

Comparing performance of: for...of vs reduce spread vs reduce mutate vs object.fromEntries ...map vs Lodash Keyby

Created: 4 years ago by: Guest

Jump to the latest result

for...of

reduce spread

reduce mutate

object.fromEntries ...map

Lodash Keyby

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