Set vs Array in Javascript

227

Array:
An array is a data structure where it stores the data in an indexed format. In Javascript, we can store any type of data in an array whereas in other programming languages it only allows you to store similar data.

For example:

[1, 2, 3, 3, "Madhav"]

Set:

Set is nothing but an abstract datatype where it will store only distinct data. It doesn't follow the index pattern to store elements.

For example:

{1, 2, 3}

Array follows indexed pattern whereas Se t follows ** keyed pattern ** to store data.

So we can use any of these to store data but we need to choose which one is better suitable for our dataset available.

Let's get some idea about arrays and sets so that we can make a decision which one to use according to our data.

** Construction:**

** Arrays:**

We can declare an array in JS in several ways

var arr = []  // Empty object

var arr = [1,2,3,2] // arr which contains 1,2,3

Or we can use the constructor also to create an array.

var arr = new Array()  // Empty object

var arr = new Array(1,2,3,2) // arr which contains 1,2,3

Note: To declare an array don't go with constructor function it takes much time when compared literal.

Set:

We don't have multiple declarations available for sets the only we can declare it by using constructor

var set = new Set(); // empty set object 
var set = new Set([1,2,3]);  // set which contains {1,2,3}

** Methods available in array and set **

To access an element

in the array:

Array stores element in a consecutive manner so we can access elements by index whereas set doesn't maintain index we cannot access it easily.

console.log(set[0]); //undefined
console.log(arr[0]); //1

Set has simpler syntax to check if an element is available or not.

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

** To add a new element:**
** in array:**

It is very easy to add new elements in an array. It takes only O(1) time complexity to add an element to an array.

arr.push(4); //[1,2,3,4]

or it can be done in O(n) to add the element to the array at the beginning of array bu using unshift

arr.unshift(3); //[3,1,2,3]
arr.unshift(5, 6); //[5,6,3,1,2,3]

There is only a single way to add elements in set i.e. by using set.prototype.add(1). Generally, on every add, it will iterate and check whether it is unique or not. Generally, it takes O(n) times to add an element but due to the hash table implementation, it takes only O(1).

set.add(3); //{1,2,3} 
set.add(4); //{1,2,3,4}

So to add an element both set and add takes the same time.

To remove elements

** in an array: **

Array provides lots of methods to remove elements for example.

  • Pop() - pop method is user remove and return the last element of the array. It takes O(1) time to remove.
let arr = [1,2,3,4,5]
arr.pop();//return 5, [1,2,3,4]
  • Shift() - shift method removes and return first element. This takes O(n).
let arr = [1,2,3,4,5]
arr.pop();//return 1, [2,3,4,5]
  • Splice - splice() method is used to modify an existing array like we can remove or add elements from an array. This takes O(n).
let arr = [1,2,3,4,5]
arr.splice(0,1);//return [2,3,4]

** in a set: **
In the set, we can remove elements only by

  • Delete(value) — remove a specific given value from Set.
var set = new Set([1,2,3,4])
set.delete(4); //{1,2,3}
  • Clear() — CLear method is used to empty a set.
var set = new Set([1,2,3,4])
set.clear(4; //{}

In array, we cannot delete a value directly we can access it by using an index, whereas set has its simple Delete method to remove element by the actual value.

** Conclusion **

Set is not an actual replacement of array. Set is useful if we know that data which we want to store should be distinct with minimum effort then we can go to the set. Otherwise, the array is the best choice for storing data.