Watandeep Sekhon
25 Oct 2018
•
2 min read
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
.
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.
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.
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 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
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()); // { }
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.
Watandeep Sekhon
See other articles by Watandeep
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!