Benchmark: Different ways of creating a Dictionary

Different ways of creating a Dictionary (version: 0)

- Array.map with Object.fromEntries - Array.map with Object.fromEntries with new Map - Reduce with new Object (`{}`) (reusing object) - Reduce with new Object (`{}`) (creating temporary objects) - Reduce with new Map (reusing map)

Comparing performance of: Array.map with Object.fromEntries vs Array.map with new Map vs Reduce with new Object (`{}`) (reusing object) vs Reduce with new Object (`{}`) (creating temporary objects) vs Reduce with new Map (reusing map)

Created: 3 years ago by: Guest

Jump to the latest result

Script Preparation code:

var ids = Array.from(Array(10000).keys())

var data = ids.map(item => ({ id: item, random: Math.random() }))

Tests:

Array.map with Object.fromEntries
// Create the dictionary // Using `Object.fromEntries` and `Array.map` const dictionary = Object.fromEntries( data.map((item) => [ // Key item.id, // Item item, ]) ); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary[id]);
Array.map with new Map
// Create the dictionary // Using `new Map` and `Array.map` const dictionary = new Map( data.map((item) => [ // Key item.id, // Item item, ]) ); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary.get(id));
Reduce with new Object (`{}`) (reusing object)
// Create the dictionary // Using `Array.reduce` with `new Object()` // And reusing the object const dictionary = data.reduce((obj, item) => { obj[item.id] = item; return obj; }, {}); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary[id]);
Reduce with new Object (`{}`) (creating temporary objects)
// Create the dictionary // Using `Array.reduce` with `new Object()` // And NOT reusing the object const dictionary = data.reduce((obj, item) => { return { ...obj, [item.id]: item }; }, {}); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary[id]);
Reduce with new Map (reusing map)
// Create the dictionary // Using `Array.reduce` with `new Map` // And reusing the map const dictionary = data.reduce((map, item) => { map.set(item.id, item); return map; }, new Map()); // Utilize it, to test the performance of the dictionary itself as well. ids.map((id) => dictionary.get(id));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.map with Object.fromEntries
Array.map with new Map
Reduce with new Object (`{}`) (reusing object)
Reduce with new Object (`{}`) (creating temporary objects)
Reduce with new Map (reusing map)

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Measuring performance in JavaScript is crucial for developers to optimize their applications' efficiency. The provided benchmark, MeasureThat.net, tests four different approaches to create and utilize dictionaries (or objects) in JavaScript.

**What are the options being compared?**

1. `Array.map` with `Object.fromEntries`
2. `Array.map` with `new Map`
3. `Reduce` with `new Object (`{}`) (reusing object)
4. `Reduce` with `new Object (`{}`) (creating temporary objects)

**Pros and Cons of each approach:**

1. **`Array.map` with `Object.fromEntries`:**
	* Pros:
		+ Fast and efficient, as it leverages the optimized `Object.fromEntries` method.
		+ Easy to read and maintain.
	* Cons:
		+ Requires JavaScript 2015 feature support (`Object.fromEntries`).
2. **`Array.map` with `new Map`:**
	* Pros:
		+ Fast and efficient, as it leverages the optimized `Map` API.
		+ Allows for additional map operations like `.get()`, `.has()`, etc.
	* Cons:
		+ Requires JavaScript 2015 feature support (`Map` API).
3. **`Reduce` with `new Object (`{}`) (reusing object):**
	* Pros:
		+ Can be more memory-efficient than creating a new object for each iteration, as the same object is reused.
	* Cons:
		+ May lead to unexpected behavior if not handled correctly, as the initial object properties are lost.
4. **`Reduce` with `new Object (`{}`) (creating temporary objects):**
	* Pros:
		+ Ensures a new object is created for each iteration, avoiding potential issues with reusing objects.
	* Cons:
		+ Can be slower and more memory-intensive than the other approaches.

**Library used:**

None explicitly mentioned. However, `Map` API is used in options 2 and 4, which provides additional map operations.

**Special JavaScript feature or syntax:**

None explicitly mentioned.

**Other considerations:**

* The benchmark prepares an array of 10,000 objects using `Array.from()` and maps each object to a dictionary (object) with `Object.fromEntries` or `Reduce`. This setup allows for testing the performance of dictionaries with varying numbers of entries.
* The script preparation code creates two arrays: `ids` and `data`, which are used as input data for the benchmark. The `data` array contains objects with `id` and `random` properties, which are used to create and populate the dictionary.

**Alternatives:**

Other approaches to create dictionaries in JavaScript include:

* Using the `Object.assign()` method or a library like Lodash.
* Creating an object using the `{}` syntax (e.g., `const obj = { foo: 'bar' };`).
* Utilizing the `Array.prototype.reduce()` method without creating an object, instead returning the resulting accumulator.

Keep in mind that performance optimizations and best practices may vary depending on specific use cases and requirements.

Related benchmarks: