liveBook · Manning

objectsDiff

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

objectsDiff is a book-specific JavaScript function that compares two objects and reports their added, removed, and changed properties.

objectsDiff compares the attributes of an old and new virtual node, reporting which properties were added, removed, or changed so the DOM can be patched. section 7.4

Implement the comparison in three readable passes:

  • Scan old-object keys and mark keys missing from the new object as removed. section 7.4
  • Scan new-object keys and mark keys missing from the old object as added. section 7.4
  • Scan new-object keys again and mark existing keys whose values differ as updated. section 7.4
  • Return an object with added, removed, and updated arrays; favoring two clear new-key iterations keeps the implementation readable, though one pass could be more efficient. section 7.4

Input attributes

Comparing an old input-attributes object with a new one can report min as added, max as removed, and disabled as updated when its value changes from false to true. section 7.4

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

How deep it goes
Explains the comparison algorithm and implementation, then defers optimization and verification to testing exercises.
Examples
Uses input attributes where min is added, max is removed, and disabled changes from false to true.
What you can do after
Build it from scratch as a JavaScript utility that returns added, removed, and updated property names.
How it connects
Connects object diffing with virtual DOM, reconciliation, DOM patching, attributes, and array diffing.

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.