Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
object spread vs immutable-js set vs native Map copy
(version: 0)
Comparing performance of:
object spread vs immutable-js vs native Map
Created:
4 years ago
by:
Guest
Go to the latest result
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 = new Map(obj); obj.set(key, {key, value}) }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
object spread
immutable-js
native Map
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=496748" width="100%" height="500px"></iframe>
immutable-js
23K/s
object spread
11K/s
native Map
3K/s
View exact numbers
Test name
Executions per second
✓
immutable-js
23,490 Ops/sec
object spread
11,239 Ops/sec
native Map
3,176 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year 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: 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. 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.
Related benchmarks
object spread vs immutable-js set vs native Map
Spread operator vs Immutable.js performance for common use cases
object spread vs immutable-js set vs native Map vs object
Comments
Confirm delete:
Do you really want to delete benchmark?