We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

# Login or registerto boost this post!

Show some love to the author of this blog by giving their post some rocket fuel ðŸš€.

# Login or register to start working on this issue!

Engineers who find a new job through JavaScript Works average a 15% increase in salary ðŸš€

# JavaScript: Arrays vs Sets

Watandeep Sekhon 25 October, 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`.

## 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 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]);

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.

Originally published on frontendmayhem.com