How Javascript Stack Works

Javascript comes with bunch of data structures and one of them is Javascript Stack.

In essence, Javascript Stack is a list structure which follows LIFO (Last-In-First-Out) model in winding (collecting data) and unwinding (displaying data).

So anything in the stack that goes last, comes out first.

To better understand the concept, think of the stack or pile of books.

Javascript Stack - Book Stack Example

In order to pick a book from the end of the stack, you may need to remove books from the top all the way to the bottom.

Similarly, the last book in the stack was the first to become part of that stack whereas the book at the top was the last to go in.

I think that’s simple enough to understand.

So the Javascript stack creates a sequential order of the events or data in its memory.

Example of Stacking in Computers

Just to fully grasp the concept let’s review an example.

Have you ever pressed CTRL+Z while working on any MS-Word or MS-Excel or even simple text file?

What happens when you do it?

Your last activity is simply undone and everything returns to a state as they were before the last action you performed.

How does this happen? Simple, all the programs mentioned above are stacking the information of the events caused by you.

As soon as you hit CTRL+Z, the last action is undone and the event which was in the list before your last event is displayed.

Same is the case with Javascript Stack.

Now, the question is that can you access javascript stack to retrieve the information?

The answer is YES. For this to happen, you need to know the basic functions to access Javascript Stack.

 

Basic Functions to Access Javascript Stack

Following are the basic functions available to access/alter/edit or even retrieve information from the stack.

  1. push(): for “pushing” or placing data at the end (or at the very top) of the stack
  2. pop(): for removing the top most data (or last piece of information) from the stack
  3. shift(): for removing the bottom most element (or very first piece of information) from top of the stack
  4. length() or size(): to determine the number of elements (or the size) of the stack.

Have a look at the following code as we have played around withe the Javascript functions described above.

 

Let’s Resolve a Problem Using Javascript Stack’s LIFO Feature

How about we put some code into action just to see how the LIFO feature of Javascript Stack can come in handy?

Ok then.

Most likely, the problem that many developers solve in order to get to know the Javascript Stack and how it winds and unwinds is the “Palindrome” problem.

What is a Palindrome

A Palindrome is a word or phrase, which spells the same (ignoring spaces) from right to left or left to right or backward and forward.

For e.g. the word, BOB is a palindrome as does not matter you start reading the word from right to left or left to right.

Similarly, if we were to talk about a complete phrase, “Never odd or even” can be a good example of a palindrome.

Remember, the spaces don’t matter.

Identifying Palindrome Using Javascript Program.

So let’s write a javascript program which reads a phrase or a word, and then displays a message if a word is a palindrome or not.

 

Logic of the Javascript program

  1. Take the word from the user in a variable
  2. Convert it into an array (or stack it)
  3. Now loop through the stack and pop every letter from the array to the new variable.
  4. Once done, compare the new variable with the variable in point 1 and then display the message based on the result.

That’s our simple logic. Now, let’s implement it.

 

Above is the very basic example of how the Javascript Stack “winds” and takes in and display the information in the LIFO order.

Note that the above is a very basic program of figuring out palindrome as it does not strip and spaces, numeric characters and/or punctuation and the reason behind it is that writing an impeccable program to identify palindrome was never the objective of the article.

However, I would encourage you to go ahead and write your own and much more “robust” program and see how much water are you in.

Once done, do share your experience in the comment section.

Note: We have used the Javascript split() function in the above program. In case you guys need to know about this function, here’s the link to understand how Javascript Split function works
Please follow and like us:

One thought on “How Javascript Stack Works

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign up to our newsletter!