Benchmark: object spread vs immutable-js set vs Map

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<10000;i++){ const key = 'key'+i const value = 'value'+i obj = {...obj, [key]: {key, value}} }
immutable-js
let obj = Immutable.Map(); for(i=0;i<10000;i++){ const key = 'key'+i const value = 'value'+i obj = obj.set(key, {key, value}) }
Map
const obj = new Map(); for(i=0;i<10000;i++){ const key = 'key'+i const value = 'value'+i 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
Map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
object spread	0.1 Ops/sec
immutable-js	217.6 Ops/sec
Map	847.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 explaining the provided JSON benchmark.

**What is tested:**

The benchmark measures the performance of three different approaches for adding elements to an object or map:

1. **Object Spread**: This approach uses the spread operator (`...`) to create a new object and then adds a key-value pair to it.
2. **Immutable-JS Set**: This approach uses the `Immutable.js` library to create a set and add elements to it.
3. **Map**: This approach uses the built-in `Map` data structure in JavaScript to add key-value pairs.

**Options compared:**

The benchmark compares the performance of these three approaches for adding 10,000 key-value pairs to an object or map.

**Pros and Cons of each approach:**

1. **Object Spread:**
	* Pros: Simple, easy to understand, and widely supported.
	* Cons: Creates a new object on each iteration, which can lead to memory overhead.
2. **Immutable-JS Set:**
	* Pros: Efficient for adding multiple elements at once, as it uses a set data structure under the hood.
	* Cons: Requires importing an external library (`Immutable.js`), and may have additional dependencies.
3. **Map:**
	* Pros: Fast and efficient for adding key-value pairs, especially when compared to object spread.
	* Cons: May require additional imports (e.g., `const Map = require('imap')`), and the data structure is not as intuitive as an object.

**Library usage:**

The benchmark uses two external libraries:

1. **Immutable.js**: A JavaScript library for working with immutable data structures. It's used to create a set and add elements to it.
2. No other libraries are required, as `Map` is a built-in data structure in modern JavaScript.

**Special JS feature or syntax:**

There are no special features or syntaxes being tested in this benchmark.

**Other alternatives:**

If you're interested in exploring alternative approaches, here are a few options:

1. **Array**: Instead of using an object or map, you could use an array to store the key-value pairs.
2. **WeakMap**: If you need to store large amounts of data and require weak references (e.g., for garbage collection purposes), `WeakMap` might be a suitable alternative.

Keep in mind that these alternatives may have different performance characteristics, memory usage, or requirements compared to the approaches tested in this benchmark.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

object spread

immutable-js

Map

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