liveBook · Manning

ArrayWithOriginalIndices

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

ArrayWithOriginalIndices is a wrapper around an array that stores each item together with its index in the original array.

ArrayWithOriginalIndices wraps a copy of an old array while moving each item’s original index alongside it. This lets an array-diff algorithm report accurate removals, additions, moves, and unchanged items. section 7.6.4

The wrapper separates four small responsibilities:

  • Uses an equalsFn callback, which is important when virtual nodes have equivalent content but different object references. section 7.6.4

Diffing an old and new order

arraysDiffSequence creates the wrapper, scans the new array from left to right, removes obsolete items, records no-ops, adds missing items, moves existing items, and removes leftovers.

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

How deep it goes
Explains the wrapper incrementally through copying, comparison, operation detection, and mutation, while deferring the completed equality function.
Examples
Uses JavaScript arrays, virtual-node comparisons, and operation records for removals, additions, no-ops, and moves.
What it assumes
Assumes basic JavaScript arrays and equality, while clarifying why object references require a custom comparison function.
What you can do after
Build a small JavaScript array-diff mechanism that emits actionable operations with current and original indices.
How it connects
Connects array diffing with reconciliation algorithms, virtual nodes, custom equality, and move operations.

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.