Queue Concept and FIFO Principle in DSA Javascript - Build from Scratch

Queue Concept and FIFO Principle

📖 Scenario: Imagine a line at a coffee shop where customers wait their turn to order. The first person to join the line is the first to be served. This is called the FIFO (First In, First Out) principle, which is exactly how a queue works in programming.

🎯 Goal: You will create a queue using a JavaScript array, add customers to the queue, remove the first customer served, and then display the current queue to understand how FIFO works.

📋 What You'll Learn

Create an empty array called queue to represent the queue.

Add three customers named exactly 'Alice', 'Bob', and 'Charlie' to the queue in that order.

Create a variable called servedCustomer to hold the customer who is served first.

Remove the first customer from the queue using the FIFO principle and assign it to servedCustomer.

Print the servedCustomer and the current state of the queue.

💡 Why This Matters

🌍 Real World

Queues are used in real life for waiting lines, like at banks, stores, or call centers, where the first person to arrive is served first.

💼 Career

Understanding queues and FIFO is important for software developers working on task scheduling, print jobs, customer service systems, and many other applications.

1

Create an empty queue

Create an empty array called queue to represent the queue.

DSA Javascript

// Your code here

Hint

Use [] to create an empty array and assign it to queue.

2

Add customers to the queue

Add three customers named exactly 'Alice', 'Bob', and 'Charlie' to the queue in that order using the push method.

DSA Javascript

const queue = [];
// Your code here

Hint

Use queue.push('Alice') to add 'Alice' to the end of the queue.

3

Serve the first customer

Create a variable called servedCustomer and assign it the first customer removed from the queue using the shift method.

DSA Javascript

const queue = [];
queue.push('Alice');
queue.push('Bob');
queue.push('Charlie');
// Your code here

Hint

Use queue.shift() to remove the first customer from the queue and assign it to servedCustomer.

4

Print the served customer and current queue

Print the servedCustomer and then print the current state of the queue.

DSA Javascript

const queue = [];
queue.push('Alice');
queue.push('Bob');
queue.push('Charlie');
const servedCustomer = queue.shift();
// Your code here

Hint

Use console.log(servedCustomer) to print the served customer and console.log(queue) to print the remaining queue.

Practice

1. What does FIFO stand for in the context of a queue?

easy

A. First In, First Out

B. First In, Final Out

C. Fast Input, Fast Output

D. First Input, First Output

Solution

1. Step 1: Understand FIFO meaning

   FIFO means the first element added is the first one to be removed.

2. Step 2: Match the acronym

   First In, First Out exactly matches FIFO.

3. Final Answer:

   First In, First Out -> Option A

4. Quick Check:

   FIFO = First In, First Out [OK]

Hint: Remember queue removes in order added, first comes out first [OK]

Common Mistakes:

• Confusing FIFO with LIFO (stack)
• Thinking FIFO means last in first out
• Mixing up acronym words

2. Which of the following is the correct way to add an element 5 to a queue named q in JavaScript using an array?

easy

A. q.unshift(5)

B. q.pop(5)

C. q.shift(5)

D. q.push(5)

Solution

1. Step 1: Understand queue insertion

   In a queue implemented with an array, new elements are added at the end.

2. Step 2: Identify correct method

   Array method push adds element at the end, so q.push(5) is correct.

3. Final Answer:

   q.push(5) -> Option D

4. Quick Check:

   Use push to add at queue end [OK]

Hint: Use push to add, shift to remove in JS queue [OK]

Common Mistakes:

• Using pop to add (pop removes last)
• Using shift to add (shift removes first)
• Using unshift adds at front, not end

3. What will be the output of the following JavaScript code?

const queue = [];
queue.push(10);
queue.push(20);
queue.push(30);
const first = queue.shift();
console.log(queue);

medium

A. [30, 20]

B. [10, 20, 30]

C. [20, 30]

D. [10, 30]

Solution

1. Step 1: Add elements to queue

   Elements 10, 20, 30 are added in order using push, so queue = [10, 20, 30].

2. Step 2: Remove first element

   Using shift removes the first element (10), so queue becomes [20, 30].

3. Final Answer:

   [20, 30] -> Option C

4. Quick Check:

   Shift removes first, queue left with [20, 30] [OK]

Hint: Shift removes first element, push adds at end [OK]

Common Mistakes:

• Thinking pop removes first element
• Confusing order of elements after shift
• Expecting original array unchanged

4. The following code is intended to remove the first element from a queue implemented as an array. What is the error?

const queue = [1, 2, 3];
queue.pop();
console.log(queue);

medium

A. pop() removes the last element, not the first

B. pop() is not a valid array method

C. pop() adds an element instead of removing

D. pop() removes all elements

Solution

1. Step 1: Understand pop() behavior

   pop() removes the last element from an array, not the first.

2. Step 2: Identify correct method for first element removal

   To remove the first element in a queue, shift() should be used instead of pop().

3. Final Answer:

   pop() removes the last element, not the first -> Option A

4. Quick Check:

   pop removes last, shift removes first [OK]

Hint: Use shift() to remove first, pop() removes last [OK]

Common Mistakes:

• Using pop() to remove first element
• Confusing pop() with shift()
• Expecting pop() to remove all elements

5. You have a queue implemented as an array: let q = [];. You perform these operations:

q.push(1);
q.push(2);
q.shift();
q.push(3);
q.shift();
q.push(4);
console.log(q);

What is the final state of the queue?

hard

A. [2, 3, 4]

B. [3, 4]

C. [1, 2, 3, 4]

D. [4]

Solution

1. Step 1: Trace each operation on queue

   Start with empty q = [].
   push(1) -> [1]
   push(2) -> [1, 2]
   shift() removes 1 -> [2]
   push(3) -> [2, 3]
   shift() removes 2 -> [3]
   push(4) -> [3, 4]

2. Step 2: Confirm final queue state

   After all operations, queue contains [3, 4].

3. Final Answer:

   [3, 4] -> Option B

4. Quick Check:

   FIFO order maintained, final queue is [3, 4] [OK]

Hint: Track push adds end, shift removes front step-by-step [OK]

Common Mistakes:

• Not removing elements with shift correctly
• Assuming push adds at front
• Mixing order of elements after shifts