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 register
to apply for this job!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

Blog hero image

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 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.

Originally published on frontendmayhem.com

Author's avatar
Watandeep Sekhon
    JavaScript
    Vue
    Node
    CSS
    React

Related Jobs

Related Issues

viebel / klipse-clj
viebel / klipse-clj
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • 1
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • Open
  • 0
  • 0
  • Advanced
  • Clojure
  • $80
viebel / klipse
  • Started
  • 0
  • 2
  • Advanced
  • Clojure
  • $180
viebel / klipse
  • Started
  • 0
  • 1
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 3
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • 1
  • 0
  • Advanced
  • Clojure
  • $300

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GithubStart with Stack OverflowStart with Email