JSFiddle - React, Tailwind, and code Playground
JavaScript
var deepDiffMapper = function() {
return {
VALUE_CREATED: 'created',
VALUE_UPDATED: 'updated',
VALUE_DELETED: 'deleted',
VALUE_UNCHANGED: 'unchanged',
map: function(obj1, obj2) {
if (this.isFunction(obj1) || this.isFunction(obj2)) {
throw 'Invalid argument. Function given, object expected.';
}
if (this.isValue(obj1) || this.isValue(obj2)) {
return {type: this.compareValues(obj1, obj2), data: obj1};
}
var diff = {};
for (var key in obj1) {
if (this.isFunction(obj1[key])) {
continue;
}
var value2 = undefined;
if ('undefined' != typeof(obj2[key])) {
value2 = obj2[key];
}
diff[key] = this.map(obj1[key], value2);
}
for (var key in obj2) {
if (this.isFunction(obj2[key]) || ('undefined' != typeof(diff[key]))) {
continue;
}
diff[key] = this.map(undefined, obj2[key]);
}
return diff;
},
compareValues: function(value1, value2) {
if (value1 === value2) {
return this.VALUE_UNCHANGED;
}
if ('undefined' == typeof(value1)) {
return this.VALUE_CREATED;
}
if ('undefined' == typeof(value2)) {
return this.VALUE_DELETED;
}
return this.VALUE_UPDATED;
},
isFunction: function(obj) {
return 'function' == typeof(obj);
},
isValue: function(obj) {
return ('object' != typeof(obj)) && ('array' != typeof(obj));
}
}
}();
var result = deepDiffMapper.map({
a:'i am unchanged',
...