Benchmark: Map() vs Object - MeasureThat.net

Tests:

Using Object
const arr = [ {name: 'name1', prop: 'prop'}, {name: 'name2', prop: 'prop'}, {name: 'name3', prop: 'prop'}, {name: 'name4', prop: 'prop'} ] const obj = {}; arr.forEach(a => obj[a.name] = a)
Using Map()
const arr = [ {name: 'name1', prop: 'prop'}, {name: 'name2', prop: 'prop'}, {name: 'name3', prop: 'prop'}, {name: 'name4', prop: 'prop'} ] const mp = new Map(); arr.forEach((a) => { mp.set(a.name, a); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using Object
Using Map()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.35

Browser/OS: Chrome 107 on Windows

View result in a separate tab

Test name	Executions per second
Using Object	15674384.0 Ops/sec
Using Map()	6472529.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net is testing two approaches to achieve the same result: using `Object` and using `Map()` in JavaScript. Specifically, it's comparing how efficient these two methods are when iterating over an array and assigning values to an object.

**Options compared**

There are two main options being compared:

1. **Using `Object`**: This approach uses a traditional object literal to create an empty object, and then iterates over the array using `forEach()`, assigning each element as a property of the object.
2. **Using `Map()`**: This approach uses the `Map()` constructor to create an empty map (a hash table-like data structure), and then iterates over the array using `forEach()`, setting each element as a key-value pair in the map.

**Pros and Cons**

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

### Using `Object`

Pros:

* Widely supported across browsers
* Familiar syntax for most developers

Cons:

* Can be slower due to the overhead of creating an object literal and iterating over its properties
* May lead to memory issues if the object grows too large

### Using `Map()`

Pros:

* Optimized for fast lookups and assignments (due to hash table implementation)
* Can be faster than using an object, especially for large datasets

Cons:

* Less widely supported across older browsers (although support has improved in recent years)
* May require more code familiarity with the `Map()` API

**Library and purpose**

The `Map` data structure is a built-in JavaScript API introduced in ECMAScript 2015 (ES6). It provides a way to store key-value pairs, allowing for fast lookups and efficient insertion/deletion of elements.

**Special JS feature or syntax**

There are no special features or syntax required to run this benchmark. However, it's worth noting that the `Map()` API is supported by most modern browsers, including Chrome 107, which is used in this benchmark.

**Other alternatives**

While not explicitly tested in this benchmark, other approaches could be considered:

* Using a `for...in` loop with an object literal
* Using a library like Lodash's `mapValues()` function

These alternatives might offer different performance characteristics, but they are not part of the original implementation described in the benchmark.

Related benchmarks:

Map() vs Object (version: 0)

Comparing performance of: Using Object vs Using Map()

Created: 2 years ago by: Guest

Jump to the latest result

Using Object

Using Map()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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