paint-brush
Use JavaScript's New Set Composition Methods Without Polyfillsby@thangaganapathy
314 reads
314 reads

Use JavaScript's New Set Composition Methods Without Polyfills

by Thanga Ganapathy
Thanga Ganapathy HackerNoon profile picture

Thanga Ganapathy

@thangaganapathy

A passionate programmer.

April 22nd, 2024
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

There is a proposal to add methods like union and intersection to JavaScript's built-in Set class. It is currently at stage 3, but some browsers like Chrome already support it. Currently, you can safely use these methods by using polyfills. Let us explain each method by examples of how to use these functions.
featured image - Use JavaScript's New Set Composition Methods Without Polyfills
1x
Read by Dr. One voice-avatar

Listen to this story

Thanga Ganapathy HackerNoon profile picture
Thanga Ganapathy

Thanga Ganapathy

@thangaganapathy

A passionate programmer.

Learn More
LEARN MORE ABOUT @THANGAGANAPATHY'S
EXPERTISE AND PLACE ON THE INTERNET.
0-item
1-item

STORY’S CREDIBILITY

News

News

Hot off the press! This story contains factual information about a recent event.

Guide

Guide

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Welcome,


There is a proposal to add methods like union and intersection to JavaScript's built-in Set class.


It is currently at stage 3, but some browsers like Chrome already support it.


As you can see, the currently supported runtimes are very limited.


Runtime compatibility

Runtime compatibility

Polyfills

Currently, you can safely use these methods by using polyfills.


Set Composition Methods

These methods include:

  • Set.prototype.intersection(other)
  • Set.prototype.union(other)
  • Set.prototype.difference(other)
  • Set.prototype.symmetricDifference(other)
  • Set.prototype.isSubsetOf(other)
  • Set.prototype.isSupersetOf(other)
  • Set.prototype.isDisjointFrom(other)

Using without Polyfills

You can use our std library functions to achieve the same.


Let us explain each method by examples of how to use these functions.


Set.prototype.intersection()


import { intersection } from '@opentf/std';

const odds = [1, 3, 5, 7, 9];
const squares = [1, 4, 9];

// Using native method
new Set(odds).intersection(new Set(squares)); //=> Set(2) { 1, 9 }

// Using std function
intersection([odds, squares]); //=> [ 1, 9 ]


Set.prototype.union()


import { union } from '@opentf/std';

const evens = [2, 4, 6, 8];
const squares = [1, 4, 9];

// Using native method
new Set(evens).union(new Set(squares)); //=> Set(6) { 2, 4, 6, 8, 1, 9 }

// Using std function
union([evens, squares]); //=> [ 2, 4, 6, 8, 1, 9 ]


Set.prototype.difference()


import { diff } from '@opentf/std';

const odds = [1, 3, 5, 7, 9];
const squares = [1, 4, 9];

// Using native method
new Set(odds).difference(new Set(squares)); //=> Set(3) { 3, 5, 7 }

// Using std function
diff([odds, squares]); //=> [ 3, 5, 7 ]


Set.prototype.symmetricDifference()


import { symDiff } from '@opentf/std';

const evens = [2, 4, 6, 8];
const squares = [1, 4, 9];

// Using native method
new Set(evens).symmetricDifference(new Set(squares)); 
//=> Set(5) {2, 6, 8, 1, 9}

// Using std function
symDiff([evens, squares]); //=> [ 2, 6, 8, 1, 9 ]


Set.prototype.isSubsetOf()


import { isSubsetOf } from '@opentf/std';

const fours = [4, 8, 12, 16];
const evens = [2, 4, 6, 8, 10, 12, 14, 16, 18];

// Using native method
new Set(fours).isSubsetOf(new Set(evens)); //=> true

// Using std function
isSubsetOf(fours, evens); //=> true


Set.prototype.isSupersetOf()


import { isSupersetOf } from '@opentf/std';

const evens = [2, 4, 6, 8, 10, 12, 14, 16, 18];
const fours = [4, 8, 12, 16];

// Using native method
new Set(evens).isSupersetOf(new Set(fours)); //=> true

// Using std function
isSupersetOf(evens, fours); //=> true


Set.prototype.isDisjointFrom()


import { isDisjointFrom } from '@opentf/std';

const primes = [2, 3, 5, 7, 11, 13, 17, 19];
const squares = [1, 4, 9, 16];

// Using native method
new Set(primes).isDisjointFrom(new Set(squares)); //=> true

// Using std function
isDisjointFrom(primes, squares); //=> true


Bonus

The subset relationship can be determined by passing the Boolean value to the proper param. Learn more about it on our website.

Conclusion

By using our library functions, you can compose sets like you would with mathematical operations.


Here are some of the benefits from using our library:


  • Works across runtimes, e.g. Browsers, Node.js, Bun, Deno, etc.

  • Consistent & Concise function names

  • TypeScript Support

  • Works with both CJS & ESM

  • Supports some Older Browsers & Node.js >= 16


And finally, you can avoid polyfills in your codebase.


Please don't forget to check out our important Articles:


Happy coding! 🚀


🙏 Thanks for reading.

L O A D I N G
. . . comments & more!

About Author

Thanga Ganapathy HackerNoon profile picture
Thanga Ganapathy@thangaganapathy
A passionate programmer.

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X REMOVE AD