Differential Synchronization in JavaScript

Differential synchronization is a technique used to efficiently update a data structure (like a UI) by only applying the changes (the "differential") between two states, rather than sending the entire new state. This is particularly useful in scenarios with frequent updates and limited bandwidth, such as real-time collaborative applications or game development. Your task is to implement a function that generates a differential representation of changes between two objects.

Problem Description

You are required to implement a function generateDifferential(oldState, newState) that takes two JavaScript objects, oldState and newState, as input and returns a differential object representing the changes. The differential object should be structured as follows:

• added: An object containing key-value pairs of properties that were added in newState but not present in oldState.
• removed: An object containing key-value pairs of properties that were removed from oldState but not present in newState.
• updated: An object containing key-value pairs of properties that were modified. The keys are the property names, and the values are objects with oldValue and newValue properties representing the values in oldState and newState respectively.

The function should handle nested objects recursively. If a property is an object in both oldState and newState, the function should recursively generate a differential for that nested object.

Key Requirements:

• The function must handle all data types (strings, numbers, booleans, objects, arrays, null, undefined).
• The function must be recursive to handle nested objects.
• The function should not modify the original oldState or newState objects.
• The function should return an empty object if there are no differences.

Expected Behavior:

The function should accurately identify added, removed, and updated properties, including those within nested objects. The differential object should provide a clear representation of the changes.

Edge Cases to Consider:

• oldState or newState being null or undefined. Treat them as empty objects.
• Properties with the same name but different types (e.g., oldState.prop = 1 and newState.prop = "1"). These should be considered updates.
• Arrays: Treat arrays as objects. Changes in array elements should be reflected in the updated section. Adding or removing elements should be reflected in added or removed.
• Deeply nested objects.

Examples

Example 1:

Input:
oldState = { a: 1, b: 2, c: { d: 3 } }
newState = { a: 1, b: 5, c: { d: 3, e: 4 }, f: 6 }
Output:
{
  added: { f: 6 },
  removed: {},
  updated: { b: { oldValue: 2, newValue: 5 }, c: { oldValue: { d: 3 }, newValue: { d: 3, e: 4 } } }
}
Explanation: 'b' was updated, 'c' was updated (nested object), and 'f' was added.

Example 2:

Input:
oldState = { a: 1, b: 2 }
newState = { a: 1, b: 2 }
Output:
{}
Explanation: No changes were made.

Example 3:

Input:
oldState = { a: 1, b: { c: 2 } }
newState = { a: 1, b: { c: 3, d: 4 } }
Output:
{
  added: { d: 4 },
  removed: {},
  updated: { b: { oldValue: { c: 2 }, newValue: { c: 3, d: 4 } } }
}
Explanation: 'd' was added to the nested object 'b', and 'c' within 'b' was updated.

Constraints

• The input objects oldState and newState can have a maximum depth of 10 levels of nesting.
• The number of properties in each object is limited to 100.
• The function should execute within 100ms for typical input objects.
• All property values are primitive types or objects. Arrays are treated as objects.

Notes

• Consider using recursion to handle nested objects effectively.
• Pay close attention to how you identify added, removed, and updated properties.
• The order of properties within the added, removed, and updated objects is not significant.
• Think about how to handle different data types gracefully.
• A deep comparison function might be helpful for comparing nested objects. However, be mindful of performance implications. Consider a shallow comparison for primitive types.