There are several ways you can solve coding problems as a JavaScript developer, thanks to the plethora of pre-established data structures designed to solve simple to real-world problems.
Data structures are techniques for storing and organizing data, which enables efficient modification. The data structure also determines relationships between data and functions to use in accessing them.
JavaScript data structures have their respective use-cases; this is due to the unique properties each object possess. However, this doesn't mean there isn't any form of similarities between them. The Array and Set data structure types have a lot in common, and we're going to be looking at what similarities they share, how they differ from each other and their use-cases.
What is a Set and an Array?
Set
Set is a data type that stores data that are unique values of any type, whether primitive or object references. Set stores data in collections with keys that are iterable in the order of insertion.
Array
An array on the other hand - is a global object that stores high-level list-like objects called arrays in the consecutive memory for later use. Every array has several cells, and each cell has a numeric index that is used to access its data. It is the most basic and most used of all data structures.
Now that we know what they are, let's take a look at the similarities between these objects.
Similarities & Differences
For us to comprehend some of the technical aspects of this section, we need to understand how to construct or initialize either of the objects.
Both objects have a built-in constructor which utilises the new syntax for declaring a new data structure. However, unlike a set, an array is not limited to this method of declaration. An array can also be declared with the literal method.
You can initialize a new Set like this:
const set = new Set();
And a new array like this:
const arr = new Array();
Or:
const arr = [];
In addition, the literal method of initialising an array is much faster; construction-wise, and even performance-wise. The constructor method, however - is slower compared to the former, and prone to mistakes such as this:
const arr = new Array(20);
arr[0] //outputs: undefined
arr.length //outputs: 10
//Literal method
const arrLtr = [20];
arrLtr[0] //outputs: 20
arrLtr.length //outputs: 1
//The later is accurate
With that out of the way, we can now go into the nitty-gritty of what these objects have in common.
The similarities between Set and Array is conspicuous. if you've ever worked with arrays before (who hasn't anyway), you'll immediately notice some of the things they have in common. But even with the glaring dead ringer, the differences between them are quite stretched.
One of the biggest, perhaps the biggest, differences between Set and Array is that; Set can only contain one instance of a value. For example, in an array of people, a peter value can appear as many times as you want. Whereas in Set, you can only have one peter value. If you try to add more, nothing happens.
What if you hard-code duplicate values into a set, what happens?
Set will only pick one of the duplicate values and delete the rest.
However, Set's intolerance for duplicate data values has its perks, especially in cases where you don't want duplicate values or data leaks in your data structure.
Most of Set and Array's likeness lies within how they operate; how they populate their structure with data and otherwise.
Inserting and removing elements
Each object has its built-in methods for adding and removing values from its respective structure. While Array has more than one method of inserting or removing values, Set only has one.
Before going deep into this section, we first need to understand how items are inserted and removed from a data structure.
A Data structure is basically a stack of objects that are inserted and removed according to the last-in-first-out principle, which is also known as (LIFO).
Elements can only be added and removed from the top of the stack. A helpful analogy is to think of a stack of books; you can add new books from the top and remove only the book at the top.
Inserting and removing elements in an Array
The Array has two methods for this functionality push() and pop(). The push method adds new items to the top of the data structure, while pop removes items from the top of the structure i.e the last item added.
Array.protoype.push()
const arr = [ ];
arr.push("Mario")
console.log(arr);
//Output:
// Mario
Array.protoype.pop()
const arr = ["Mario", "Luigi", "Bowser"]
//Remove "Bowser"
arr.pop()
console.log(arr)
//Output:
// Mario, Luigi
Array.protoype.unshift() / shift()
The unshift() and shift() methods works contrary to the LIFO principle, these methods are used to insert and remove items to the bottom of a data structure i.e at index 0.
Array.protoype.unshift()
const arr = [ 4, 6, 8, 10 ];
//Add 2 to index 0
arr.unshift(2)
console.log(arr)
//Output:
// 2, 4, 6, 8, 10
Array.protoype.shift()
const arr = [ 2, 4, 6, 8, 10 ];
//Remove 2 from index 0
arr.shift()
console.log(arr)
//Output:
// 4, 6, 8, 10
Array.protoype.splice()
splice() is another array method that can be used to remove or replace an existing element in an array. The method takes in two parameters for deleting an element and three for replacing or adding a new element:
splice(start, deleteCount)
Or
splice(start, deleteCount, item1)
start
The index at which you want to start inserting or delete elements from an array.
deleteCount
An integer specifying the number of elements to be removed from the start index. N.B This is an optional parameter.
item
This is the element to be added to an array from the start index. This is also an optional parameter.
Here is a basic splice() demo:
Remove 0 (zero) elements before index 2, and insert "John".
let students = ['Hugh', 'Jack', 'Dave', 'Katerina'];
students.splice(2, 0, 'John');
console.log(student);
//Output:
//['Hugh', 'Jack', 'john' , 'Dave', 'Katerina']
Remove 1 element at index 1
let students = ['Hugh', 'Jack', 'Dave', 'Katerina'];
let removedStudents = students.splice(1, 1);
console.log("Students:" + students);
console.log("Removed students:" + removedStudents);