How to implement Queue in Javascript?

The main principle of queue datastructure is FIFO (First in First Out). If we compare with real life queue example, people standing in a queue are nodes. Queue implementation can be done in two ways: using array and using object.

Implement Queue using array:

First we create an array named queue.

Second we push some elements using push()

Third we remove elements using shift()

Fourth to check if the queue is empty we use queue.length and see whether empty or not

// Initializing queue array.
var queue = [];

// Inserting vales into the queue.
queue.push(1);
queue.push(2);
queue.push(3);
queue.push(4);
queue.push(5);

console.log("The current queue is: ", queue);

// Removing element form queue using array method: shift()
var removed_element = queue.shift();
console.log("Removed element is: ", removed_element);

console.log("The current queue is: ", queue);

// We can check the if the queue is empty or not using the array.length method.
if (queue.length > 0) {
  console.log("The Queue is not empty!");
} else {
  console.log("The Queue is empty!");
}
Output:
queue using arrays

Using objects:

Here we will create a class node.

class Node {
    constructor(value) {
        this.value = value;
        this.next = null;
    }
}
This class has 2 parameters:
  • this.value – the value which node stores
  • this.next – the pointer to next node in queue and initially it is assigned to null as there is no nodes in queue

Now we need to create another class to store all the nodes and perform queue operations.

class Queue {
    constructor() {
        this.head = null;
        this.tail = null;
        this.length = 0;
    }
}
This class has 3 properties:
  • this.head – pointer to first node
  • this.tail -pointer to last node
  • this.length – number of nodes in queue
Methods of a queue:
  • enqueue() – To add elements at rear end of the queue
  • dequeue() – To remove elements from front end of the queue
  • peek() – To get the front element without removing it.
  • isEmpty() – To check whether an element is present in the queue or not.
  • print()  – To print the elements in the queue
  • getLength() – Returns the number of nodes in a queue.
class Node {
    constructor(value) {
        this.value = value;
        this.next = null;
    }
}

class Queue {
    constructor() {
        this.head = null;
        this.tail = null;
        this.length = 0;
    }

    enqueue(value) {
        const node = new Node(value);

        if (this.head) {
            this.tail.next = node;
            this.tail = node;
        } else {
            this.head = node;
            this.tail = node
        }

        this.length++;
    }

    dequeue() {
        const current = this.head;
        this.head = this.head.next;
        this.length--;

        return current.value;
    }

    isEmpty() {
        return this.length === 0;
    }

    peek() {
        return this.head.value;
    }

    getLength() {
        return this.length;
    }

    print() {
        let current = this.head;

        while(current) {
            console.log(current.value);
            current = current.next;
        }
    }
}

const queue = new Queue();
console.log('is empty?', queue.isEmpty())
queue.enqueue(12)
queue.enqueue(24)
queue.enqueue(36)
queue.enqueue(48)
queue.enqueue(60)
console.log('Queue:')
queue.print()
console.log('Remove 2 elements')
queue.dequeue()
queue.dequeue()
console.log('Queue:');  queue.print()
console.log('is empty?', queue.isEmpty())
console.log('Length',    queue.getLength())
console.log('Head', queue.peek())
Output:

To know more about the data structures in javascript click here!

PyScript: Python in Browser

What is PyScript?

PyScript is a framework that allows users to create Python applications in browser by using Python in standard HTML. PyScript aims to provide users first class programming language experience by providing consistent styling rules, more expressive and easier to learn. Anaconda’s CEO Peter Wang announced this new technology at PyCon US 2022.

Core components:
  • Python in browser
  • Python ecosystem: Runing many popular modules of python in browser.
  • Environment management: Allow users to manage which package and files to include.
  • Visual Application Development: No need to worry about deployment as everything happens in web browser.
  • Python with Javascript: Bidirectional communication between python and javascript.
  • Flexible framework.
How does it work?

             PyScript is built on Pyodide. Pyodide is a port of CPython to WebAssembly / Emscripten. Pyodide makes it possible to install and run Python packages in the browser with micropip. Web assembly is a technology that makes it possible to write websites in Python. It uses a human readable .wat text format language, which then gets converted to a binary.wasm format that browsers can run.

Aim:
  • Offer clean and simple API
  • Support standard HTML
  • Extend HTML to read custom components that are opinionated and reliable.
  • Provide a pluggable and extensible components system.
PyScript Techstack:

PyScript is an experimental project, very alpha and under heavy development. Javascript won’t die because of PyScript. Only it’s popularity may decrease as it relates to web development. The Project is developed by Anaconda.

In the next article, I will let you know about running python in HTML with hello world program example and attach the link below.

How to run python in HTML?

References:
  1. https://anaconda.cloud/pyscript-python-in-the-browser
  2. https://pyscript.net/