<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>
let obj = {};
for(i=0;i<100;i++){
const key = 'key'+i
const value = 'value'+i
obj = {obj, [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})
}
let obj = new Map();
for(i=0;i<100;i++){
const key = 'key'+i
const value = 'value'+i
obj.set(key, {key, value})
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
object spread | |
immutable-js | |
native Map |
Test name | Executions per second |
---|---|
object spread | 7021.6 Ops/sec |
immutable-js | 16279.6 Ops/sec |
native Map | 53879.7 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks!
The provided JSON represents a benchmark that tests three approaches for creating and updating objects:
{...obj, [key]: {key, value}}
) to create a new object with updated key-value pairs.Immutable.Map
class from the Immutable.js library to create an immutable map and update its values using the set()
method.Map
constructor (in modern browsers) or a polyfill (for older browsers) to create a mutable map and update its values using the set()
method.Options Compared:
Pros and Cons:
Library and Syntax:
The benchmark uses the Immutable.js library to provide an immutable data structure. The Immutable.Map
class is used to create an immutable map, which can be updated using the set()
method.
There are no special JavaScript features or syntaxes used in this benchmark, other than the use of modern ES6 features (e.g., spread operator).
Alternatives:
Other alternatives for creating and updating objects could include:
However, it's worth noting that the Object Spread approach is already widely used and supported in modern browsers, making it a good choice for many use cases.