JavaScript: Arrays vs Sets

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.