Benchmark: Map entires to object

Script Preparation code:

var data = new Map(Array.from({
    length: 25
}, (_, i) => {
    const v = Math.random() * 1000;
    return [v.toString(36), {
        currentValue: v
    }];
}));

Tests:

Array.from().reduce() reusing object
Array.from(data).reduce((obj, [name, { currentValue }]) => { obj[name] = currentValue; return obj; }, {});
Array.from(o, mapFn).reduce() reusing object
Array.from(data, ([name, { currentValue }]) => [name, currentValue]).reduce((obj, [name, value]) => { obj[name] = value; return obj; }, {});
Entries from Array.from(o, mapFn).reduce()
Object.fromEntries( Array.from(data, ([name, { currentValue }]) => [name, currentValue]), );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from().reduce() reusing object
Array.from(o, mapFn).reduce() reusing object
Entries from Array.from(o, mapFn).reduce()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from().reduce() reusing object	338409.9 Ops/sec
Array.from(o, mapFn).reduce() reusing object	317173.8 Ops/sec
Entries from Array.from(o, mapFn).reduce()	299599.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark measures the performance of three different approaches for mapping an array to an object:

1.  `Array.from(data).reduce((obj, [name, { currentValue }]) => {\r\n  obj[name] = currentValue;\r\n  return obj;\r\n}, {});`
2.  `Array.from(data, ([name, { currentValue }]) => [name, currentValue]).reduce((obj, [name, value]) => {\r\n  obj[name] = value;\r\n  return obj;\r\n}, {});`
3.  `Object.fromEntries(\r\n  Array.from(data, ([name, { currentValue }]) => [name, currentValue]),\r\n);`

**Options Comparison**

These three approaches differ in their approach to map the array to an object:

*   **Approach 1:** Uses `Array.prototype.reduce()` method on a new object (`obj`). It iterates over the array using the callback function, which extracts the key-value pair from each element. The result is an object with the mapped values.
*   **Approach 2:** Similar to Approach 1 but uses array destructuring to extract the key-value pair directly. This approach might be slightly faster due to reduced overhead for creating the object's properties.
*   **Approach 3:** Utilizes the `Object.fromEntries()` method, which is a modern API introduced in ECMAScript 2017. It takes an iterable of key-value pairs as its argument and returns an object containing those pairs.

**Pros and Cons**

Here are some pros and cons for each approach:

*   **Approach 1:** Pros - well-supported across older browsers; Cons - might incur overhead due to creating a new object, potentially slower compared to optimized approaches.
*   **Approach 2:** Pros - similar benefits as Approach 1 with slightly reduced overhead due to array destructuring; Cons - compatibility issues with very old browsers that don't support ES7+ syntax.
*   **Approach 3 (Object.fromEntries()):** Pros - performance and readability advantages thanks to its optimized internal implementation, consistent across modern browsers. However, it might not be compatible with older browsers.

**Library/Functionality Explanation**

There is no explicit library or function being used in this benchmark, but some features are leveraged:

*   **Array.prototype.reduce()**: A built-in JavaScript method that applies a reduction function to each element of an array.
*   **Array.from()**: Built-in JavaScript method for creating an array from an iterable (like an object).
*   **Object.fromEntries()**: Introduced in ECMAScript 2017, this is a modern API allowing direct conversion of an iterable into an object.

**Special JS Features/ Syntax**

There are some special features used here:

*   **ES6+ syntax**: The use of `const`, `var`, and arrow functions (e.g., `=>`) indicates that the benchmark was written using modern JavaScript syntax.
*   **ECMAScript 2017+ methods**: The usage of `Object.fromEntries()` is a feature from ECMAScript 2017.

**Alternatives**

If you're interested in alternative approaches, consider these:

*   Using array destructuring to map values onto an object: `Array.prototype.reduce((obj, [key, value]) => obj[key] = value, {})`
*   Using the spread operator (`...`) with Object.create() for mapping arrays to objects.
*   Using modern JavaScript features like `Map` data structures or optimized libraries for performance.

Keep in mind that while alternatives might be more efficient, they may also come with compatibility issues if not using the latest versions of browsers or Node.js.

Related benchmarks:

Map entires to object (version: 0)

Comparing performance of: Array.from().reduce() reusing object vs Array.from(o, mapFn).reduce() reusing object vs Entries from Array.from(o, mapFn).reduce()

Created: one year ago by: Guest

Jump to the latest result

Array.from().reduce() reusing object

Array.from(o, mapFn).reduce() reusing object

Entries from Array.from(o, mapFn).reduce()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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