Array vs Set in JavaScript
Tags: javascript, beginners, tutorial, webdev
Published: 2021-11-02 05:41:49

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
```js
const myArray = []
```
We can also initialize Array with default values
```js
const myArray = [1, 2, 3]
```
### Set
To create a set we use the **Set** class.
```js
const mySet = new Set()
```
And to initialize Set with default values:
```js
const mySet = new Set([1, 2, 3])
```


## Adding items
### Array
To add items in array we use the **push** method
```js
const myArray = []
myArray.push(5)
myArray.push("hello")

console.log(myArray)
// Output: [ 5, 'hello' ]
```
### Set
To add items in JS set we use the **add** method
```js
const mySet = new Set()
mySet.add(5)
mySet.add("hello")

console.log(mySet)
// Output: Set { 5, 'hello' }
```
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.
```js
const mySet = new Set()
mySet.add(5)
mySet.add("hello")
mySet.add(5)

console.log(mySet)
// Output: Set { 5, 'hello' }
```

## 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*
```js
const myArray = ["hello", "there", 69, 420]
console.log(myArray[1])
// Output: "there"
```
### 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.

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

console.log(myArray[1])
// Output: "there"
```


## Deleting items
### Array
To remove element from array we use the splice function.
```js
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 ]
```
### Set
To delete item from set we use **delete** method.
```js
const mySet= new Set(["hello", "there", 69, 420])
mySet.delete("there")

console.log(mySet)
// Output: Set { 'hello', 69, 420 }
```


## 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*
```js
const myArray = ["hello", "there", 69, 420]

console.log(myArray.indexOf("there") > -1)
// Output: true
```
### Set
To check if something exists in our set we can use the **has** method
```js
const mySet= new Set(["hello", "there", 69, 420])

console.log(mySet.has("there"))
// Output: true
```


## Check size
### Array
To check how many items does our array have use can simply access its **length**
```js
const myArray = ["hello", "there", 69, 420]

console.log(myArray.length)
// Output: 4
```
### Set
We can access the **size** property to get the size of our set.
```js
const mySet= new Set(["hello", "there", 69, 420])

console.log(mySet.size)
// Output: 4
```

## Emptying list
### Array
To empty out an array we can simple set the array to `[]`
```js
// We are using let here Because we will reassign it to []
let myArray = ["hello", "there", 69, 420]
myArray = []

console.log(myArray)
// Output: []
```
### Set
We can use **clear** method to empty out set.
```js
const mySet= new Set(["hello", "there", 69, 420])
mySet.clear()

console.log(mySet)
// Output: Set {}
```


## 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
```js
const myArray = [1, 2, 35, 4, 5]

for(let item of myArray){
  console.log(item)
}
/* Output:
1
2
35
4
5
*/
```
### Set
Just like array we can use `for of` loop to loop over a set also
```js
const mySet = new Set([1, 2, 35, 4, 5])

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


And now you know the basics of arrays and sets in Javascript.
Make sure to checkout my other articles and [YouTube channel](https://youtube.com/c/anglebrace)
{% user 0shuvo0 %}
## was it helpful? Support me on [Patreon](https://www.patreon.com/0shuvo0)
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twjftovyevtqht7v3ley.png)](https://www.patreon.com/0shuvo0)