Doing a "Diff" on an Associative Array in javascript / jQuery?

Question

If I have two associative arrays, what would be the most efficient way of doing a diff against their values?

For example, given:

  array1 = {
    foreground: 'red',
    shape: 'circle',
    background: 'yellow'
  };

  array2 = {
    foreground: 'red',
    shape: 'square',
    angle: '90',
    background: 'yellow'
  };

How would I check one against the other, such that the items missing or additional are the resulting array. In this case, if I wanted to compare array1 within array2, it would return:

array3 = {shape: 'circle'}

Whilst if I compared array2 within array1, it would return:

array3 = {shape: 'square', angle: '90'}

Thanks in advance for your help!

Answer 1

Try this:

function diff(obj1, obj2) {
    var result = {};
    $.each(obj1, function (key, value) {
        if (!obj2.hasOwnProperty(key) || obj2[key] !== obj1[key]) {
            result[key] = value;
        }
    });

    return result;
}