Advertisement
  1. Code
  2. ES6
Code

Understanding Sets With JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Sets can be very powerful if you understand how to use them. A few applications of sets include solving counting problems where you may want to find the number of ways you can group elements together. 

Another application is problems that require you to find relationships between elements. The ECMAScript specification doesn’t include methods for operating on sets in this way. But it is possible to create your own. 

What follows is an overview of set theory with practical applications you can use to extend the capabilities of JavaScript and solve more complex problems.

Contents

  • Basics
  • Union
  • Intersection
  • Difference
  • Symmetric Difference
  • Complement
  • Review

Basics

A set is an unordered collection of elements that are all unique. For example, the list of all employees at your work is a set. Each employee would be an element in the set. In reality, these elements would be stored using an ID or Social Security number because these are values we can ensure will be unique. Note how the order of these elements is irrelevant to us because sorting IDs or Social Security numbers has no meaning.  

We call our set of employees the universal set because it contains all elements under consideration. Let’s imagine another set. This set is the list of employees at your company who work in the engineering department. This is a subset of our employee set because every element in the engineering set also exists in the employee set. Another subset is the list of employees who are freelance contractors. Here is how we would create these sets in JavaScript:

If you want to add another person to one of our sets, we would use the syntax set.add(value) and replace set with the name of our set and value with the value of the element being added. If we try to add an element that is already in the set, it will not be added. Example:

This will print Set { 'Alberta', 'Dr. Gero', 'Trunks', 'Bulma', 'Gohan' }.

Right now, you may be thinking so what? What can I do with this information? Next we will see how we can operate on sets to help us solve some common problems.

Union

What if we want to find all the employees in our company who are freelancers or who work in the engineering department? We would need to combine the two sets, and then remove any duplicate names. This is called the union. 

The union of two sets is the set that contains elements from either set or both sets. Notice how elements in our engineering set are also in the freelancers set. Here is one way you can find the union of both sets:

The ... operator turns our set into an array, and after combining the two arrays, the Set constructor removes the duplicate elements. The union of the two sets will be Set {'Alberta', 'Dr. Gero', 'Trunks', 'Bulma', 'Gohan', 'Piccolo', 'Vegeta', 'Goku' }.

Task

What is the union of the sets [1, 3, 5, 7, 9] and [2, 3, 4, 6]?

Intersection

Suppose we want to find all the employees who are in the engineering department and are freelancers. This is the intersection of the sets. The intersection of two sets is the set containing elements in both sets. 

To reproduce this, we can search through one set and check if each element is in the other set. To check if an element is in a set, we use the has method. Example:

This would return true. Using the has method, we can filter our engineering set for items that are also in the freelancers set.

The intersection of engineering and freelancers is Set { 'Trunks', 'Gohan' }.

Task

What is the intersection of the sets [1, 3, 5, 7, 9] and [2, 3, 4, 6]?

Difference

Let’s consider the scenario where we want to find the engineers who are not freelancers. This is the difference. The difference of two sets is the set containing elements that are in the first set, but not in the second set. 

For us, that means we will start with our engineering set, and then remove any elements that are also in the freelancers set. Example:

The difference of the engineering set and the freelancers set is Set { 'Alberta', 'Dr. Gero', 'Bulma' }. If we want to get the list of people who are freelancers and not engineers, we start with the freelancers set and remove the elements that appear in the engineers set. Example:

This gives us a different result. The difference of the freelancers set and the engineering set is Set { 'Piccolo', 'Vegeta', 'Goku' }.

Task

Find the difference of [1, 3, 5, 7, 9] and [2, 3, 4, 6].

Find the difference of [2, 3, 4, 6] and [1, 3, 5, 7, 9].

Symmetric Difference

Now, we would like to find who in the company is either an engineer or a freelancer, but not both. This is the symmetric difference. The symmetric difference of two sets is the set containing elements from either set, but not both sets. 

One approach we could use is to find the union of the two sets (everyone who is an engineer, freelancer, or both) and subtract the intersection (everyone who is both an engineer and a freelancer). Combining the techniques we used previously, we can get the symmetric difference with the following code:

The symmetric difference of our engineering set and our freelancers set is Set { 'Alberta', 'Dr. Gero', 'Bulma', 'Piccolo', 'Vegeta', 'Goku' }.

Task

Find the symmetric difference of [1, 3, 5, 7, 9] and [2, 3, 4, 6].

Complement

If we have our set of employees and a set of engineers, how could we find the set of all people who are not engineers? One thing we could do is subtract the engineers set from the employees set. This set is the complement to our engineers set in relation to our employees set. Example:

The complement to the engineering set in relation to our employees set is Set { 'Goku', 'Piccolo', 'Vegeta' }.

Task

Given the universal set [1 ,2, 3, 4, 5, 6, 7, 8, 9, 10], find the complement to set [2, 4, 6, 8, 10].

Review

Sets come in handy when you need to compare different lists, combine lists, or find unique elements in a list. The next time you have a problem where you need to analyze data in this way, consider using one of the set operations mentioned above. Here is a list of the key terms that were discussed:

  • Set: A collection of unique, unordered elements.
  • Universal set: All possible elements of a set.
  • Subset: A smaller set within a set.
  • Union of sets A and B: The set that contains elements in either A, B or both.
  • Intersection of sets A and B: The set containing elements from both A and B.
  • Difference of sets A and B: The set containing elements in A but not in B.
  • Symmetric difference of sets A and B: The set containing elements in either A or B, but not both.
  • Complement of set A: The elements in the universal set that are not in A.

As usual, remember if you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato Market.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.