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 = []
We can also initialize Array with default values
const myArray = [1, 2, 3]
Set
To create a set we use the Set class.
const mySet = new Set()
And to initialize Set with default values:
const mySet = new Set([1, 2, 3])
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' ]
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' }
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' }
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"
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"
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 ]
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 }
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
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
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
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
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: []
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 {}
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
*/
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
*/
And now you know the basics of arrays and sets in Javascript.
Make sure to checkout my other articles and YouTube channel
was it helpful? Support me on Patreon
Top comments (0)