Union of array of objects in JavaScript

Question

I'm trying to do union of different arrays:

const info1 = {id: 1}
const info2 = {id: 2}
const info3 = {id: 3}

const array1 = [info1, info2]
const array2 = [info1, info3]
const array3 = [info2, info3]

const union = [...new Set([...array1, ...array2, ...array3])]

console.log(union)

It's possible in my code that some or all array1, array2, array3 can be null, this is not shown in the code above.

However when one or more of them are null I get the error for example if array1 was assigned to null: array1 is not iterable.

How can I prevent getting this error?

...by not making them null? Or by checking if they're null before adding to the Set? — Jared Smith
– Jared Smith, Commented Jan 28, 2021 at 14:58
Well, yeah, if you want arrays you can use arrays and have it easy, but if you also want null you need to deal with it somehow. — Ken Wayne VanderLinde
– Ken Wayne VanderLinde, Commented Jan 28, 2021 at 15:04

Aron · Accepted Answer · 2021-01-28 15:04:14Z

4

You can use the nullish coalescing operator to fall back to an empty array if the 'array' is actually null.

const union = [
  ...new Set([...(array1 ?? []), ...(array2 ?? []), ...(array3 ?? [])]),
];

answered Jan 28, 2021 at 15:04

Aron

9,3187 gold badges37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

0stone0 Over a year ago

Please note that this operator isn't supported on every browser

Orelsanpls · Accepted Answer · 2021-01-28 15:17:22Z

2

You can create a function that will perform the extra null check for you.

const info1 = {
  id: 1
};

const info2 = {
  id: 2
};

const info3 = {
  id: 3
};

const array1 = [info1, info2];
const array2 = [info1, info3];
const array3 = [info2, info3];
const array4 = null;


// the spread operator here allow us to target every argument
// of the function
function union(...arrays) {
  // the filter removes the *nullish* values
  return Array.from(new Set(arrays.filter(x => !!x).flat()));
}

console.log(union(array1, array2, array3, array4))

/!\ Attention

One more thing, when you use a Set to remove the duplicates. It removes the duplicates because they are the same object. If you create a new object, containing the same id, it will not be detected as the same value, because you compare reference and not the underlying values.

const info1 = {
  id: 1
};

const info2 = {
  id: 2
};

const info3 = {
  id: 3
};

const array1 = [info1, info2];
const array2 = [info1, info3];

const array3 = [info2, {
  id: 3
}];

const array4 = null;


function union(...arrays) {
  return Array.from(new Set(arrays.filter(x => !!x).flat()));
}

console.log(union(array1, array2, array3, array4))

edited Jan 28, 2021 at 15:17

answered Jan 28, 2021 at 15:10

Orelsanpls

23.7k7 gold badges46 silver badges74 bronze badges

2 Comments

VLAZ Over a year ago

arrays.flat().filter(x => !!x)) -> shouldn't this be arrays.filter(x => !!x)).flat()? Seems valid to want to know of objects that are null but ignore arrays that are null.

Orelsanpls Over a year ago

@VLAZ yes true!

Hafiz Muhammad Bilal · Accepted Answer · 2021-01-28 15:08:19Z

1

Modify your code as if an array gives you a null value then replace null with empty array to work properly as:

const info1 = {id: 1}
const info2 = {id: 2}
const info3 = {id: 3}

const array1 = [info1, info2]
const array2 = [info1, info3]
const array3 = null
const isNotNull=(array)=> array ? array : []

const union = [...new Set([...isNotNull(array1), ...isNotNull(array2), ...isNotNull(array3)])]

console.log(union)

function isNotNull checks an array if it equals null then it return an empty array

answered Jan 28, 2021 at 15:08

Hafiz Muhammad Bilal

3133 silver badges18 bronze badges

Comments

Nina Scholz · Accepted Answer · 2021-01-28 15:31:39Z

1

The most simple method is to use a Array#flatMap approach with a default array for virable with either an array or null.

unique = Array.from(new Set([array1, array2, array3].flatMap(v => v || [])));

answered Jan 28, 2021 at 15:31

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

0stone0 · Accepted Answer · 2021-01-28 15:15:33Z

0

Create a function that uses the rest operator to loop through each array;

Check if for null, otherwise, add to the set

const info1 = {id: 1}
const info2 = {id: 2}
const info3 = {id: 3}

const array1 = [info1, info2]
const array2 = [info1, info3]
const array3 = null;

function createSet(...all) {

    // Tmp hold
    let a = [];

    // For each given array
    for (var i = 0; i < all.length; i++) {

        // If it's not null, add
        if (all[i]) {
            a.push(...all[i]);
        }
    }

    // Create and return set
    return [...new Set(a)];
}


console.log(createSet(array1, array2, array3));

answered Jan 28, 2021 at 15:15

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

Collectives™ on Stack Overflow

Union of array of objects in JavaScript

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related