ES6 — Set vs Array — What and when?

Maya Shavin
Jan 24, 2018 · 6 min read
Set VS Array

What is Set and what is Array?

Everyone who works with JS until now is familiar with Array (don’t tell me you don’t). But what exactly is Array?

Constructing

Array

Array is very straight-forward. To declare new array in JS, you can either use normal literal directly:

var arr = []; //Empty array
var arr = [1,2,3]; //Array which contains 1,2,3
var arr = new Array(); //empty array
var arr = new Array(1,2,3);//Array which contains 1,2,3
var arr = Array.from("123"); //["1","2","3"]
  • [] saves more typing time (try it :))
  • You may end up making some classical mistakes such as:
var arr1 = new Array(10); //arr1[0] = undefined but arr1.length = 10
var arr2 = [10]; // arr2[0] = 10 and arr2.length = 1;
var arr3 = new Array(1,2,3); //[1,2,3]
var arr4 = [1,2,3];//[1,2,3]

Set

Set has built-in constructor. Yup, there is no short-cut as in array.

var emptySet = new Set(); 
var exampleSet = new Set([1,2,3]);
new Set(1);
var set = new Set([1,2,3]); // {1,2,3}
var arr = Array.from(set);//[1,2,3]

Locating an element / Accessing an element

  • First of all, Set does not support random access to an element by index like in Array, which means:
console.log(set[0]); //undefined
console.log(arr[0]); //1
  • Checking if an element is in Set has simpler syntax than Array by using Set.prototype.has(value) VS Array.prototype.indexOf(value)
console.log(set.has(0)); // boolean - false
console.log(arr.indexOf(0)); // -1
console.log(set.has(1)); //true
console.log(arr.indexOf(1)); //0
var isExist = arr.indexOf(1) !== -1;

Add/Insert new element

  • Adding new element to Array can be done quickly in O(1) by using Array.prototype.push() — element will be added to the end of the array.
arr.push(4); //[1,2,3,4]
arr.unshift(3); //[3,1,2,3]
arr.unshift(5, 6); //[5,6,3,1,2,3]
set.add(3); //{1,2,3} 
set.add(4); //{1,2,3,4}

Remove element

  • One of the nice things that make Array so popular is because it provides a lot of different methods to remove an element, for example:
arr.pop();//return 4, [5,6,1,2,3]
arr.shift(); //return 5; [6,1,2,3]
arr.splice(0,1); //[1,2,3]
set.delete(4); //{1,2,3}
set.clear(); //{}

So, when is Set better? And when is Array better?

  • Firstly, Set is different than Array. It is not meant to replace Array entirely, but to provide additional support type to complete what Array is missing.
  • Since Set only contains distinct elements, it makes life much easier if we know in advance we want to avoid saving duplicate data to our structure.
  • Basic operations of Set like union(), intersect(), difference(), etc… are easily implemented effectively based on the native built-in operations provided. Due to the delete() method, it makes intersect/union between 2 Sets much more comfortable than doing the same to 2 Arrays.
  • Array is meant for scenarios when we want to keep elements ordered for quick access, or do heavy modification (removing and adding elements) or any action required direct index access to elements (for example, try doing Binary Search on Set instead of Array — how do you access the middle located element?)

Conclusion

In general, to my opinion, Set doesn’t really have a huge clear advantage over Array, except in specific scenarios such as when we want to maintain “distinct” data with minimum effort, or to work with a lot of distinct data sets together using the most basic set operations, without the need of direct accessing element.

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Maya Shavin

Written by

Senior Front-End Developer @Cloudinary www.mayashavin.com

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co