Benchmark: object spread vs immutable-js set vs es6 set

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}) }
es6
let obj = new Map(); for(i=0;i<100;i++){ const key = 'key'+i const value = 'value'+i obj = 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
es6

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
object spread	4518.0 Ops/sec
immutable-js	46373.5 Ops/sec
es6	126672.9 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 explanation.

**Benchmark Overview**

The provided benchmark compares the performance of three different approaches for adding elements to an object: `object spread` (using JavaScript's spread operator), `immutable-js set`, and `es6 Map.set()` method. The benchmark is designed to measure the performance of each approach by creating a large object and repeatedly adding new key-value pairs to it.

**Options Compared**

1. **Object Spread**: This approach uses JavaScript's spread operator (`{...obj, [key]: {key, value}}`) to add new properties to an existing object.
2. **Immutable.js Set**: This library provides a `set()` method for creating immutable sets, which can be used to create an object-like data structure. In this benchmark, the `immutable-js set` approach uses `obj.set(key, {key, value})` to add elements to the object.
3. **ES6 Map.set()**: This approach uses the `Map.set()` method (introduced in ECMAScript 2015) to add new key-value pairs to a `Map` object.

**Pros and Cons of Each Approach**

1. **Object Spread**:
	* Pros: Native JavaScript implementation, fast and efficient.
	* Cons: Can lead to memory fragmentation issues if not implemented carefully.
2. **Immutable.js Set**:
	* Pros: Provides an immutable data structure, which can be useful for certain use cases (e.g., concurrent programming).
	* Cons: Requires additional library dependencies, may have performance overhead due to immutability checks.
3. **ES6 Map.set()**:
	* Pros: Native implementation in modern browsers, efficient and fast.
	* Cons: May not work as expected in older browsers that don't support ES6 features.

**Library Descriptions**

1. **Immutable.js**: A library for working with immutable data structures. The `set()` method creates an immutable set, which can be used to create an object-like data structure.
2. **immutability-helper**: A utility library that provides a `set()` function for creating immutable sets.

**Special JS Features**

In this benchmark, no special JavaScript features or syntax are used beyond what is required by the benchmark definition (ES6 Map.set() method). However, it's worth noting that modern browsers support many advanced JavaScript features and syntax, such as async/await, classes, and arrow functions.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

object spread

immutable-js

es6

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):