Queue vs Stack When to Use Which in DSA Typescript - Build Both Approaches

Queue vs Stack: When to Use Which

📖 Scenario: Imagine you are managing a line of customers waiting for service at a bank and a pile of books to be read in order.Customers wait in a line where the first person to arrive is the first to be served. Books are stacked so the last book placed on top is the first to be read.

🎯 Goal: You will create two data structures: a queue to represent the line of customers and a stack to represent the pile of books.You will then add items to each and finally display their order to understand how they work differently.

📋 What You'll Learn

Create a queue using an array called customerQueue with these customers in order: 'Alice', 'Bob', 'Charlie'

Create a stack using an array called bookStack with these books in order: 'Book1', 'Book2', 'Book3'

Add a new customer 'Diana' to the queue

Add a new book 'Book4' to the stack

Print the final state of customerQueue showing the order customers will be served (first to last)

Print the final state of bookStack showing the stack contents from bottom to top

💡 Why This Matters

🌍 Real World

Queues are used in real life for lines, like customers waiting for service. Stacks are used for things like undo buttons or managing tasks where the last added is handled first.

💼 Career

Understanding queues and stacks helps in software development for managing tasks, processing data in order, and designing efficient algorithms.

1

Create the initial queue and stack

Create an array called customerQueue with these exact customers in order: 'Alice', 'Bob', 'Charlie'. Also create an array called bookStack with these exact books in order: 'Book1', 'Book2', 'Book3'.

DSA Typescript

# Your code here

Hint

Use square brackets [] to create arrays with the exact items in the order given.

2

Add new items to the queue and stack

Add the customer 'Diana' to the end of the customerQueue array using the push method. Add the book 'Book4' to the top of the bookStack array also using the push method.

DSA Typescript

const customerQueue = ['Alice', 'Bob', 'Charlie'];
const bookStack = ['Book1', 'Book2', 'Book3'];
# Your code here

Hint

Use array.push(item) to add an item to the end of an array.

3

Understand the order of serving and reading

Write a comment explaining that customerQueue follows FIFO (first-in, first-out) where the first customer added is served first, and bookStack follows LIFO (last-in, first-out) where the last book added is read first.

DSA Typescript

const customerQueue = ['Alice', 'Bob', 'Charlie'];
const bookStack = ['Book1', 'Book2', 'Book3'];

customerQueue.push('Diana');
bookStack.push('Book4');

// Your explanation here

Hint

Write two comments starting with // describing FIFO and LIFO for the two arrays.

4

Print the final state of the queue and stack

Print the customerQueue array to show the order customers will be served (first to last). Then print the bookStack array to show the stack contents from bottom to top. Use console.log for both.

DSA Typescript

const customerQueue = ['Alice', 'Bob', 'Charlie'];
const bookStack = ['Book1', 'Book2', 'Book3'];

customerQueue.push('Diana');
bookStack.push('Book4');

// customerQueue is FIFO: first customer added is served first
// bookStack is LIFO: last book added is read first

// Your code here

Hint

Use console.log to print the arrays with descriptive text.

Practice

1. Which data structure should you use when you need to process tasks in the exact order they arrive, like customers waiting in line at a store?

easy

A. Stack

B. Queue

C. Array

D. Tree

Solution

1. Step 1: Understand the order requirement

   Tasks must be processed in the order they arrive, which means first-in, first-out (FIFO).

2. Step 2: Match the data structure to FIFO

   A queue follows FIFO, so it fits the requirement perfectly.

3. Final Answer:

   Queue -> Option B

4. Quick Check:

   FIFO = Queue [OK]

Hint: Use queue for first-in, first-out order [OK]

Common Mistakes:

• Confusing stack (LIFO) with queue (FIFO)
• Choosing array without order guarantees
• Thinking tree fits linear order

2. Which of the following is the correct TypeScript syntax to add an element to the top of a stack implemented as an array named stack?

easy

A. stack.unshift(element);

B. stack.pop(element);

C. stack.shift(element);

D. stack.push(element);

Solution

1. Step 1: Identify stack operation to add element

   Adding to the top of a stack means pushing an element onto it.

2. Step 2: Match with correct array method

   In TypeScript, push() adds an element to the end (top) of the array acting as a stack.

3. Final Answer:

   stack.push(element); -> Option D

4. Quick Check:

   Push adds to stack top [OK]

Hint: Use push() to add on stack top [OK]

Common Mistakes:

• Using pop() which removes instead of adds
• Using shift() or unshift() which affect queue ends
• Confusing push() with unshift()

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

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

medium

A. [3, 2]

B. [1, 2, 3]

C. [2, 3]

D. []

Solution

1. Step 1: Trace queue operations

   Elements 1, 2, 3 are added to the queue using push(). Then shift() removes the first element (1).

2. Step 2: Determine queue state after removal

   After removing 1, the queue contains [2, 3].

3. Final Answer:

   [2, 3] -> Option C

4. Quick Check:

   shift() removes first, queue left with [2, 3] [OK]

Hint: shift() removes front in queue [OK]

Common Mistakes:

• Thinking push adds to front instead of back
• Confusing shift() with pop()
• Expecting stack order instead of queue order

4. The following TypeScript code is intended to implement a stack but has a bug. What is the bug?

const stack: number[] = [];
stack.push(10);
stack.push(20);
const top = stack.shift();
console.log(top);

medium

A. Using shift() instead of pop() to remove top element

B. Using push() instead of unshift() to add element

C. Not initializing the stack array

D. Using console.log incorrectly

Solution

1. Step 1: Identify stack removal method

   Stack removes the top element using pop(), not shift().

2. Step 2: Analyze code's removal method

   The code uses shift(), which removes the first element, breaking stack behavior.

3. Final Answer:

   Using shift() instead of pop() to remove top element -> Option A

4. Quick Check:

   Stack removal = pop(), not shift() [OK]

Hint: Stack removes top with pop(), not shift() [OK]

Common Mistakes:

• Confusing shift() with pop()
• Thinking push() adds to front
• Ignoring array initialization

5. You are designing a system to undo and redo user actions. Which data structure combination is best suited for this, and why?

hard

A. Two stacks: one for undo, one for redo, because stacks allow reversing actions easily

B. Two queues: one for undo, one for redo, because queues maintain order of actions

C. One stack only, because redo is not needed

D. One queue only, because undo and redo are processed in order

Solution

1. Step 1: Understand undo/redo requirements

   Undo and redo require reversing and reapplying actions in last-in, first-out order.

2. Step 2: Match data structures to behavior

   Stacks naturally support LIFO, so using two stacks (undo and redo) allows easy push/pop for these operations.

3. Final Answer:

   Two stacks: one for undo, one for redo, because stacks allow reversing actions easily -> Option A

4. Quick Check:

   Undo/Redo = Two stacks (LIFO) [OK]

Hint: Undo/Redo needs two stacks for LIFO action reversal [OK]

Common Mistakes:

• Using queues which do not reverse order easily
• Ignoring redo functionality
• Using only one data structure