DEV Community 👩‍💻👨‍💻

Cover image for Array vs Set in JavaScript
Shuvo
Shuvo

Posted on

Array vs Set in JavaScript

Array and Set both are basic data structure. But they are very different from each other. So in this article let's explore them and find out the difference.

Definition

Array

In JavaScript, array is a single variable that is used to store different elements. Array elements are indexed and ordered.

Set

A JavaScript Set is a collection of unique values. Sets are unordered and not indexed

Basic Syntax

Array

To create an array in JavaScript we simply use a pair of square brackets

const myArray = []
Enter fullscreen mode Exit fullscreen mode

We can also initialize Array with default values

const myArray = [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

Set

To create a set we use the Set class.

const mySet = new Set()
Enter fullscreen mode Exit fullscreen mode

And to initialize Set with default values:

const mySet = new Set([1, 2, 3])
Enter fullscreen mode Exit fullscreen mode

Adding items

Array

To add items in array we use the push method

const myArray = []
myArray.push(5)
myArray.push("hello")

console.log(myArray)
// Output: [ 5, 'hello' ]
Enter fullscreen mode Exit fullscreen mode

Set

To add items in JS set we use the add method

const mySet = new Set()
mySet.add(5)
mySet.add("hello")

console.log(mySet)
// Output: Set { 5, 'hello' }
Enter fullscreen mode Exit fullscreen mode

Now all the values of set have to be unique so if you try to add same items more than once it will still appear only once.

const mySet = new Set()
mySet.add(5)
mySet.add("hello")
mySet.add(5)

console.log(mySet)
// Output: Set { 5, 'hello' }
Enter fullscreen mode Exit fullscreen mode

Accessing items

Array

In js arrays are indexed. So we can use index to get the element that that index. PS. Index starts at 0 in JavaScript

const myArray = ["hello", "there", 69, 420]
console.log(myArray[1])
// Output: "there"
Enter fullscreen mode Exit fullscreen mode

Set

Unlike arrays, sets are unordered so we can't use index to get elements. However we can convert our set to array whenever needed.

const mySet= new Set(["hello", "there", 69, 420])
const myArray = [...mySet] // Converting set to array

console.log(myArray[1])
// Output: "there"
Enter fullscreen mode Exit fullscreen mode

Deleting items

Array

To remove element from array we use the splice function.

const myArray = ["hello", "there", 69, 420]
// Syntax: array.splice(startingIndex, number of elements to delete)
myArray.splice(1, 1)

console.log(myArray)
// Output: [ 'hello', 69, 420 ]
Enter fullscreen mode Exit fullscreen mode

Set

To delete item from set we use delete method.

const mySet= new Set(["hello", "there", 69, 420])
mySet.delete("there")

console.log(mySet)
// Output: Set { 'hello', 69, 420 }
Enter fullscreen mode Exit fullscreen mode

Check if element exist

Array

We can use indexOf function to check if an item exists in array. the indexOf function returns -1 if the item doesn't exists

const myArray = ["hello", "there", 69, 420]

console.log(myArray.indexOf("there") > -1)
// Output: true
Enter fullscreen mode Exit fullscreen mode

Set

To check if something exists in our set we can use the has method

const mySet= new Set(["hello", "there", 69, 420])

console.log(mySet.has("there"))
// Output: true
Enter fullscreen mode Exit fullscreen mode

Check size

Array

To check how many items does our array have use can simply access its length

const myArray = ["hello", "there", 69, 420]

console.log(myArray.length)
// Output: 4
Enter fullscreen mode Exit fullscreen mode

Set

We can access the size property to get the size of our set.

const mySet= new Set(["hello", "there", 69, 420])

console.log(mySet.size)
// Output: 4
Enter fullscreen mode Exit fullscreen mode

Emptying list

Array

To empty out an array we can simple set the array to []

// We are using let here Because we will reassign it to []
let myArray = ["hello", "there", 69, 420]
myArray = []

console.log(myArray)
// Output: []
Enter fullscreen mode Exit fullscreen mode

Set

We can use clear method to empty out set.

const mySet= new Set(["hello", "there", 69, 420])
mySet.clear()

console.log(mySet)
// Output: Set {}
Enter fullscreen mode Exit fullscreen mode

Loop through items

Array

To loop through the items of an array in JS we can use higher order functions like map, reduce, forEach etc. or we can simply use a for of loop

const myArray = [1, 2, 35, 4, 5]

for(let item of myArray){
  console.log(item)
}
/* Output:
1
2
35
4
5
*/
Enter fullscreen mode Exit fullscreen mode

Set

Just like array we can use for of loop to loop over a set also

const mySet = new Set([1, 2, 35, 4, 5])

for(let item of mySet){
  console.log(item)
}
/* Output:
1
2
35
4
5
*/
Enter fullscreen mode Exit fullscreen mode

And now you know the basics of arrays and sets in Javascript.
Make sure to checkout my other articles and YouTube channel

0shuvo0 image

was it helpful? Support me on Patreon

Patreon Logo

Top comments (0)

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs