DEV Community

Cover image for Make your life easier with Set Compositions
Klaus Kazlauskas
Klaus Kazlauskas

Posted on

Make your life easier with Set Compositions

Finally! When Set was introduced in the past it already made our lives better. We were able to easily generate unique lists, but also have better performance on finding and setting items on those lists.

That was great, but we were still missing several things that other languages had. And this is true, because we were. With the new composition methods added to Set in 2024, we will finally be able to do union, intersection, difference, and more with simple calls.

Without any further ado, lets jump on it.

Difference

Returns a new Set containing elements that exist in the first Set but not in the second.

A Venn diagram with circles A and B, and they are overlapping. The difference is the part of the A circle that is not overlapping the B circle.

Example: You want to see which users visited the site in this week that didn't visit last month.

How to use it?

const thisWeekUsers = new Set([1, 2, 3, 4]);
const lastMonthUsers = new Set([3, 4, 5, 6]);

const newUsers = thisWeekUsers.difference(lastMonthUsers);

console.log(newUsers); // Set(2) { 1, 2 }
Enter fullscreen mode Exit fullscreen mode

How we would do that in the past?

const thisWeekUsers = [1, 2, 3, 4];
const lastMonthUsers = [3, 4, 5, 6];

let newUsers = thisWeekUsers.filter(x => !lastMonthUsers.includes(x));

console.log(newUsers); // (2) [1,2]
Enter fullscreen mode Exit fullscreen mode

Learn more at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/difference


Intersection

Returns a new Set with only the values that are present in both Set.

A Venn diagram with circles A and B, and they are overlapping. The intersection is the part overlapping part of circles A and B.

Example: You are adding an e-books bundle to the cart, but you already had some of those books there.

How to use it?

const booksBundle = new Set([1, 2, 3, 4]);
const cart = new Set([3, 4, 5, 6]);

const booksToAdd = booksBundle.intersection(cart);

console.log(booksToAdd); // Set(2) { 3, 4 }
Enter fullscreen mode Exit fullscreen mode

How we would do that in the past?

const booksBundle = [1, 2, 3, 4];
const cart = [3, 4, 5, 6];

const booksToAdd = booksBundle.filter(book => cart.includes(book));

console.log(booksToAdd); // (2) [3, 4]
Enter fullscreen mode Exit fullscreen mode

Learn more at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection


Symmetric Difference

Returns a new Set with the values that do not repeat in neither groups.

A Venn diagram with circles A and B, and they are overlapping. The symmetric difference is the part where circles A and B are not overlapping.

Example: Checking overstocked items between stores to check which items can be exchanged.

How to use it?

const firstStore = new Set([1, 2, 3, 4]);
const secondStore = new Set([3, 4, 5, 6]);

const overstockedItems = firstStore.symmetricDifference(secondStore);

console.log(overstockedItems); // Set(4) { 1, 2, 5, 6 }
Enter fullscreen mode Exit fullscreen mode

How we would do that in the past?

const firstStore = [1, 2, 3, 4];
const secondStore = [3, 4, 5, 6];

const allItems = [firstStore, secondStore].flat();
const overstockedItems = allItems.filter(item => {
  return !firstStore.includes(item) || !secondStore.includes(item);
});

console.log(overstockedItems); // (4) [1, 2, 5, 6]
Enter fullscreen mode Exit fullscreen mode

Learn more at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/symmetricDifference


Union

Returns a new Set with the values from both groups but without repeating any values.

A Venn diagram with circles A and B, and they are overlapping. The union is all the content from circles A and B. This means the parts that are and aren't overlapping.

Example: You and your friend want to merge playlists, but some music are the same.

How to use it?

const yourPlaylist = new Set([1, 2, 3, 4]);
const friendPlaylist = new Set([3, 4, 5, 6]);

const mergedPlaylist = yourPlaylist.union(friendPlaylist);

console.log(mergedPlaylist); // Set(6) { 1, 2, 3, 4, 5, 6 }
Enter fullscreen mode Exit fullscreen mode

How we would do that in the past?

const yourPlaylist = [1, 2, 3, 4];
const friendPlaylist = [3, 4, 5, 6];

const mergedPlaylist = new Set([yourPlaylist, friendPlaylist].flat());

console.log(mergedPlaylist); // (6) [1, 2, 3, 4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

Learn more at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/union


Is Disjoint From?

It returns a Boolean. It is true if both Set have no values in common, and false if they have at least one value in common.

A Venn diagram with circles A and B, and they are not overlapping. This means they are disjointed.

Example: See there are products that are part of other groups.

How to use it?

const electronics = new Set([1, 2, 3, 4]);
const furniture = new Set([3, 4, 5, 6]);
const groceries = new Set(['apple']);

console.log(electronics.isDisjointFrom(furniture)); // false
console.log(electronics.isDisjointFrom(groceries)); // true
Enter fullscreen mode Exit fullscreen mode

How we would do that in the past?

const electronics = [1, 2, 3, 4];
const furniture = [3, 4, 5, 6];
const groceries = ['apple'];

function isDisjoint(array1, array2) {
  return array1.every(item => !array2.includes(item));
}

console.log(isDisjoint(electronics, furniture)); // false
console.log(isDisjoint(electronics, groceries)); // true
Enter fullscreen mode Exit fullscreen mode

Learn more at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom


Is Superset/Subset Of?

These two functions are very similar. They both return a Boolean value, and are direct opposites. Superset will return true if the Set is a superset of another, and Subset will return true if the Set is a subset of another.

I'm putting those functions together because knowing the answer to one of them is enough to know the other. A Set can only be a superset of a subset Set.

A Venn diagram with circles A and B, where B is smaller than A and it is inside of it. The picturing is representing that B is a subset of A, and A is a superset of B.

Example: Understand if users are part of a company group.

How to use it?

const itDepartment = new Set([1, 2, 3, 4]);
const genZFromToronto = new Set([3, 4]);

console.log(itDepartment.isSupersetOf(genZFromToronto)); // true
console.log(genZFromToronto.isSubsetOf(itDepartment)); // true
Enter fullscreen mode Exit fullscreen mode

How we would do that in the past?

const itDepartment = [1, 2, 3, 4];
const genZFromToronto = [3, 4];

console.log(genZFromToronto.every(item => itDepartment.includes(item))); // true
Enter fullscreen mode Exit fullscreen mode

Learn more at:


Now you are all Set I'm not sorry to use it in your project!

Let me know if you are also excited about it, another feature, or want to see something else covered. Until next time o/

Top comments (0)