How to track object changes in Javascript

Recently, I needed a good way to find out exactly what had changed between two objects in an Angular application. Soooo, I wrote one.

See the Pen BKJYRN by Kyle (@kalwyn) on CodePen.

As an example scenario, let’s say we are editing a post. We load our page and pull down our post from the server. We make an initial copy of the and append another copy to our view. A user will edit a couple of values, e.g. the title and the description. At this point, I only want to send to the server the updated values rather than the entire post object, so I’d like to find the difference between the view-bound object and our original copy.

All we need to do is run the two objects through the below function and we will be returned an object consisting only of differing key-value pairs! It works for deeply nested objects as well, something I found lacking in most Stack Overflow posts. Our only dependency is the lodash library. Lodash is full of useful javascript helpers that make day to day programming much simpler. Why reinvent the wheel when you have open source?