Benchmark: Spread operator vs Immutable.js performance for common use cases

HTML Preparation code:

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.js"
  crossorigin="anonymous"></script>

Script Preparation code:

var obj = { b:"hello", c: true, d:7 };
var arr = ['a', 'b', 'c'];
var map = Immutable.Map(obj);
var list = Immutable.List(arr);

Tests:

Object set - spread
var newVal = { ...obj, b: 'world' };
Object set - immutable
var newVal = map.set('b', 'world');
Array push - spread
var newVal = [ ...arr, 'd' ];
Array push - immutable
var newVal = list.push('d');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object set - spread
Object set - immutable
Array push - spread
Array push - immutable

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Android 14; Mobile; rv:136.0) Gecko/136.0 Firefox/136.0

Browser/OS: Firefox Mobile 136 on Android

View result in a separate tab

Test name	Executions per second
Object set - spread	12526865.0 Ops/sec
Object set - immutable	4947420.0 Ops/sec
Array push - spread	15413141.0 Ops/sec
Array push - immutable	3575624.8 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 benchmark and explain what is being tested, compared, and its pros and cons.

**Benchmark Overview**

The benchmark measures the performance of two approaches: using the spread operator (`...`) to create a new object or array, and using Immutable.js, a library that provides immutable data structures in JavaScript. The benchmark compares the performance of these two approaches for common use cases:

* Object set (assigning a new value to an existing object)
* Array push (appending a new element to an existing array)

**Options Compared**

The two options being compared are:

1. **Spread operator (`...`)**: This approach uses the spread operator to create a new object or array by copying the properties of an existing object or array.
2. **Immutable.js**: This is a library that provides immutable data structures, which means that once created, they cannot be modified directly. Instead, you need to use methods like `set()`, `push()`, etc., to modify them.

**Pros and Cons**

* **Spread operator (`...`)**:
	+ Pros: Simple to use, fast, and efficient.
	+ Cons: May not work well with complex data structures or deeply nested objects.
	+ Caveat: It creates a new object or array reference each time it's used, which can lead to performance issues if not optimized properly.
* **Immutable.js**:
	+ Pros: Provides a predictable and consistent way of modifying data structures, which can help catch bugs early on. Immutable.js also provides methods that are designed to be efficient and performant.
	+ Cons: Can be slower than the spread operator in some cases, especially for simple use cases.

**Library and Its Purpose**

* **Immutable.js**: This library provides a set of immutable data structures (e.g., `Map`, `List`) and utility functions (e.g., `set()`, `push()`) that allow you to work with data in a predictable and consistent way. Immutable.js is designed to help developers write more robust and maintainable code.

**Special JavaScript Feature or Syntax**

There is no special JavaScript feature or syntax being used in this benchmark, except for the use of ES6 spread operator (`...`).

**Other Alternatives**

If you're looking for alternative approaches, you could consider using:

* **Object.assign()**: This method can be used to merge two objects. However, it may not work well with arrays.
* **Array.prototype.slice() + Array.prototype.concat()**: You can use `slice()` to create a shallow copy of an array and then concatenate the new element using `concat()`. However, this approach is slower than the spread operator.

Keep in mind that the best approach will depend on your specific use case and requirements. If you need predictable performance and are willing to learn a new library, Immutable.js might be a good choice. Otherwise, the spread operator could be sufficient for most use cases.

Related benchmarks:

Spread operator vs Immutable.js performance for common use cases (version: 0)

Comparing performance of: Object set - spread vs Object set - immutable vs Array push - spread vs Array push - immutable

Created: 4 years ago by: Guest

Jump to the latest result

Object set - spread

Object set - immutable

Array push - spread

Array push - immutable

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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