JavaScript Data Structure — Stack, Queue in detail

|Meanwhile, JavaScript achieves a leading position in web technology. So, it is the best time to learn JavaScript and its stuff. After learning the basics concept you have to plan some advanced topics.

Photo by Luke Chesser on Unsplash

Well, Le’ts try to understand some advance data structure concept like Stack & Queue in details.

Why Need Data Structure?

Data is everything. Some expert says, If you have data you maybe lead the world. Imagine tech gain Google, Facebook, Amazon the are actually lead the tech industry. What is the reason? Actually, they have lots of data.

Well, somehow you get lots of data through your startup or something like this. Here, the questions come, How you manage, grooming, or store your data? Actually, in this situation, the Computer Science Expert has invented the data structure concept, and it’s updated day by day. So, it’s a must learning topic if you want to be a programming expert.

Stack

First of all, it’s very important to know, what is Stack? Look at the example, please.

Photo: Google Image

Here some bowls are put together in a stack situation. So, in this state, the last item pushed on the stack will be the first one removed. That’s why ‘Stack’ work with last-in, first-out (LIFO) mechanism. One of the best examples is the back button in web browsers. Each page you view is added to the stack, and when you click back, the current page (the last one added) is popped from the stack.

Photo: Wikipedia

Well, let’s focus on some coding examples. Start with basic Stack. Make a palindrome code, basically, it means reads the same backward as forward like madam, racecar.

Look, we have 3 variables like letters as an empty string, word, and ‘rword’. In this code, we have two for loops. First, one is pushing the word variable in letters array. Now, the value of the letter is [‘m’, ‘a’, ‘d’, ‘a’, ‘m’]. Basically, second for loop work with the reverse the word with ‘rword’ variable by the pop method. Last, of all, we just conditional checked — is it palindrome or not? Now have a look with a deeper stack example.

Let’s make this stack with JavaScript code. Well, we have to create a function, and inside a function has push, pop, size, peek method to execute our Stack.

let Stack = function() {
    this.count = 0;
    this.storage = {};
}

This ‘Stack’ function body has two local variables like count & storage. Count help to traverse our stack and storage helps us to store data in the stack. Let’s make a push function in the ‘Stack’ function body.

// Adds value to the end of the stack
this.push = function(value) {
    this.storage[this.count] = value;
    this.count++;
}

‘Push’ function adds value to the end of the stack. After add value to the stack the count++ indicates that I am ready to store the next stack.

// Removes and returns the value at the end of the stack
this.pop = function(){
    if(this.count === 0){
    return undefined;
}
this.count--
let result = this.storage[this.count];
delete this.storage[this.count];
console.log(result);
return result;
}

Initially, when the stack length is ‘0’ then it returns ‘undefined’. Otherwise, it’s going the next step to remove the last element of the stack.

this.size = function() {
    return this.count;
}
// Returns the value at the end of the stack
this.peek = function() {
    return this.storage[this.count -1];
}

These two methods are as simple as that. The first one is the total size of the stack, and the second one returns the value at the end of the stack. So, the final code is,

Queue

Suspense here …

No more discussion today, A brief explanation coming later on ‘Queue’ data structure. Till then, Happy Coding.