Run results for: Large nested Arrays: Immutable.js vs spread operator

Run details:

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

Browser: Chrome 117

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Spread operator	163514.0 Ops/sec
Immutable.js deep List	449999.7 Ops/sec
Mutating the array in place	1256127.5 Ops/sec

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;

Run results for: Large nested Arrays: Immutable.js vs spread operator

Spread operator

Immutable.js deep List

Mutating the array in place