Understanding Queues in JavaScript: From Concept to Code

Lesson Overview and Goal

Welcome! Today, we're exploring the concept of Queues in JavaScript, a fundamental data structure that processes elements in a First-In, First-Out (FIFO) order, akin to a line at a food truck. We aim to learn how to implement, analyze, and manipulate queues in JavaScript. Let's dive in!

Imagine you're in line for a roller coaster. The first person in line is always the first to ride. Queues in programming follow this principle, making the queue concept relatively easy to grasp and powerful to use.

Queues can be efficiently implemented in JavaScript using arrays thanks to built-in methods. Take a look at this simple Queue class: JavaScript class Queue {constructor() {this.data = []; // A queue is constructed as an array} enqueue(element) {// The push() method adds an element at the end this.data.push(element);} dequeue() {if(this.isEmpty()) return "Underflow"; // If the queue is empty // The shift() method removes an element from the start return this.data.shift();} isEmpty() {// The length property checks if the queue is empty return !this.data.length;}} class Queue {constructor() {this.data = []; // A queue is constructed as an array} enqueue(element) {// The push() method adds an element at the end this.data.push(element);} dequeue() {if(this.isEmpty()) return "Underflow"; // If the queue is empty // The shift() method removes an element from the start return this.data.shift();} isEmpty() {// The length property checks if the queue is empty return !this.data.length;}} This Queue class offers enqueue and dequeue operations to manage the queue's state.

The enqueue operation adds to the queue's end. Here's how it works: JavaScript let queue = new Queue(); queue.enqueue(1); // 1 is added at the end of the queue queue.enqueue(2); // 2 is now at the end, and 1 moves a step forward queue.enqueue(3); // 3 joins at the end, pushing 2 and 1 further up console.log(queue); // {data: [1, 2, 3]} let queue = new Queue(); queue.enqueue(1); // 1 is added at the end of the queue queue.enqueue(2); // 2 is now at the end, and 1 moves a step forward queue.enqueue(3); // 3 joins at the end, pushing 2 and 1 further up console.log(queue); // {data: [1, 2, 3]} The order of the queue is {data: [1, 2, 3]}, reflecting the FIFO principle.

Consequently, the dequeue operation removes an element from the queue's start: JavaScript let queue = new Queue(); queue.enqueue(1); // 1 is the first to join the queue queue.enqueue(2); queue.enqueue(3); queue.dequeue(); // 1 is removed as it was the first to join console.log(queue); // {data: [2, 3]} let queue = new Queue(); queue.enqueue(1); // 1 is the first to join the queue queue.enqueue(2); queue.enqueue(3); queue.dequeue(); // 1 is removed as it was the first to join console.log(queue); // {data: [2, 3]} Now, the queue reads {data: [2, 3]}, with 1 dequeued.

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal