Benchmark: object spread vs immutable-js set vs immer

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>
<script src="https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js"></script>

Tests:

object spread
let obj = {}; for(i=0;i<1000;i++){ const key = 'key'+i const value = 'value'+i obj = {...obj, [key]: {key, value}} }
immutable-js
let obj = Immutable.Map(); for(i=0;i<1000;i++){ const key = 'key'+i const value = 'value'+i obj = obj.set(key, {key, value}) }
immer
let obj = immer.produce( {}, draft => { for(i=0;i<1000;i++){ const key = 'key'+i const value = 'value'+i draft[key] = {key, value} } })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
object spread
immutable-js
immer

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark tests the performance of three approaches for adding properties to an object:

1. Object spread (`object spread`)
2. Immutable.js set (`immutable-js`)
3. Immer (`immer`)

These approaches are compared in terms of execution speed and efficiency.

**Approaches Compared**

### 1. Object Spread

Object spread is a JavaScript method that creates a new object by copying an existing object's properties, and then adding new properties to it. In this benchmark, the test case uses a `for` loop to add 1000 properties to an initial empty object using object spread.

**Pros:**

* Simple and easy to understand
* No additional libraries are required

**Cons:**

* Creates a new object on each iteration, which can lead to memory inefficiency
* The number of iterations is fixed at 1000, which may not be representative of real-world usage patterns

### 2. Immutable.js Set

Immutable.js set is a library that provides a way to create immutable data structures. In this benchmark, the test case uses an `Immutable.Map` object and the `set()` method to add properties to it.

**Pros:**

* Provides a way to create immutable data structures
* Can be more memory-efficient than object spread

**Cons:**

* Requires additional library dependencies (Immutable.js)
* The `set()` method may not be optimized for performance in all browsers

### 3. Immer

Immer is a JavaScript library that provides a way to create immutable data structures using the `immer.produce()` function. In this benchmark, the test case uses the `immer.produce()` function to add properties to an initial empty object.

**Pros:**

* Provides a way to create immutable data structures
* Optimized for performance in most browsers

**Cons:**

* Requires additional library dependencies (Immer)
* May have a slightly higher overhead than object spread due to the immutability feature

**Library Usage and Special JS Features**

* Immutable.js set uses the `Immutable.Map` class from the Immutable.js library, which is a JavaScript library that provides a way to create immutable data structures.
* Immer uses the `immer.produce()` function, which is part of the Immer library.

No special JavaScript features or syntax are used in this benchmark.

**Other Alternatives**

There may be other approaches for adding properties to an object, such as using arrays or other data structures. However, these alternatives may not provide the same level of performance and efficiency as the three approaches compared in this benchmark.

In terms of alternative libraries, there are several other JavaScript libraries that provide immutable data structures, such as Lodash Immute.js and Ramda. However, these libraries may have different design goals and use cases than Immer.

Overall, the choice of approach will depend on the specific requirements and constraints of the project, including performance considerations, memory usage, and ease of development.

Latest run results:

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

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

Browser/OS: Chrome 110 on Windows

View result in a separate tab

Test name	Executions per second
object spread	14.0 Ops/sec
immutable-js	3817.3 Ops/sec
immer	1240.2 Ops/sec

Related benchmarks:

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

Comparing performance of: object spread vs immutable-js vs immer

Created: one year ago by: Guest

Jump to the latest result

object spread

immutable-js

immer

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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