liveBook · Manning

Add operation

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

An add operation represents inserting an item that is present in the target array but not yet present at the relevant position in the working array.

An add operation records an item that appears in the target array but cannot be found in the working array from the current index onward. It inserts that item at the target index. section 7.6.1 section 7.6.4

Build the operation in three small responsibilities:

  • Check whether the target item exists in the working array starting at the current index; treat a missing match as an addition. section 7.6.2 section 7.6.4
  • Create { op: 'add', index, item } to describe the insertion. section 7.6.1 section 7.6.4
  • Insert the item into the working array and record -1 as its original index because it was absent from the initial array. section 7.6.4

Inserting K

With oldArray = [X, A, A, B, C] and newArray = [C, K, A, B], the algorithm reaches index 1 with K as the target item. No K exists in the working array from index 1 onward, so it inserts K at index 1 and appends an add operation. 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'}
]

Browse a complete operation sequence showing an add alongside remove, move, and noop operations. section 7.6.1

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

How deep it goes
Explains detection, operation construction, array mutation, and original-index tracking, while deferring DOM patching.
Examples
Demonstrates insertion with oldArray [X, A, A, B, C] and newArray [C, K, A, B].
What it assumes
Assumes old and new arrays plus item equality; teaches insertion detection and working-array updates incrementally.
What you can do after
Build it from scratch by detecting missing items, inserting them, and emitting add records from JavaScript array-diff code.
How it connects
Connects add operations with remove operations, move operations, noop operations, array diffing, and virtual-tree reconciliation.

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.