DEV Community

Banesa Guaderrama
Banesa Guaderrama

Posted on • Updated on


JavaScript: Data Structures (Part 2 - Sets)

alt text

Data Structures: Arrays, Sets, and Maps.

Data structure was defined in the part 1 of a series of 3 blogs that includes Arrays (Part 1), Sets (Part 2), and Maps (Part 3). But, revisiting the concept; data structure refers to how the data is organized, so it can be used efficiently, including the logical statements that allows to control the flow of a program.

The Sets Data Structure

A set data structure is represented by a collection of unique values without duplicating them. Sets offer a useful way to keep track of data by grouping and organizing its data in a set structure by using curly brackets {}.

Creating Sets

An empty set is created by using the operator new and Set( ) constructor:


const list = new Set ( );

Adding values

Using the add method will allow to add values to a set.


list.add ( );
<< Set { 1 }

Adding more values

list.add (2 ) .add (3) .add (4) ; // adding multiple values is possible by repeating just the add ( ) method
<< Set { 1 , 2, 3, 4}

Note: If you try to add an existing value to the set, it will ignore since the nature of the set data structure does not allow duplicated values

Adding multiple values using an array

We can also add multiple values to a set as an argument inside an array.


const numbers = new Set ([ 1, 2, 3 ]);

Using Strings as arguments

Using strings is not different than using numbers, if an element is duplicated then it only will show one element.

const letters = new Set (‘hello’ );
<< Set { ‘h’, ‘e’, ‘l’, ‘o’ } // it eliminates one ‘l’ since in sets values cannot been duplicated
const letters = new Set ( ) .add ( ‘the’)  .add (‘quick’) .add (‘brown’) .add (‘fox’)
<< {‘the’, ‘quick’, ‘brown’, ‘fox’}

Non-primitive values (arrays and objects) are considered unique values, even containing the same value allowing to duplicate values that appearing in a set.

const arrays = new Set ( ) .add ([1]) .add ([1]);
<< Set { [ 1 ], [ 1 ] } // these arrays look the same but are different objects

You can test its strict equality

[ 1 ]  === [ 1 ];
<< false

Set Methods

You can find the number of values in a set by using the size () method:

const jla = new Set ( ) . add(‘Superman’) .add (‘Batman’) .add (‘Wonder Woman’);
<< Set { ‘Superman’,  ‘Batman’, ‘Wonder Woman’ }

jla.size ( );
<< 3

Now, checking a value in a set

jla.has (‘Superman’);
<< true

jla.has (‘Green Lantern’);
<< false

Note: The has ( ) method is more efficient and faster than the includes ( ) or indexOf ( ) methods

Removing Values

You can remove a value by using the delete ( ) method, it will return a Boolean value of true if the value was successfully deleted, or false if it was not.

jla.delete ( ‘Superman’ );
<< true

jla.delete ( ‘Flash’ );
<< false

The clear ( ) method will clear all the values from your set, so be careful if you are using it.

jla.clear ( );
<< Set { }

<< 0

Converting Sets

By using the spread operator, you can convert a set into an array directly inside an array.


const shoppingSet = new Set ( ) .add (‘Apples’) .add (‘Bananas’) .add (‘Beans’);

<< Set { ‘Apples’, ‘Bananas’, ‘Beans’}

Now converting it into an array:

const shoppingArray = […shoppingSet]

<< [ ‘Apples’, ‘Bananas’, ‘Beans’ ]

Another method to conver it can be Array.from ( )

const shoppingSet = new Set ( ) .add (‘Apples’) .add (‘Bananas’) .add (‘Beans’);
const shoppingArray = Array.from(shoppingSet);

By combining the use of the spread operator and the ability to pass an array to new Set ( ) constructor you are creating a copy of the array with any duplicates removed:

const duplicate = [ 3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 9];
<< [ 3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 9]

Const nonduplicate = […new Set ( repeatedArray)];
<< [ 3, 1, 4, 5, 9, 2, 6 ]


Just think that data structures store data, and the best stored and organized it is, the more efficient it will be for its intended use; just as words are stored in a dictionary, data is stored in a data structure, and in the same way if words were randomly stored in a dictionary without structure we would struggle to use it, the same would happen with the data.

Top comments (5)

rnrnshn profile image

To .size( ) pops an error on the console

arrow.size is not a function

banesag profile image
Banesa Guaderrama

Hi Olimpio - You are right, .size is not a valid method. It was used by jQuery.

Note: The size() method was deprecated in version 1.8 and removed in jQuery version 3.0. Use the length property instead.

Thanks for taking the time of reading and comment!

purvajain profile image

just use arrow.size

changzhao profile image
Chang Zhao

Is there an error?

const letters = new Set ( ) .add ( ‘the’) .add (‘quick’) .add (‘brown’) .add (‘fox’)

Did you mean "const words"?

zdh3 profile image
Zach Handler

Where did 'repeatedArray' come from in your last example??

Visualizing Promises and Async/Await 🤯

async await

Learn the ins and outs of Promises and Async/Await!