Set vs Array in Javascript - What to Use?
In this post you will learn the differences between Sets and Arrays inside Javascript and is it worth it to use Sets at all.
Creating arrays
How do we typically create arrays inside Javascript?
const arr = [1,2,3]
Our array can contains strings, numbers, booleans, arrays or objects.
The most popular usage of arrays is to store objects inside. In the typical application we have some entities and we want to make a collection of it.
const users = [
{id: 1, name: 'Jack', age: 25},
{id: 2, name: 'John', age: 27},
{id: 3, name: 'Mike', age: 30},
]
const usernames = users.map(user => user.name)
Here we store an array of users with different data. It allows work with this collection and get an array of names for example.
Creating Sets
But starting from ES6 we are getting Sets. The question is if they are better than Arrays and should we switch to Sets or not.
const set = new Set([1,2,3])
This is how we create a set and provide some initial data inside.
Differences
This is just 2 differences between Sets and Arrays. First of all Sets can't have same data twice. All data inside the Set is always unique.
const set = new Set([1,1,1,1,2])
// {1,2}
You never have duplicates in the Set.
Second point is the most important.
Array is an indexed collection but Set is a keys collection with the order of insertion.
It means that you can access an element inside an array by index but not in set.
console.log(arr[1])
// 'foo'
console.log(set[1])
// undefined
It is simply not possible to access an element by index inside a Set this is why it kills the usage of Sets for programmers almost completely.
But still Set has an order of insertion and the last added element will come to the end of the list.
const set = new Set([1,2,3])
set.add(4)
// {1,2,3,4}
Set methods
As you can see we used here set.add to add a value to the set and it comes at the last position.
What we can do with Set is just check if we have a value inside the Set.
const set = new Set([1,2,3, 4])
set.has(4)
// true
You can also delete a value from Set if you need to.
const set = new Set([1,2,3,4])
set.delete(4)
// {1,2,3}
Iterable Set
It is important to remember that Set is iterable.
for (const item of set.values()) {
console.log(item)
}
Here we have access to every value inside the Set and we can apply some logic to it.
Helper functions
But we have a huge problem! With using arrays we have lots of awesome functions like map, filter, reduce that we can apply on array.
With Set we get zero helper function so you typically want to convert it to the array to have access to them.
In order to convert Set to an array we can simply spread it.
const arr = [...set]
// [1,2,3]
As you can see Sets are not really a replacement for Arrays and their usage it quite limited. The only way how I use Set is to make my array unique.
const arr = [1,2,3,1,3]
const unique = [...new Set(arr)]
// [1,2,3]
This is the shortest code to make your array unique.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
📚 Source code of what we've done