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

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

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

Object

68K/s

native Map

50K/s

immutable-js

15K/s

object spread

7K/s

View exact numbers

Test name	Executions per second
✓ Object	67,969 Ops/sec
native Map	50,121 Ops/sec
immutable-js	15,497 Ops/sec
object spread	6,945 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The test compares four approaches for creating and updating objects:

1. Object Spread (`object spread`)
2. Immutable.js Set (`immutable-js`)
3. Native Map (`native Map`)
4. Object (`Object`)

Each approach is measured using the same benchmark script, which iterates 100 times, adding a new key-value pair to an object.

**Options Compared**

Here's a brief overview of each option:

1. **Object Spread**: This method uses the spread operator (`...`) to create a shallow copy of an existing object and then updates it with new key-value pairs.
	* Pros: Easy to use, flexible, and well-supported in modern browsers.
	* Cons: Can lead to deep cloning issues if using nested objects, and can be slower than other methods for large datasets.
2. **Immutable.js Set**: This method uses an Immutable.js Map to create an immutable data structure that can't be modified directly. Updates are made by creating a new map with the updated key-value pairs.
	* Pros: Immutable data structure provides thread-safety and prevents concurrent updates, which can lead to bugs.
	* Cons: Can be slower than other methods due to the overhead of creating and updating immutable maps.
3. **Native Map**: This method uses the native `Map` object provided by JavaScript engines to create a data structure that's optimized for performance.
	* Pros: Fastest and most efficient way to update objects, with good cache locality.
	* Cons: Less flexible than other methods, as it requires using specific key-value pairs (strings or symbols).
4. **Object**: This method uses direct property assignment (`obj[key] = {key, value};`) to update an existing object.
	* Pros: Simple and widely supported in older browsers.
	* Cons: Can lead to bugs due to shallow cloning issues, and is slower than other methods for large datasets.

**Library Descriptions**

1. **Immutable.js**: A JavaScript library that provides immutable data structures (Maps, Sets, Lists) and a way to compose them. Its purpose is to make code more predictable and easier to reason about.
2. **Immutability-helper**: A small utility library that extends Immutable.js Maps with additional methods for working with immutable data structures.

**Special JS Features**

1. **Spread Operator (`...`)**: Introduced in ECMAScript 2015, the spread operator allows creating a new object by spreading an existing object's properties into a new object.
2. **Symbol Keys**: Introduced in ECMAScript 2015, symbol keys provide a way to create unique and non-conflicting keys for objects.

**Alternative Approaches**

For updating objects, other approaches include:

1. Using `JSON.parse(JSON.stringify(obj))` with the `replacer` option to perform deep cloning.
2. Using libraries like Lodash or Underscore.js, which offer various methods for working with objects and arrays.

Keep in mind that these alternative approaches may have different performance characteristics and trade-offs compared to the options being tested in this benchmark.

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

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

Created: one year ago by: Guest

Go to the latest result

object spread

immutable-js

native Map

Object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: one year ago by: Guest

Go to the latest result

object spread

immutable-js

native Map

Object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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