Benchmark: Large nested Arrays: Immutable.js vs spread operator

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

function initArray(W = 1000, H = 1000, C = 100) {
  let array = Array(H);

  for (let y = 0; y < H; y++) {
    array[y] = Array(W);
    for (let x = 0; x < W; x++) {
      array[y][x] = Array(C);
      for (let z = 0; z < C; z++) {
        array[y][x][z] = _.random(0, 255);
      }
    }
  }
  return array;
}

function createRandomPoint(w, h, c) {
  return {
    x: _.random(0, w - 1),
    y: _.random(0, h - 1),
    z: _.random(0, c - 1),
    value: _.random(0, 255)
  };
};

function updateWithSpread(prevImg) {
  const { x, y, z, value } = createRandomPoint(W, H, C);
  const newChannel = [
    ...prevImg[y][x].slice(0, z),
    value,
    ...prevImg[y][x].slice(z + 1)
  ];
  const newCol = [
    ...prevImg[y].slice(0, x),
    newChannel,
    ...prevImg[y].slice(x + 1)
  ];
  const newImg = [...prevImg.slice(0, y), newCol, ...prevImg.slice(y + 1)];
  return newImg;
};

var W = 500, H = 500, C = 50;

var bigArray = initArray(W, H, C);
var bigImmutable = Immutable.fromJS(bigArray);

Tests:

Spread operator
bigArray = updateWithSpread(bigArray);
Immutable.js deep List
const {x,y,z,value} = createRandomPoint(W, H, C); bigImmutable = bigImmutable.setIn([y,x,z], value);
Mutating the array in place
const {x,y,z,value} = createRandomPoint(W, H, C); bigArray[y][x][z] = value;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator
Immutable.js deep List
Mutating the array in place

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of three different approaches for updating a large, nested array in JavaScript:

1. **Immutable.js deep List**: This approach uses the Immutable.js library to create an immutable data structure, which means that the array cannot be modified directly.
2. **Mutating the array in place**: This approach updates the original array directly by assigning a new value to a specific position.
3. **Spread operator**: This approach uses the spread operator (`...`) to create a new copy of the affected parts of the array, and then assigns this new value to a specific position.

**Options Compared**

The benchmark compares the performance of these three approaches:

* **Immutable.js deep List**: Using Immutable.js library for immutability.
* **Mutating the array in place**: Updating the original array directly.
* **Spread operator**: Using spread operator to create a new copy and update it.

**Pros and Cons of Each Approach**

1. **Immutable.js deep List**
	* Pros:
		+ Ensures immutability, which can lead to thread-safety and predictability in concurrent programs.
		+ Can be more efficient for certain types of operations, as Immutable.js optimizes updates internally.
	* Cons:
		+ Can have higher overhead due to the need to create a new immutable data structure.
		+ May not perform well for very large datasets, as it can lead to increased memory usage.
2. **Mutating the array in place**
	* Pros:
		+ Typically has lower overhead compared to Immutable.js, as it only updates existing values.
		+ Can be more efficient for small to medium-sized arrays.
	* Cons:
		+ Updates the original array, which can lead to unintended side effects if not handled carefully.
		+ May not ensure immutability or thread-safety in concurrent programs.
3. **Spread operator**
	* Pros:
		+ Offers a balance between performance and convenience, as it creates a new copy while still providing some level of immutability.
		+ Can be used with existing arrays, making it more flexible than Immutable.js.
	* Cons:
		+ May not perform well for very large datasets, as creating new copies can lead to increased memory usage.
		+ Requires manual handling of boundaries and indexing.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* **Performance**: Mutating the array in place is typically the fastest option. However, if you need immutability or thread-safety, Immutable.js deep List might be a better choice.
* **Data size**: For very large datasets, spreading the update using the spread operator might lead to increased memory usage and slower performance.
* **Convenience**: Spread operator offers a balance between performance and convenience. However, for more complex updates, Immutable.js deep List or mutating in place might be more suitable.

**Alternative Approaches**

Other approaches you might consider include:

1. **Using `Array.prototype.slice()`**: Creating a new copy of the affected parts using `slice()`.
2. **Using `Array.prototype.forEach()`**: Updating values using `forEach()` and modifying individual elements.
3. **Using a custom data structure**: Implementing a custom data structure, such as a linked list or a hash table, to optimize updates.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and requirements.

Related benchmarks:

Large nested Arrays: Immutable.js vs spread operator (version: 2)

Comparing performance of: Spread operator vs Immutable.js deep List vs Mutating the array in place

Created: 6 years ago by: Registered User

Jump to the latest result

Spread operator

Immutable.js deep List

Mutating the array in place

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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