A data structure algorithm is an important concept to understand for anyone. It is very useful for those who want 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.
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 with our specialized courses in web design. These programs are mainly for newcomers who don’t know much about coding and want to become pros in it.
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 JavaScript.
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 programmers.
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 of that tray as an array. Now, each box of the 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 dynamic arrays similar to any other programming language. But the size or data type is not predetermined in JavaScript.
Literal arrays are the easiest way of creating 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
A linked list is a group of nodes, and each node has the data and the address to the next node. It’s a linear type of data structure.
Basic operations we can perform on the linked list are:
- Traversal: It means going through nodes one by one.
- Insertion: In it, we add a new node by making some adjustments.
- Deletion: It means removing a 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, the 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? Yes, each clue is like a node, and the hint is your data. The next clue’s address is like a link to the next node. So, you can consider a linked list data structure as a chain of connected nodes. These clues are placed in random places, not side by side like an ice-tray.
So, in simple terms, a linked list is like a chain of connected clues. In it, we have a node with some data that points to the next node. You can go from the first node to the last one step by step.
class Node{
constructor(value)
{
this.value=value
this.next=null
}
}
class LinkedList{
constructor()
{
this.head=null
}
append(value)
{
let newnode=new Node(value)
if(!this.head)
{
this.head=newnode
return
}
let current=this.head
while(current.next)
{
current=current.next
}
current.next=newnode
}
printList(){
let current=this.head
let result=""
while(current)
{
result+=current.value+'->'
current=current.next
}
console.log(result+'null')
}
}
let list=new LinkedList()
list.append(10)
list.append(20)
list.append(30)
list.printList()3. Stack
A stack is also a linear type of data structure that follows the last-in in first-out principle. It will have only one pointer, which will be pointing to the topmost element of the stack.
Example:
class Stack {
constructor() {
this.items = []; // Array to store stack elements
}
// Add an element to the top of the stack
push(element) {
this.items.push(element);
}
// Remove and return the top element from the stack
pop() {
if (this.isEmpty()) {
return "Stack is empty"; // Handle empty stack case
}
return this.items.pop();
}
// Return the top element without removing it
peek() {
if (this.isEmpty()) {
return "Stack is empty";
}
return this.items[this.items.length - 1];
}
// Check if the stack is empty
isEmpty() {
return this.items.length === 0;
}
// Get the number of elements in the stack
size() {
return this.items.length;
}
// Clear all elements from the stack
clear() {
this.items = [];
}
}4. Queues
Queues are again a linear data structure, but they contain two pointers, one at the front and another at the rear. 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 the Queue data structure, like Enqueue, Dequeue, isEmpty, isFull, peek, etc.
Example:
class Queue {
constructor() {
this.items = [];
}
enqueue(element) {
this.items.push(element);
}
dequeue() {
return this.isEmpty() ? "Queue is empty" : this.items.shift();
}
peek() {
return this.isEmpty() ? "Queue is empty" : this.items[0];
}
isEmpty() {
return this.items.length === 0;
}
size() {
return this.items.length;
}
print() {
console.log(this.items.join(" -> "));
}
}
// Example usage:
const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.print();
console.log(queue.dequeue());
console.log(queue.peek());
console.log(queue.size());5. Trees
Trees are a 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.
Example:
class Node {
constructor(data) {
this.data = data;
this.children = []; // For generic trees
// For binary trees:
// this.left = null;
// this.right = null;
}
}
class Tree {
constructor() {
this.root = null;
}
// Example method for adding a child to a node (generic tree)
addChild(parentNode, childNode) {
if (parentNode) {
parentNode.children.push(childNode);
} else {
console.log("Parent node not found.");
}
}
// Example method for inserting into a BST
// insert(data) { ... }
}6. Graphs
A 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.
Refer to this link to read in detail about the graph data structure. https://www.geeksforgeeks.org/implementation-graph-javascript
7. Hash tables
Hash tables, also known as hash mapping in which we store data in key-value pairs. This type of work is quick 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 put “A” in the 1st position of the table.
8. Heap table
Last but not least, we have the 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 than or equal to its child nodes. And in Min-Heap, the 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 the 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 a 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 a 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.
About Author
Hey, this is Wasim here. I have completed the Web Master Course at ADMEC Multimedia. Now I am successfully working at Mobile Programming as a Software Engineer. There are many related blogs at ADMEC to read. You can explore all the blogs given below.
