liveBook · Manning

Remove operation

As explained in Build a Frontend Web Framework (From Scratch)

A remove operation represents deleting an item from the working array because it is absent from the target array at the relevant position.

A remove operation records deleting an item from the working array because it does not appear in the target array. Its index identifies where the item was removed. section 7.6.1

Implement removal as a small sequence of responsibilities:

  • Check whether the current working-array item appears anywhere in the new array, using the configured equality function. section 7.6.4
  • Create { op: 'remove', index, item }, then splice the item from both the working array and its original-index tracking array. section 7.6.4
  • Keep the iteration index unchanged after removal, because the next working-array item shifts into the same position. section 7.6.2
  • Remove every remaining working-array item after the new array has been fully processed. section 7.6.2

Removing items while diffing

For oldArray = [X, A, A, B, C] and newArray = [C, K, A, B], remove X at index 0 because it is absent from the target. After later moves and additions, remove the remaining extra A. The resulting remove records preserve each deletion's current index and item. section 7.6.3

[
  {op: 'remove', index: 0, item: 'A'}
  {op: 'move', originalIndex: 2, from: 1, index: 0, item: 'C'}
  {op: 'noop', index: 1, originalIndex: 1, item: 'B'}
  {op: 'add', index: 2, item: 'D'}
]

Inspect a complete operation sequence containing a removal alongside move, noop, and add operations. section 7.6.1

How Build a Frontend Web Framework (From Scratch) covers it

How deep it goes
Descends through detection, operation construction, array mutation, index control, and trailing cleanup.
Examples
Uses [X, A, A, B, C] versus [C, K, A, B] and operation listings that combine removal with movement and insertion.
What it assumes
Assumes familiarity with JavaScript arrays, indexing, equality checks, iteration, and splice-based mutation.
What you can do after
Build the removal branch of a JavaScript array-diff sequence and preserve correct working and original indices.
How it connects
Connects array diffing with reconciliation, virtual trees, add operations, move operations, and noop operations.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.