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:

Example:

const list = new Set ( );
Enter fullscreen mode Exit fullscreen mode

Adding values

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

Example:

list.add ( );
<< Set { 1 }
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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 ]);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
const letters = new Set ( ) .add ( ‘the’)  .add (‘quick’) .add (‘brown’) .add (‘fox’)
words
<< {‘the’, ‘quick’, ‘brown’, ‘fox’}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

You can test its strict equality

[ 1 ]  === [ 1 ];
<< false
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now, checking a value in a set

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

jla.has (‘Green Lantern’);
<< false
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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’}
Enter fullscreen mode Exit fullscreen mode

Now converting it into an array:

const shoppingArray = […shoppingSet]

shoppingSrray
<< [ ‘Apples’, ‘Bananas’, ‘Beans’ ]
Enter fullscreen mode Exit fullscreen mode

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

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

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 ]
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (5)

Collapse
 
rnrnshn profile image
Olimpio

To .size( ) pops an error on the console

arrow.size is not a function

Collapse
 
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!

Collapse
 
purvajain profile image
PurvaJain

just use arrow.size

Collapse
 
changzhao profile image
Chang Zhao

Is there an error?

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

Did you mean "const words"?

Collapse
 
zdh3 profile image
Zach Handler

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