## DEV Community is a community of 615,123 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

# JavaScript: Data Structures (Part 2 - Sets)

### 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:

Example:

``````const list = new Set ( );
``````

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

Example:

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

``````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.

Example:

``````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’ );
letters
<< 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’)
words
<< {‘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]);
arrays
<< 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 ( );
jla
<< Set { }

jla.size
<< 0
``````

Converting Sets

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

Example:

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

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

Now converting it into an array:

``````const shoppingArray = […shoppingSet]

shoppingSrray
<< [ ‘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 ]
``````

### Conclusion

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.

## Discussion (4)

Olimpio

To .size( ) pops an error on the console

`arrow.size is not a function`

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!

Chang Zhao

Is there an error?