Benchmark: object spread vs immutable-js set vs native Map

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/immutability-helper@2.7.0/index.min.js"></script>

Tests:

object spread
let obj = {}; for(i=0;i<100;i++){ const key = 'key'+i const value = 'value'+i obj = {...obj, [key]: {key, value}} }
immutable-js
let obj = Immutable.Map(); for(i=0;i<100;i++){ const key = 'key'+i const value = 'value'+i obj = obj.set(key, {key, value}) }
native Map
let obj = new Map(); for(i=0;i<100;i++){ const key = 'key'+i const value = 'value'+i obj.set(key, {key, value}) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
object spread
immutable-js
native Map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows

View result in a separate tab

Test name	Executions per second
object spread	7021.6 Ops/sec
immutable-js	16279.6 Ops/sec
native Map	53879.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

The provided JSON represents a benchmark that tests three approaches for creating and updating objects:

1. **Object Spread**: This approach uses the spread operator (`{...obj, [key]: {key, value}}`) to create a new object with updated key-value pairs.
2. **Immutable-JS Set**: This approach uses the `Immutable.Map` class from the Immutable.js library to create an immutable map and update its values using the `set()` method.
3. **Native Map**: This approach uses the built-in `Map` constructor (in modern browsers) or a polyfill (for older browsers) to create a mutable map and update its values using the `set()` method.

**Options Compared:**

* The three approaches are compared in terms of their performance, measured by the number of executions per second.
* Each approach has its own strengths and weaknesses:
	+ **Object Spread**: This approach is simple and concise but can be slower due to the creation of a new object on each iteration. Additionally, it may not provide the best cache locality for modern browsers.
	+ **Immutable-JS Set**: This approach provides an immutable data structure, which can lead to better performance and thread-safety. However, it comes with a slight overhead due to the use of the Immutable.js library.
	+ **Native Map**: This approach is fast and efficient but may not provide the same level of thread-safety as the Immutable-JS Set.

**Pros and Cons:**

* **Object Spread**:
	+ Pros: Simple, concise code; easy to understand and implement.
	+ Cons: May be slower due to object creation on each iteration.
* **Immutable-JS Set**:
	+ Pros: Provides an immutable data structure, better performance, and thread-safety.
	+ Cons: Comes with a slight overhead due to the use of the Immutable.js library; may require additional setup for older browsers.
* **Native Map**:
	+ Pros: Fast and efficient; provides good cache locality.
	+ Cons: May not provide the same level of thread-safety as Immutable-JS Set.

**Library and Syntax:**

The benchmark uses the Immutable.js library to provide an immutable data structure. The `Immutable.Map` class is used to create an immutable map, which can be updated using the `set()` method.

There are no special JavaScript features or syntaxes used in this benchmark, other than the use of modern ES6 features (e.g., spread operator).

**Alternatives:**

Other alternatives for creating and updating objects could include:

* Using a library like Lodash to provide a set of utility functions for working with objects.
* Implementing a custom implementation using a data structure like an object or array.
* Using a different approach, such as using a queue or stack to update the object.

However, it's worth noting that the Object Spread approach is already widely used and supported in modern browsers, making it a good choice for many use cases.

Related benchmarks:

object spread vs immutable-js set vs native Map (version: 0)

Comparing performance of: object spread vs immutable-js vs native Map

Created: 4 years ago by: Guest

Jump to the latest result

object spread

immutable-js

native Map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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