
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
Creating a Stack in Javascript
In this article, we are going to discuss how to create the stack data structure in JavaScript. It is a linear data structure where the push and popping of elements follow the LIFO (last in first out and FILO (first in last out) sequence.
Though Arrays in JavaScript provide all the functionality of a Stack, let us implement our own Stack class. Our class will have the following functions.
- push(element) − Function to push elements on top of the stack.
- pop() − Function that removes an element from the top and returns it.
- peek() − Returns the element on top of the stack.
- isFull() − Checks if we reached the element limit on the stack.
- isEmpty() − checks if the stack is empty.
- clear() − Remove all elements.
- display() − display all contents of the array
Let's start by defining a simple class with a constructor that takes the max size of the stack and a helper function display() that'll help us when we implement the other functions for this class. We have also defined 2 more functions, isFull and isEmpty to check if the stack is full or empty.
The isFull function just checks if the length of the container is equal to or more than maxSize and returns accordingly.
The isEmpty function checks if a size of the container is 0.
These will be helpful when we define other operations. The functions we define from this point onwards will all go inside the Stack class.
Example 1
The following example demonstrates how to create the Stack Data Structure in JavaScript. In this example, we are going to discuss the use of push(), and the pop() methods. We create a stack and add the elements to it and display the stack elements.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Creating Stack Data Structure</title> </head> <body> <script type="text/javascript"> class Stack { constructor() { this.stkArr = []; } // add element to the stack add(element) { return this.stkArr.push(element); } // remove element from the stack remove() { if (this.stkArr.length > 0) { document.write("<br>"); return "The Popped element is : " + this.stkArr.pop(); } } // view the last element peek() { document.write("<br>"); return ( "The Peek element of the stack is : " + this.stkArr[this.stkArr.length - 1] ); } // check if the stack is empty isEmpty() { document.write("<br>"); return this.stkArr.length == 0; } // the size of the stack size() { document.write("<br>"); return "The size of the stack is : " + this.stkArr.length; } display() { if (this.stkArr.length !== 0) { return "The stack elements are : " + this.stkArr + "<br>"; } else { document.write("The Stack is Empty..! <br>"); } } // empty the stack clear() { document.write("
The stack is cleared..!" + "<br>"); this.stkArr = []; } } let stack = new Stack(); stack.add(1); stack.add(2); stack.add(3); stack.add(4); stack.add(5); document.write(stack.display()); document.write(stack.size()); </script> </body> </html>
Example 2
Another example to execute the operations of stack in JavaScript is given as follows −
class Stack { constructor(maxSize) { if (isNaN(maxSize)) { maxSize = 10; } this.maxSize = maxSize; this.container = []; } display() { console.log(this.container); } push(element) { this.container.push(element); } } const obj = new Stack(10); obj.push(10); obj.push(44); obj.push(55); obj.display();
- Related Articles
- Creating a Queue in Javascript
- Creating a Graph in Javascript
- Pushing elements to a Stack in Javascript
- Popping elements from a Stack in Javascript
- Peeking elements from a Stack in Javascript
- Creating a Set using Javascript
- Creating a BinaryTree using Javascript
- Creating a chained operation class in JavaScript
- Stack Data Structure in Javascript
- The Stack Class in Javascript
- Implementation of Stack in JavaScript
- Clearing the elements of a Stack in Javascript
- Creating a Priority Queue using Javascript
- Creating a linked list using Javascript
- Creating a hash table using Javascript
