Queue Concept and FIFO Principle in DSA Typescript - Execution Trace

Concept Flow - Queue Concept and FIFO Principle

Start

↓

Enqueue: Add item at rear

↓

Queue state updated

↓

Dequeue: Remove item from front

↓

Queue state updated

↓

Repeat enqueue/dequeue as needed

↓

End

The queue adds items at the rear and removes items from the front, following the FIFO order.

Execution Sample

DSA Typescript

enqueue(10)
enqueue(20)
dequeue()
enqueue(30)
dequeue()

This code adds 10 and 20 to the queue, removes one item, adds 30, then removes another item.

Execution Table

Step	Operation	Nodes in Queue	Pointer Changes	Visual State
1	enqueue(10)	10	rear -> 10, front -> 10	10 -> null
2	enqueue(20)	10 -> 20	rear -> 20, front -> 10	10 -> 20 -> null
3	dequeue()	20	front -> 20	20 -> null
4	enqueue(30)	20 -> 30	rear -> 30, front -> 20	20 -> 30 -> null
5	dequeue()	30	front -> 30	30 -> null

💡 Queue is empty after last dequeue, no more elements to remove.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
front	null	10	10	20	20	30	null
rear	null	10	20	20	30	30	null
queue size	0	1	2	1	2	1	0

Key Moments - 3 Insights

Why does dequeue remove from the front, not the rear?

Because the queue follows FIFO, the first item added (front) must be removed first, as shown in steps 3 and 5 in the execution_table.

What happens when the queue becomes empty after dequeue?

Both front and rear pointers become null, indicating no elements, as shown after the last dequeue operation.

Why does enqueue update the rear pointer?

Because new items are added at the rear, the rear pointer moves to the new node, shown in steps 1, 2, and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the queue state after step 2?

A 10 -> 20 -> null

B 20 -> 10 -> null

C 10 -> null

D 20 -> null

💡 Hint

Check the 'Visual State' column for step 2 in the execution_table.

At which step does the front pointer move from 10 to 20?

A Step 1

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Pointer Changes' column to see when front changes.

If we enqueue(40) after step 5, what will be the new rear pointer?

A 30

B 40

C 20

D null

💡 Hint

Enqueue always updates rear to the new node, as seen in steps 1, 2, and 4.

Concept Snapshot

Queue stores items in order.
Enqueue adds at rear.
Dequeue removes from front.
Follows FIFO: first in, first out.
Pointers track front and rear.
Empty queue has null pointers.

Full Transcript

A queue is a data structure where items are added at the rear and removed from the front. This follows the FIFO principle, meaning the first item added is the first to be removed. The enqueue operation adds a new item at the rear pointer, and the dequeue operation removes the item at the front pointer. When the queue is empty, both pointers are null. The execution steps show how the queue changes after each operation, with the front and rear pointers updating accordingly.

Practice

1. What does the FIFO principle mean in the context of a queue?

easy

A. First In, First Out - the first element added is the first removed

B. First In, First Out - the last element added is the first removed

C. Last In, First Out - the first element added is the last removed

D. Last In, First Out - the last element added is the last removed

Solution

1. Step 1: Understand FIFO meaning

   FIFO means the first element that enters the queue is the first to leave.

2. Step 2: Match FIFO to queue behavior

   Queues follow FIFO, so the first added element is removed first.

3. Final Answer:

   First In, First Out - the first element added is the first removed -> Option A

4. Quick Check:

   FIFO = First In, First Out [OK]

Hint: Remember queue = line; first come, first served [OK]

Common Mistakes:

• Confusing FIFO with LIFO
• Thinking last added is removed first
• Mixing queue with stack behavior

2. Which of the following is the correct TypeScript syntax to create an empty queue using an array?

easy

A. let queue = {};

B. const queue: number[] = [];

C. const queue = new Queue();

D. queue = [];

Solution

1. Step 1: Identify TypeScript array syntax

   To create an empty array of numbers, use const queue: number[] = [];

2. Step 2: Check other options

   const queue = new Queue(); uses a class not defined here, A creates an object, D is missing declaration keyword.

3. Final Answer:

   const queue: number[] = []; -> Option B

4. Quick Check:

   Array declaration with type and empty brackets [OK]

Hint: Use const with type and empty brackets for empty array [OK]

Common Mistakes:

• Using object {} instead of array []
• Missing type annotation in TypeScript
• Omitting declaration keyword (const/let)

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

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

medium

A. []

B. [10, 20, 30]

C. [30]

D. [20, 30]

Solution

1. Step 1: Add elements to queue

   Elements 10, 20, 30 are added to the queue in order.

2. Step 2: Remove first element using shift()

   shift() removes 10, so queue now contains [20, 30].

3. Final Answer:

   [20, 30] -> Option D

4. Quick Check:

   After shift(), queue = [20, 30] [OK]

Hint: shift() removes first element, push() adds last [OK]

Common Mistakes:

• Confusing shift() with pop()
• Expecting original array unchanged
• Thinking push() removes elements

4. Identify the error in this TypeScript queue code:

const queue: number[] = [];
queue.push(5);
queue.push(10);
const removed = queue.pop();
console.log(queue);

medium

A. Using pop() removes last, not first element in queue

B. push() is not valid for arrays

C. queue should be declared as object, not array

D. Missing type annotation for queue

Solution

1. Step 1: Understand queue removal method

   Queue removes elements in FIFO order, so first element should be removed.

2. Step 2: Check method used

   pop() removes last element, which breaks FIFO principle.

3. Final Answer:

   Using pop() removes last, not first element in queue -> Option A

4. Quick Check:

   Queue removal must use shift(), not pop() [OK]

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

Common Mistakes:

• Using pop() instead of shift() for queue
• Thinking push() removes elements
• Confusing array with object declaration

5. You have a queue implemented as an array in TypeScript. You add elements 1, 2, 3, then remove two elements. What will be the state of the queue after these operations?

const queue: number[] = [];
queue.push(1);
queue.push(2);
queue.push(3);
queue.shift();
queue.shift();
console.log(queue);

hard

A. [2, 3]

B. [1, 2, 3]

C. [3]

D. []

Solution

1. Step 1: Add elements to queue

   Elements 1, 2, 3 are added in order: queue = [1, 2, 3]

2. Step 2: Remove two elements using shift()

   First shift() removes 1, second shift() removes 2, leaving [3]

3. Final Answer:

   [3] -> Option C

4. Quick Check:

   After two shifts, queue = [3] [OK]

Hint: Each shift() removes one from front [OK]

Common Mistakes:

• Removing elements with pop() instead of shift()
• Expecting queue to be empty after two removals
• Confusing order of elements after removals