Double Ended Queue Deque in DSA Javascript - Build from Scratch

Double Ended Queue (Deque) in JavaScript

📖 Scenario: Imagine you are managing a line of people waiting for a ride at an amusement park. Sometimes people join the line at the front, sometimes at the back. Also, people can leave from either end. This line is like a Double Ended Queue, or Deque.

🎯 Goal: You will create a simple Deque using a JavaScript array. You will add people to the front and back, remove people from both ends, and finally show the current line.

📋 What You'll Learn

Create an empty array called deque to represent the line.

Create a variable called peopleToAdd with the array ["Alice", "Bob", "Charlie"].

Add "Alice" to the front and "Charlie" to the back of deque.

Remove one person from the front and one from the back of deque.

Print the final state of deque.

💡 Why This Matters

🌍 Real World

Deques are used in real life to manage lines where people can join or leave from both ends, like waiting lines or task scheduling.

💼 Career

Understanding deques helps in programming tasks that require flexible data structures, such as undo-redo features, task scheduling, and buffering data streams.

1

Create the empty deque

Create an empty array called deque to represent the line.

DSA Javascript

# Create an empty array called deque
# Your code here

Hint

Use const deque = []; to create an empty array.

2

Add people to add

Create a variable called peopleToAdd and set it to the array ["Alice", "Bob", "Charlie"].

DSA Javascript

const deque = [];
# Create peopleToAdd array with "Alice", "Bob", "Charlie"
# Your code here

Hint

Use const peopleToAdd = ["Alice", "Bob", "Charlie"]; to create the array.

3

Add and remove people from deque

Add "Alice" to the front of deque using unshift and "Charlie" to the back using push. Then remove one person from the front using shift and one from the back using pop.

DSA Javascript

const deque = [];
const peopleToAdd = ["Alice", "Bob", "Charlie"];
# Add and remove people from deque
# Your code here

Hint

Use unshift to add to front, push to add to back, shift to remove from front, and pop to remove from back.

4

Print the final deque

Print the current state of deque using console.log(deque).

DSA Javascript

const deque = [];
const peopleToAdd = ["Alice", "Bob", "Charlie"];
deque.unshift(peopleToAdd[0]);
deque.push(peopleToAdd[2]);
deque.shift();
deque.pop();
# Print the deque
# Your code here

Hint

Use console.log(deque) to print the array.

Practice

1. What is a Double Ended Queue (Deque)?

easy

A. A stack where elements are added and removed only from the top.

B. A queue where elements can only be added at the rear and removed from the front.

C. A data structure where elements can be added or removed from both front and rear ends.

D. A list that allows random access to elements by index.

Solution

1. Step 1: Understand the definition of Deque

   A Deque allows insertion and deletion at both ends, unlike a queue or stack which restrict operations to one end.

2. Step 2: Compare with other data structures

   Queue allows operations only at front and rear separately; stack only at one end; list allows random access but not double-ended insertion/removal.

3. Final Answer:

   A data structure where elements can be added or removed from both front and rear ends. -> Option C

4. Quick Check:

   Deque = double-ended queue [OK]

Hint: Deque means double-ended queue, both ends usable [OK]

Common Mistakes:

• Confusing deque with stack or simple queue
• Thinking deque allows random access by index
• Assuming deque operations only at one end

2. Which of the following is the correct way to add an element to the front of a deque named dq in JavaScript using an array?

easy

A. dq.unshift(element);

B. dq.pop(element);

C. dq.push(element);

D. dq.shift(element);

Solution

1. Step 1: Identify array methods for front insertion

   In JavaScript, unshift() adds an element to the start (front) of an array.

2. Step 2: Check other methods

   push() adds to the end, pop() removes from end, shift() removes from front.

3. Final Answer:

   dq.unshift(element); -> Option A

4. Quick Check:

   unshift adds front element [OK]

Hint: Use unshift() to add front element in JS array [OK]

Common Mistakes:

• Using push() instead of unshift() for front insertion
• Confusing pop() and shift() as insertion methods
• Passing argument to pop() or shift() which don't take any

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

const dq = [];
dq.push(10);
dq.unshift(20);
dq.push(30);
dq.shift();
console.log(dq);

medium

A. [10, 30]

B. [20, 10, 30]

C. [20, 30]

D. [10, 20, 30]

Solution

1. Step 1: Trace each operation on the deque

   Start with empty array [].
   push(10) => [10]
   unshift(20) => [20, 10]
   push(30) => [20, 10, 30]
   shift() removes front element 20 => [10, 30]

2. Step 2: Final state of dq

   After all operations, dq contains [10, 30].

3. Final Answer:

   [10, 30] -> Option A

4. Quick Check:

   After shift(), front 20 removed, left [10, 30] [OK]

Hint: Track each push/unshift/shift step carefully [OK]

Common Mistakes:

• Forgetting shift() removes front element
• Mixing order of push and unshift effects
• Assuming shift() removes last element

4. Identify the error in the following code snippet that tries to remove an element from the rear of a deque implemented as an array named dq:

dq.removeLast();

medium

A. dq.pop() should be used instead of removeLast().

B. removeLast() is not a valid JavaScript array method.

C. removeLast() requires an argument to specify the element.

D. dq should be a linked list to use removeLast().

Solution

1. Step 1: Check JavaScript array methods for removing last element

   JavaScript arrays do not have a method named removeLast(). The correct method to remove the last element is pop().

2. Step 2: Analyze other options

   Linked list is unrelated here; removeLast() does not take arguments; pop() is the correct method.

3. Final Answer:

   removeLast() is not a valid JavaScript array method. -> Option B

4. Quick Check:

   pop() removes last element, removeLast() invalid [OK]

Hint: Use pop() to remove last element in JS array [OK]

Common Mistakes:

• Assuming removeLast() exists in JS arrays
• Trying to pass arguments to pop() or removeLast()
• Confusing linked list methods with array methods

5. You want to implement a deque that supports the following operations efficiently: addFront, addRear, removeFront, removeRear. Which data structure is best suited for this and why?

hard

A. Array, because it allows fast insertion and deletion at both ends.

B. Stack, because it supports adding and removing elements efficiently.

C. Singly linked list, because it allows fast insertion and deletion at both ends.

D. Doubly linked list, because it allows fast insertion and deletion at both ends without shifting elements.

Solution

1. Step 1: Analyze operation requirements

   We need fast insertion and deletion at both front and rear ends.

2. Step 2: Compare data structures

   Array requires shifting elements for front operations, making it inefficient.
   Singly linked list allows fast insertion/removal only at one end efficiently.
   Doubly linked list allows fast insertion/removal at both ends without shifting.
   Stack supports operations only at one end.

3. Final Answer:

   Doubly linked list, because it allows fast insertion and deletion at both ends without shifting elements. -> Option D

4. Quick Check:

   Doubly linked list = best for deque operations [OK]

Hint: Use doubly linked list for efficient double-ended ops [OK]

Common Mistakes:

• Choosing array ignoring shifting cost
• Assuming singly linked list supports both ends efficiently
• Confusing stack with deque