Perform Set Operations using JavaScript Set Methods

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 7 months ago
Updated 2 months ago

The "Set Methods" proposal introduces 7 new methods to JavaScript/ECMAScript:

  • union
  • intersection,
  • difference,
  • symmetricDifference,
  • isSubsetOf
  • isSupersetOf
  • isDisjointFrom

Thanks to them, complex operations using JavaScript sets will become much easier.

[00:00] First, create a set with some example values. So here we've got set a, b, c which includes 3 string primitive values a, b, and c and let's create another set so that we can perform the operations c d e So we have some items which are exclusive for the sets and the c value, which is [00:19] included in both of the sets. So the first new operation which we can execute is to create a union, on the 2 sets. So a union is basically going to be a new set, which includes the values from either the set on the left hand side or the set on the right [00:39] hand side. Another operation which is possible is to create an intersection. So when we write s dot a b c and we run an intersection, we're going to, have a new set, which is going to include only the elements that are common, which exist in both of the sets. [00:59] So the elements which are being members of both set a and set b. Another operation which we've got is the difference of the sets. So s a b c dot difference, set c d e is going to get all the items which are included [01:19] within a but are not included within set b. So in our case, this is the string a and string b. The string c is excluded because this is a part of the the other set, which we're, making the difference from. Another one is the symmetric difference. So we want to have the elements [01:39] which are part of the first set or the other set, but which are not part of both sets at the same time. So what we're doing is basically set number 1 dot symmetric difference, set number 2 with s c d e in our case, and what we'll have is, basically [01:59] all the elements without the common part over here. So these 4 operations, union, intersection, difference, and symmetric difference, return a new set. There are more operations which will return a bullion value for us. So the disjoint or actually is disjoint [02:18] from is going to return whether the 2 sets have any, overlap or actually if there are disjoint meaning there is no overlap. So is disjoint from s c d e. Now there is some overlap between them. So this is going to return false, obviously. [02:38] Now if we return a different set which would include basically, this is a b c so let's make it only, d e. In this case, that would be true because there are no values which are included in both of the sets. In our [02:58] case, we are, comparing only primitive values. We'll get back to object values in just a while. So that was disjoint. Now, one of the most fundamental operation is checking what is whether a set is a subset of another one. So here, we're checking whether a is included within b, which [03:18] means whether each element of a is also an element of b, which in our case is going to be false. So s a b c dot is subset of s c d e, which is going to be obviously false. I forgot to write a subset of. [03:38] So this is obviously false since in our case, the a b c includes a and b and c, and a and b are not parts of the CD, so this is false in this case. And there is finally the last operation that is available that is s dot a b c dot is superset, which [03:58] basically checks whether the set includes another set which is its own subset. This basically checks whether all elements within the c d e one are included within the one that we're running the method on. So if it was the case that c d e was also included in a b c that would return [04:17] true, obviously, that is false. But if we change it to new set, which would include basically, let's say, a, now the question is, are they also a part of the a b c? The answer is obviously true. So here we've got true. Now in all the examples that we've seen so far, we have seen that the compared [04:37] values were primitives. So primitives values in JavaScript are compared by just their values in line. This is going to be slightly different when we're speaking about objects. So let's create just OBG 1, and let's create OBG 2. So they have the same value, but they are obviously [04:57] different references. And since JavaScript compares objects by references, sets, maps, and different JavaScript data structures are also going to compare objects by references, not just by their values. So if we create a new set, let, set which includes object 1 and we would [05:17] create that this is new set which includes OBG 1. Oh, sorry. So here we've got set, o one. So this is basically a set which includes 1 object. This is just an empty object. If we want to check what is its intersection with a new [05:37] set, which includes basically an empty object, the reference to this object and the reference to this object are going to be different. Hence, what we've got here is basically an empty set. However, if we grab the same original reference, now this would be treated as [05:56] if there was some element that was common in both sets. Just remember that objects are compared by reference in JavaScript.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today