Data structure algorithm is an important concept to understand for everyone who wants to get intothe web development field. Learners who are new to website designing and development must start by making their initial concepts clear. Data structure is one such initial part to understand. In this blog, we are going to talk about the top 10 data structures in JavaScript with their implementation steps.
What is a Data Structure?
Data structure algorithm is an important concept to understand for everyone who wants to get into the web development field. Learners who are new to website designing and development must start by making their initial concepts clear. Data structure is one such initial part to understand. In this blog, we are going to talk about the top 10 data structures in JavaScript with their implementation steps.
Does all this sound a bit tricky to you? As a beginner, you can follow a detailed step by step process of learning programming for websites and web applications with our specialized courses in web designing. These programs are for newcomers mainly who don’t know much about coding and want to become pro in it.
But if you are comfortable so far then just keep reading as we are about to start the most important part now.
In today’s blog, we are focusing on JavaScript’s built-in data structures only. So, let’s start reading about types of data structures coming from JS.
Most Useful Data Structure in JavaScript
1. Array
Array comes on top of the list and it is a very common one to use among programmars.
To understand its meaning, we can take the example of an ice tray.
Imagine you have an ice tray. It has little boxes that can hold ice cubes. Think that tray as array. Now each box of tray is like an area that can hold something like, a number, a color, or even a name. We call that area elements in coding. Plus, every box has a number written on it like 0, 1, 2, etc. It is to know where to keep things. So, if we want the third ice cube, then we can simply look at box number 3! These numbers are index.
Javascript also has the dynamic arrays similar to any other programming languages. But the size or data type are not predetermined in the JS.
Literal arrays are the easiest way of creating the arrays in JavaScript. Here is the example:
<script>
var users=["neha","ayushi","gauri"]; // creating an array
//iterate over an array
for (i=0;i<users.length;i++){
document.write(users[i] + ", ");
}
</script>
2. Linked list
Linked list is a group of nodes and each node will have the data and the address to the next node. It’s actually a linear type of data structure.
Basics operations we can perform on the linked list are:
- Traversal: It means, going through nodes one by one.
- Insertion: In it, we add new node by making some adjustments.
- Deletion: It means removing link from a node and reconnecting to others.
- Searching: In it, we check each node until we find the value.
- Sorting: This operation rearranges all the nodes in the list.
Let’s understand this type with a simple example.
Example: Imagine a treasure hunt!
In this treasure hunt, we get some clues to reach the treasure. Each clue has two things written on it, first is the next clue and a hint to find it. It’s a linear process in which we can’t jump to the last clue right away. We have to go from the first to the next step by step to reach the treasure!
Do you know that’s how a linked list works actually? Yes, each clue is like a node and hint is your data. The next clue’s address is like a link to the next node. So, you can consider linked list data structure as a chain of connected clues. These clues are placed on random places not side by side like ice-tray.
So, in simple terms, a linked list is like a chain of connected clues. In it, we have node with some data that point to next node. You can go from the first node to the last one step by step.
3. Stack
Stack is also a linear type of data structure that follows the last in first out principle. It will have only one pointer which will be pointing on the topmost element of the stack.
4. Queues
Queues is again a linear data structure but it contains two pointers one on the front pointer and another one at the rear pointer. Here, the front pointer has the address of the last element of the queue. Two of the main methods used here are enqueue and dequeue.
There are many basic operations of Queue data structure like Enqueue, Dequeue, isEmpty, isFull, peek, etc.
5. Trees
Trees are the non-linear data structure. In this type, nodes are connected by edges. Each node contains the data and it is further connected to other child nodes.
There are different types of trees in DSA like Binary Tree, AVL Tree, Balanced Tree, Binary Search Tree, Red Black Tree, etc.
6. Graphs
Graph is the most common data structure and it contains a finite number of nodes and edges. We generally represent graphics as a network diagram. We see connected objects through directed or undirected paths.
7. Hash tables
Hash tables, also known as hash mapping in which we store data in key-value pairs. This type of work quickly and saves a lot of time in finding, inserting, or even deleting data.
Hash tables are like a dictionary in which we search for a word and find its meaning. That word is key and its meaning is its value in Hash tables. It uses a hash function to find the stored values quickly.
Example: We can store a student’s grade using their name:
let studentGrades = {
"Radha": "A",
Aryan": "B",
"Palak": "A+"
};
Here, “Radha” is the key and “A” is the value. In this structure, we use a hash function to turn “Radha” into a number like 01 and puts “A” in the 1st position of the table.
8. Heap table
Last but not least, we have Heap table which is a binary tree-based data structure. It satisfies two properties: Max-Heap and Min-Heap.
In, Max-Heap parent node is always greater or equal to its child nodes. And in Min-Heap, parent node is always less than or equal to its child nodes.
Let’s understand it with an example of a pyramid of blocks in which we have to follow following rules:
- If we have to follow Max-Heap then put the biggest block always on top.
- If we have to follow Min-Heap then we need to put the smallest block on top.
Here is an real example:
function minHeapify(heap, index) {
var left = index * 2;
var right = (index * 2) + 1;
var smallest = index;
if ((heap.length > left) && (heap[smallest] > heap[left])) {
smallest = left
}
if ((heap.length > right) && (heap[smallest] > heap[right]))
smallest = right
if (smallest != index) {
var tmp = heap[smallest]
heap[smallest] = heap[index]
heap[index] = tmp
minHeapify(heap, smallest)
}
return heap;
}
function convertMax(maxHeap) {
for (var i = Math.floor((maxHeap.length) / 2); i > -1; i--)
maxHeap = minHeapify(maxHeap, i)
return maxHeap
}
var maxHeap = [9,4,7,1,-2,6,5]
console.log(convertMax(maxHeap)) ;
So, that’s all about some of the most used data structure techniques in JavaScript. If you want to learn more about such concept, then you must plan for our programs like: JavaScript Master, JavaScript Master Plus and JavaScript Master Plus+.
There is a lot to learn in this field. So, readers keep going and learning.
