Benchmark: Building object from 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(10000)

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.visited }), initial);
reduce mutate
let initial = {}; const result = items.reduce((accumulator, item) => { accumulator[item.name] = item.visited; return accumulator; }, initial);
object.fromEntries ...map
let result = Object.fromEntries( items.map((item) => [item.name, item.visited]) );

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

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	15871.0 Ops/sec
reduce spread	515.3 Ops/sec
reduce mutate	10051.5 Ops/sec
object.fromEntries ...map	732.4 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 world of JavaScript microbenchmarks!

The provided JSON represents a benchmark test case for building an object from arrays using different approaches. To understand what's being tested, let's break down each individual test case:

**Benchmark Definition**

The benchmark definition is a JSON object that contains the code to be executed by the test. It has three properties:

*   `Name`: The name of the benchmark.
*   `Description`: A brief description of the benchmark, which in this case is an adaptation from another source.
*   `Script Preparation Code` and `Html Preparation Code`: These are JavaScript scripts that set up the environment for the benchmark. In this case, it includes importing the Lodash library (`_`) using a script tag.

**Individual Test Cases**

There are four test cases:

1.  **for...of**: This approach uses a `for...of` loop to iterate over the array and build the object.
2.  **reduce spread**: This approach uses the `reduce()` method with an arrow function to build the object, spreading the accumulator object's properties into the new object using the spread operator (`{...accumulator}`).
3.  **reduce mutate**: Similar to the previous approach, but instead of spreading the accumulator object's properties, it directly assigns the values to the object using bracket notation (`accumulator[item.name] = item.visited`).
4.  **object.fromEntries ...map**: This approach uses `Object.fromEntries()` and maps over the array to create an object from key-value pairs.

Now, let's discuss the pros and cons of each approach:

*   **for...of**:
    *   Pros: Simple and straightforward, easy to understand.
    *   Cons: Might be slower due to the overhead of iterating over the array using `for...of`.
*   **reduce spread**:
    *   Pros: More modern syntax, might be faster due to the use of arrow functions and spread operators.
    *   Cons: Requires understanding of the spread operator and the new syntax.
*   **reduce mutate**:
    *   Pros: Directly assigns values, might be faster for large arrays.
    *   Cons: Uses bracket notation, which can lead to slower lookup times in certain browsers.
*   **object.fromEntries ...map**:
    *   Pros: Modern and concise syntax, potentially faster due to the use of `Object.fromEntries()` and mapping.
    *   Cons: Requires understanding of modern JavaScript features and might not be supported by older browsers.

Other considerations:

*   The use of Lodash library (`_`) in the script preparation code simplifies the iteration over arrays using `_.times()`.
*   Some browsers may have specific optimizations or limitations when executing these types of loops or methods, which can affect performance.
*   It's essential to consider the test environment and target browser versions when optimizing for JavaScript benchmarks.

As for special JS features or syntax mentioned:

None are explicitly mentioned in the provided code. However, it's worth noting that modern browsers support a range of JavaScript features, including ES6+ syntax, Object.prototype.toString() manipulation, etc., which can be used to optimize performance.

For alternatives, there are other ways to build an object from arrays using different methods, such as:

*   Using `Array.prototype.reduce()` without the spread operator
*   Using a simple loop with indices and array values
*   Utilizing libraries or modules that provide optimized array manipulation functions

Keep in mind that each approach has its trade-offs, and the best method depends on the specific use case, target browser versions, and performance requirements.

Related benchmarks:

Building object from 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

Created: 4 years ago by: Guest

Jump to the latest result

for...of

reduce spread

reduce mutate

object.fromEntries ...map

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