Introduction

The “delta” between two JavaScript objects usually means the set of fields that were added, removed, or changed between an old version and a new version. The exact shape of that delta is a design choice, but the essential job is to compare keys and values recursively in a predictable way.

Before writing code, decide what you want the delta to represent. Some systems want only changed values. Others want explicit markers for deletions and nested structural changes.

A Simple Recursive Delta Function

Here is one way to return only the changed parts of next relative to prev, while marking removals as null.

1function diffObjects(prev, next) {
2  const delta = {};
3  const keys = new Set([...Object.keys(prev || {}), ...Object.keys(next || {})]);
4
5  for (const key of keys) {
6    const a = prev?.[key];
7    const b = next?.[key];
8
9    if (!(key in next)) {
10      delta[key] = null;
11      continue;
12    }
13
14    if (!(key in prev)) {
15      delta[key] = b;
16      continue;
17    }
18
19    if (isPlainObject(a) && isPlainObject(b)) {
20      const child = diffObjects(a, b);
21      if (Object.keys(child).length > 0) {
22        delta[key] = child;
23      }
24    } else if (!Object.is(a, b)) {
25      delta[key] = b;
26    }
27  }
28
29  return delta;
30}
31
32function isPlainObject(value) {
33  return value !== null && typeof value === 'object' && !Array.isArray(value);
34}

This is not the only valid delta format, but it is practical and easy to inspect.

Example Usage

1const before = {
2  name: 'Alice',
3  age: 30,
4  address: { city: 'Toronto', zip: 'M1' },
5};
6
7const after = {
8  name: 'Alice',
9  age: 31,
10  address: { city: 'Ottawa', zip: 'M1' },
11  active: true,
12};
13
14console.log(diffObjects(before, after));

Output:

1{
2  age: 31,
3  address: { city: 'Ottawa' },
4  active: true
5}

That tells you exactly what changed without repeating the unchanged fields.

Arrays Need a Policy Decision

Arrays are where many diff functions become ambiguous. Do you want to:

• compare by index
• treat any difference as full replacement
• detect inserts and deletes
• compare objects by an ID field

The simple implementation above treats arrays as replace-on-change values. That is often acceptable unless array patch semantics matter deeply.

Choose Delta Shape for the Consumer

The best delta structure depends on how it will be used:

• UI change display may want readable nested diffs
• patch APIs may want JSON Patch or another standard format
• audit logs may want old and new values together

So “get the delta” is not one universal function. It is a contract between the diff producer and the diff consumer.

Avoid Shallow Comparison When Nested Data Matters

A shallow comparison only checks top-level references. That fails when two objects look different only inside nested structures.

If nested data matters, use a recursive comparison or a library designed for deep diffs.

Common Pitfalls

• Writing a shallow diff when the objects contain meaningful nested structures.
• Ignoring deletions and then wondering why the consumer cannot remove fields.
• Treating arrays like plain objects without defining the comparison policy first.
• Returning the entire new object as the “delta,” which defeats the purpose of change extraction.
• Forgetting that the right delta shape depends on how the result will be stored or applied.

Summary

• A JavaScript object delta is the set of fields that changed between two object states.
• The exact output format is a design decision, not a single built-in standard.
• Recursive comparison is usually necessary for nested objects.
• Arrays need an explicit diff policy because there is no universal correct answer.
• Start by defining what the consumer of the delta actually needs.