getting difference object from two objects using es6

Question

Im trying to figure out whats the best way to get an intersection object between two objects using es6. by this i mean something like:

a = {a:'a',b:'b',c:'c', d:'d'};
b = {a:'a',b: '1', c:'c', d:'2', f'!!!'}
// result I want:
c = getDifference(a,b)
//c is now: {b:'1', d:'2'}

Is there a short way to do this using es6, or do I need to iterate over the a object using for(in) with Object.keys() and compare, assigning intersections to c?

(a,b) => {
    const c = {};
    for(const _key in Object.keys(a)){
       if(b[_key] && b[_key] !== a[_key]){
           c[_key] = b[_key];
       }
    }
    return c;
}

I know loadash/underscore has these kinds of helper functions... but trying to see if es6 has any new short syntax for this, and if not whats the shortest way to do this using vanilla js.

Common misconception debunked - ES6 **is** vanilla JavaScript. — Jack Bashford, Aug 27 '19 at 07:32
yes... I know... I say Es6 to emphasize that im talking about es6 and above since both es6 & es7 has a lot of new features maybe im missing a short way to do this... — Tomas Katz, Aug 27 '19 at 07:35
Shouldn't `c` have also `f` key? It's unclear what you mean by "difference". Do you need to get differences of a against b and vice-versa or just one against the other? Also, how would you handle nested objects?.. — briosheje, Aug 27 '19 at 07:37
ammm... no I should of probably used the word -intersection- instead of -difference- I'll edit this — Tomas Katz, Aug 27 '19 at 07:38

Nick Parsons · Accepted Answer · 2022-12-20T06:10:13.523

8

You can get the entries of object b using Object.entries() and then filter out the key-value pairs which are the same as those in a using .filter(), then, you can rebuild your object using Object.fromEntries() like so:

const a = {a:'a',b:'b',c:'c', d:'d'};
const b = {a:'a',b: '1', c:'c', d:'2', f:'!!!'}

const getDifference = (a, b) => 
  Object.fromEntries(Object.entries(b).filter(([key, val]) => key in a && a[key] !== val));


// result I want:
const c = getDifference(a,b); // peforms b-a
console.log(c); // {b:'1', d:'2'}

If you can't support Object.fromEntries(), then you can use .reduce() instead to build the object for you:

const a = {a:'a',b:'b',c:'c', d:'d'};
const b = {a:'a',b: '1', c:'c', d:'2', f:'!!!'}

const getDifference = (a, b) => 
  Object.entries(b).filter(([key, val]) => a[key] !== val && key in a).reduce((a, [key, v]) => ({...a, [key]: v}), {});


// result I want:
const c = getDifference(a,b); // peforms b-a
console.log(c); // {b:'1', d:'2'}

edited Dec 20 '22 at 06:10

answered Aug 27 '19 at 07:38

Nick Parsons

45,728
6
46
64

1

second solution works out of the box... and you provided future solution... nice – Tomas Katz Aug 27 '19 at 08:41
Doesn't work with nested objects. – Ariakas Nov 01 '22 at 09:50
@Ariakas You can modify the answer above to use recursion to make it work with deeply nested objects (that was out of scope for this question, so not included in my answer). See this question for details: [Generic deep diff between two objects](https://stackoverflow.com/q/8572826) – Nick Parsons Nov 01 '22 at 09:59

Jack Bashford · Answer 2 · 2019-08-27T08:33:20.517

6

Use reduce for more concise code, but your approach was the clearest:

const getDifference = (a, b) => Object.entries(a).reduce((ac, [k, v]) => b[k] && b[k] !== v ? (ac[k] = b[k], ac) : ac, {});

We use Object.entries to avoid getting the value if we used Object.keys - it's just easier. Since b[k] may not exist, we use the short-circuit logical AND && operator - so if a key from a doesn't exist in b, it's not added to the result object. Then we check if the two values are equal - if they are, then nothing needs to be added, but if they're not, we add the key and value from b to the result object. In both cases, we return the result object.

edited Aug 27 '19 at 08:33

answered Aug 27 '19 at 07:43

Jack Bashford

43,180
11
50
79

Upvoting since you're the only one that actually mentioned that your solution has no benefits other than being more concise than the original one (neither more efficient, nor actually much conceptually different). – briosheje Aug 27 '19 at 07:44
Thanks @briosheje, always good to know I'm getting stuff right! – Jack Bashford Aug 27 '19 at 07:45
Can you explain your code a bit? I can't get it :/ Looks like a nice approach – weegee Aug 27 '19 at 07:51
1

Done @weegee, how's that? – Jack Bashford Aug 27 '19 at 08:03
Just Perfect. Thanks a lot – weegee Aug 27 '19 at 08:04
1

No worries @weegee, always glad to help. – Jack Bashford Aug 27 '19 at 08:06
@JackBashford Did you try that code? It returns `{a: "a", b: "b", c: "c", d: "d"}`, Which not match with OP's expected outcome – Neel Rathod Aug 27 '19 at 08:27
My bad @NeelRathod, fixed now. – Jack Bashford Aug 27 '19 at 08:33

Neel Rathod · Answer 3 · 2019-08-27T08:18:02.813

You can achieve this in a single short with Object.keys();

const mainObj = {
  a: 'a', b: 'b', c: 'c', d: 'd',
};
const comapareObj = {
  a: 'a', b: '1', c: 'c', d: '2', f: '!!!',
};

const findVariantsElement = (main, compareWith) => {
  const result = {};
  Object.keys(main).forEach((r) => {
    const element = main[r];
    if (compareWith[r]) {
      if (element !== compareWith[r]) {
        result[r] = compareWith[r];
      }
    }
  });
  return result;
};

const c = findVariantsElement(mainObj, comapareObj);
console.log(c);

You can use .map() also for the same

const mainObj = {
  a: 'a', b: 'b', c: 'c', d: 'd',
};
const comapareObj = {
  a: 'a', b: '1', c: 'c', d: '2', f: '!!!',
};

const findVariantsElement = (main, compareWith) => {
  const result = {};
  Object.keys(main).map((r) => {
    const element = main[r];
    if (compareWith[r]) {
      if (element !== compareWith[r]) {
        result[r] = compareWith[r];
      }
    }
  });
  return result;
};

const c = findVariantsElement(mainObj, comapareObj);
console.log(c);

getting difference object from two objects using es6

3 Answers3

Linked