We're planting a tree for every job application! Click here to learn more

JavaScript: Arrays vs Sets

Watandeep Sekhon

25 Oct 2018

2 min read

JavaScript: Arrays vs Sets
  • JavaScript

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.

Did you like this article?

Watandeep Sekhon

See other articles by Watandeep

Related jobs

See all

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Related articles

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

WorksHub

CareersCompaniesSitemapFunctional WorksBlockchain WorksJavaScript WorksAI WorksGolang WorksJava WorksPython WorksRemote Works
email iconhello@works-hub.comUK flag

Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ

US flag

108 E 16th Street, New York, NY 10003

Subscribe to our newsletter

Join over 111,000 others and get access to exclusive content, job opportunities and more!

© 2023 WorksHub

Privacy PolicyDeveloped by WorksHub