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

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>

AخA
 
<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}} }
x

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

 
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 = new Map(obj);
  obj.set(key, {key, value})
}

 
let obj = new Map();for(i=0;i<100;i++){  const key = 'key'+i  const value = 'value'+i  obj = new Map(obj);  obj.set(key, {key, value})}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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:121.0) Gecko/20100101 Firefox/121.0

Browser/OS: Firefox 121 on Windows

View result in a separate tab

Test name	Executions per second
object spread	11239.3 Ops/sec
immutable-js	23490.1 Ops/sec
native Map	3176.2 Ops/sec

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

I'll break down the provided benchmark and explain what's being tested, compared, and analyzed.

Benchmark Overview

The test measures the performance of three approaches for creating and modifying objects:

Object spread (using the ... operator)
Immutable.js set
Native JavaScript Map (using the Map constructor)

The benchmark definition json provides a script preparation code that sets up an object (obj) with 100 key-value pairs, where each value is another object with two properties: key and value. The script then updates the object by adding new key-value pairs using different methods.

Test Cases

There are three test cases:

Object Spread: This test case uses the ... operator to create a new object that includes all the properties of the original obj, with each value being an object with key and value properties.
Immutable.js Set: This test case uses Immutable.js's Map data structure, which is similar to JavaScript objects but immutable by default. The script creates a new Map instance and adds key-value pairs using the set method.
Native Map: This test case uses the native JavaScript Map constructor to create a new map and add key-value pairs using the set method.

Comparison

The benchmark compares the performance of each approach across multiple executions per second for Firefox 121 on Desktop (Windows).

Pros and Cons of Each Approach:

Object Spread:
- Pros: Simple, concise syntax, and fast updates.
- Cons: May lead to slower overall performance due to repeated object creation.
Immutable.js Set:
- Pros: Immutable data structure provides predictable behavior and thread safety.
- Cons: Additional overhead due to the use of a separate library and immutable data structure.
Native Map:
- Pros: Native implementation with built-in optimization, suitable for large datasets.
- Cons: May require additional memory allocation and garbage collection.

Libraries and Special Features

Immutable.js: A JavaScript library that provides an immutable data structure (Map) to ensure predictable behavior and thread safety.
Immutability-helper: A utility library used by Immutable.js to simplify the creation of immutable objects, including Maps.
... (object spread): A built-in JavaScript feature using the ... operator to create a new object that includes all properties from an existing object.

Other Alternatives

JavaScript Object Assignment: Another approach for updating an object by assigning a new value to a property, which is not included in this benchmark.
Immutable.js Collection: Immutable.js provides other data structures like Lists and Sets, which might be used as alternatives depending on the specific use case.

In conclusion, the benchmark measures the performance of three approaches for creating and modifying objects: object spread, Immutable.js set, and native JavaScript Map. Each approach has its pros and cons, and understanding these trade-offs is essential for optimizing performance-critical code in JavaScript applications.

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and analyzed.

**Benchmark Overview**

The test measures the performance of three approaches for creating and modifying objects:

1. Object spread (using the `...` operator)
2. Immutable.js set
3. Native JavaScript Map (using the `Map` constructor)

The benchmark definition json provides a script preparation code that sets up an object (`obj`) with 100 key-value pairs, where each value is another object with two properties: `key` and `value`. The script then updates the object by adding new key-value pairs using different methods.

**Test Cases**

There are three test cases:

1. **Object Spread**: This test case uses the `...` operator to create a new object that includes all the properties of the original `obj`, with each value being an object with `key` and `value` properties.
2. **Immutable.js Set**: This test case uses Immutable.js's `Map` data structure, which is similar to JavaScript objects but immutable by default. The script creates a new `Map` instance and adds key-value pairs using the `set` method.
3. **Native Map**: This test case uses the native JavaScript `Map` constructor to create a new map and add key-value pairs using the `set` method.

**Comparison**

The benchmark compares the performance of each approach across multiple executions per second for Firefox 121 on Desktop (Windows).

**Pros and Cons of Each Approach:**

1. **Object Spread**:
	* Pros: Simple, concise syntax, and fast updates.
	* Cons: May lead to slower overall performance due to repeated object creation.
2. **Immutable.js Set**:
	* Pros: Immutable data structure provides predictable behavior and thread safety.
	* Cons: Additional overhead due to the use of a separate library and immutable data structure.
3. **Native Map**:
	* Pros: Native implementation with built-in optimization, suitable for large datasets.
	* Cons: May require additional memory allocation and garbage collection.

**Libraries and Special Features**

1. **Immutable.js**: A JavaScript library that provides an immutable data structure (Map) to ensure predictable behavior and thread safety.
2. **Immutability-helper**: A utility library used by Immutable.js to simplify the creation of immutable objects, including Maps.
3. **... (object spread)**: A built-in JavaScript feature using the `...` operator to create a new object that includes all properties from an existing object.

**Other Alternatives**

1. **JavaScript Object Assignment**: Another approach for updating an object by assigning a new value to a property, which is not included in this benchmark.
2. **Immutable.js Collection**: Immutable.js provides other data structures like Lists and Sets, which might be used as alternatives depending on the specific use case.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

object spread