---
title: "Describe how to implement a stack and a queue in JavaScript using arrays"  
description: "A stack is a Last In, First Out (LIFO) data structure. The most recently added element is the first one to be removed."  
author: "Ravi Vishwakarma"  
published: 2024-06-17  
updated: 2024-06-17  
canonical: https://www.mindstick.com/blog/304376/describe-how-to-implement-a-stack-and-a-queue-in-javascript-using-arrays  
category: "javascript"  
tags: ["web development", "javascript", "front-end development"]  
reading_time: 4 minutes  

---

# Describe how to implement a stack and a queue in JavaScript using arrays

Implementing a **stack** and a **queue** in [**JavaScript using arrays**](https://www.mindstick.com/articles/12348/arrays-in-javascript-are-just-like-books-and-objects-are-like-newspapers) is straightforward due to the built-in [array methods](https://www.mindstick.com/interview/23453/array-methods-function-in-python) that align well with the [principles](https://www.mindstick.com/interview/34041/understanding-solid-principles-in-object-oriented-design) of these [data structures](https://www.mindstick.com/blog/301312/data-structures-and-their-applications).

#### Stack

A stack is a **Last In, First Out (LIFO) [data structure](https://www.mindstick.com/blog/11221/simple-way-to-learn-dynamic-data-structure-in-c-language)**. The most [recently added](https://answers.mindstick.com/qa/97987/how-many-wetlands-in-india-were-recently-added-to-the-ramsar-site-list) element is the first one to be removed. You can implement a stack using an array with the following [operations](https://www.mindstick.com/blog/304985/how-does-devops-bridge-the-gap-between-development-and-operations-teams-like-git):

![Describe how to implement a stack and a queue in JavaScript using arrays](https://www.mindstick.com/blogs/808b7500-1b41-4aa1-a473-ffe74e32bcc4/images/44dc3352-a912-4ee6-bed2-83a4e5ecb622.png)

1. **push**: Add an element to the top of the stack.
2. **pop**: Remove the element from the top of the stack.
3. **peek**: Get the element at the top of the stack without removing it.
4. **isEmpty**: [Check if](https://www.mindstick.com/forum/12878/how-to-check-if-an-asp-dot-net-file-upload-control-has-a-file-in-jquery) the stack is empty.
5. **size**: Get the number of elements in the stack.

```javascript
class Stack {
    constructor() {
        // Initialize an empty array to store the elements of the stack
        this.items = [];
    }

    // Return the number of elements in the stack
    size() {
        return this.items.length;
    }

    // Check if the stack is empty
    isEmpty() {
        return this.size() === 0;
    }

    // Return the element at the top of the stack without removing it
    peek() {
        if (this.isEmpty()) {
            return "Stack is empty";
        }
        return this.items[this.size() - 1];
    }

    // Add an element to the top of the stack
    push(element) {
        this.items.push(element);
    }

    // Remove and return the element from the top of the stack
    pop() {
        if (this.isEmpty()) {
            return "Stack is empty";
        }
        return this.items.pop();
    }

    // Print the elements of the stack
    print() {
        console.log(this.items.toString());
    }
}

// Example usage:
const stack = new Stack();
stack.push(10); // Add 10 to the stack
stack.push(20); // Add 20 to the stack
stack.push(30); // Add 30 to the stack
console.log(stack.pop());  // Remove and return the top element (30)
console.log(stack.peek()); // Return the top element without removing it (20)
console.log(stack.isEmpty()); // Check if the stack is empty (false)
console.log(stack.size()); // Get the number of elements in the stack (2)
stack.print(); // Print the elements of the stack (10,20)
```

#### \
Queue

A queue is a **First In, First Out (FIFO) data structure.** The first element added is the first one to be removed. You can implement a queue using an array with the following operations:

![Describe how to implement a stack and a queue in JavaScript using arrays](https://www.mindstick.com/blogs/808b7500-1b41-4aa1-a473-ffe74e32bcc4/images/0db29a05-ccce-43a7-b74f-3d108179fd23.png)

1. **enqueue**: Add an element to the end of the queue.
2. **dequeue**: Remove the element from the front of the queue.
3. **front**: Get the element at the front of the queue without removing it.
4. **isEmpty**: Check if the queue is empty.
5. **size**: Get the number of elements in the queue.

```javascript
class Queue {
    constructor() {
        // Initialize an empty array to store the elements of the queue
        this.items = [];
    }

    // Return the number of elements in the queue
    size() {
        return this.items.length;
    }

    // Check if the queue is empty
    isEmpty() {
        return this.size() === 0;
    }

    // Return the element at the front of the queue without removing it
    front() {
        if (this.isEmpty()) {
            return "Queue is empty";
        }
        return this.items[0];
    }

    // Add an element to the end of the queue
    enqueue(element) {
        this.items.push(element);
    }

    // Remove and return the element from the front of the queue
    dequeue() {
        if (this.isEmpty()) {
            return "Queue is empty";
        }
        return this.items.shift();
    }

    // Print the elements of the queue
    print() {
        console.log(this.items.toString());
    }
}

// Example usage:
const queue = new Queue();
queue.enqueue(10); // Add 10 to the queue
queue.enqueue(20); // Add 20 to the queue
queue.enqueue(30); // Add 30 to the queue
console.log(queue.dequeue());  // Remove and return the front element (10)
console.log(queue.front()); // Return the front element without removing it (20)
console.log(queue.isEmpty()); // Check if the queue is empty (false)
console.log(queue.size()); // Get the number of elements in the queue (2)
queue.print(); // Print the elements of the queue (20,30)
```

**Note.**\
**Stack:** Use **push** and **pop** for LIFO behavior.\
**Queue:** Use **push** and **shift** for FIFO behavior.\

## Read also:

[**What is the difference between null and undefined in JavaScript?**](https://www.mindstick.com/interview/33912/what-is-the-difference-between-null-and-undefined-in-javascript)

[**What is the purpose of async and await in JavaScript? Provide an example.**](https://www.mindstick.com/interview/33911/what-is-the-purpose-of-async-and-await-in-javascript-provide-an-example)

---

Original Source: https://www.mindstick.com/blog/304376/describe-how-to-implement-a-stack-and-a-queue-in-javascript-using-arrays

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.