In ES2015, we got a new data type Set . Most developers are quite familiar with Arrays. Therefore, in this blog post, we will take a look at the differences between Array & Set .

Unique values

The biggest difference between an Array & Set is that Arrays can have duplicate values whereas Sets cannot. The other big difference is that data in an array is ordered by index whereas Sets use keys & the elements are iterable in the order of insertion.

Initializing a Set

const mySet = new Set(); // Initializes an empty set const mySet2 = new Set([1, 2, 3, 3]); // Initializes a set with 3 items const mySet3 = new Set(1); // Throws an error

The Set constructor takes in an iterable object as input. The set will be initialized with only the unique values from that iterable object. That is why a set created from [1, 2, 3, 3] only contains three values.

Access elements

Since Set is a key based collection, we cannot access elements using an index as we do with an array.

const mySet = new Set([1, 2, 3]); console.log(mySet[0]); // undefined

Set exposes some helper methods like values to get all the values in insertion order & has to check if a value exists in a Set

const mySet = new Set([1, 1, 2]); console.log(mySet.values()); // 1,2 console.log(mySet.has(2)); // true

Adding new values

Adding a new element to the end of an array is a simple operation accomplished by using the Array.prototype.push method. Adding elements to the beginning of an array is a much slower task which can be accomplished by using Array.prototype.unshift .

const myArray = [ 1, 2 , 3]; myArray.push(4); myArray.unshift(0); console.log(myArray); // [ 0, 1, 2, 3, 4 ]

There is only one way to add a new value to a Set & that is using the Set.prototype.add method. Set checks all existing values for duplicates when this action is performed. If you try to add a pre-existing value then it is simply ignored without throwing any errors.

const mySet = new Set([1, 1, 2]); mySet.add(3); // Successfully added mySet.add(2); // Doesn't add the value. No error thrown! console.log(mySet.values()); // 1,2,3

Removing values

Arrays provide a multitude of ways to remove values. We have pop , shift , splice .

pop - Removes the last element.

shift - Removes the first element.

splice - Removes a range of values starting from a given index up to a specified length.

const myArray = [ 1, 2 ,3, 4, 5]; myArray.pop(); // [ 1, 2, 3, 4 ] myArray.shift(); // [ 2, 3, 4 ] myArray.splice(0, 2); // [ 4 ]

Sets don’t need that much flexibility when removing values. We have delete & clear to work with.

delete - Deletes a given element.

clear - Removes all the elements in the set.

The benefit of the interface exposed by Set is that it makes it easy to delete a specific value whereas that is a bit tedious to do in an Array .

const mySet = new Set([ 1, 2 ,3, 4, 5]); mySet.delete(1); console.log(mySet.values()); // { 2, 3, 4, 5 } mySet.clear(); console.log(mySet.values()); // { }

Best of both worlds

We can also mix & match Arrays & Sets to get some powerful features. For example, removing duplicates from an Array has never been easier

let array1 = Array.from(new Set([1,1,2,2,3,3,4,4])); console.log(array1); // [ 1, 2, 3, 4 ]

Let me know what other interesting use cases are solved by using Sets or a combination of Arrays & Sets.