Enqueue Using Linked List in DSA Javascript - Execution Trace

Concept Flow - Enqueue Using Linked List

Create new node with value

↓

Is queue empty?

Yes→Set head and tail to new node

No↓

Set tail.next to new node

↓

Update tail to new node

↓

Done

This flow shows how a new node is added at the end of the linked list representing the queue.

Execution Sample

DSA Javascript

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class Queue {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  enqueue(value) {
    const newNode = new Node(value);
    if (!this.tail) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      this.tail = newNode;
    }
  }
}

This code adds a new value to the end of the queue using a linked list.

Execution Table

Step	Operation	Nodes in List	Pointer Changes	Visual State
1	Enqueue 10 (queue empty)	10	head -> 10, tail -> 10	10 -> null
2	Enqueue 20	10 -> 20	tail.next -> 20, tail -> 20	10 -> 20 -> null
3	Enqueue 30	10 -> 20 -> 30	tail.next -> 30, tail -> 30	10 -> 20 -> 30 -> null
4	Exit	10 -> 20 -> 30	No change	10 -> 20 -> 30 -> null

💡 All enqueue operations completed, queue updated with new nodes at tail.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
head	null	Node(10)	Node(10)	Node(10)	Node(10)
tail	null	Node(10)	Node(20)	Node(30)	Node(30)
List Size	0	1	2	3	3

Key Moments - 3 Insights

Why do we check if the queue is empty before adding a new node?

Because if the queue is empty (tail is null), both head and tail must point to the new node. This is shown in step 1 of the execution_table where head and tail are set to the new node.

Why do we update tail.next before moving tail to the new node?

Updating tail.next links the current last node to the new node, maintaining the chain. Then tail moves to the new node to mark the new end. This is shown in steps 2 and 3 where tail.next changes before tail updates.

What does the visual state '10 -> 20 -> 30 -> null' represent?

It shows the linked list nodes in order from head to tail, ending with null to indicate no further nodes. This helps visualize the queue's current contents after each enqueue.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what does the tail pointer point to?

A Node with value 10

B Node with value 30

C Node with value 20

D null

💡 Hint

Check the 'Pointer Changes' column at step 2 in the execution_table.

At which step does the queue size become 3 according to variable_tracker?

A After Step 1

B After Step 3

C After Step 2

D Start

💡 Hint

Look at the 'List Size' row in variable_tracker.

If the queue was not empty, what operation happens first when enqueueing a new node?

A Set tail.next to new node

B Set head to new node

C Set tail to null

D Set head.next to new node

💡 Hint

Refer to steps 2 and 3 in execution_table under 'Pointer Changes'.

Concept Snapshot

Enqueue adds a new node at the tail of the linked list.
If queue empty: head and tail point to new node.
Else: tail.next points to new node, then tail updates.
Visual state shows nodes linked ending with null.
Maintains FIFO order by adding at tail.

Full Transcript

This lesson shows how to add elements to a queue using a linked list. We create a new node for each value. If the queue is empty, both head and tail point to this new node. Otherwise, the current tail's next pointer links to the new node, and tail moves to it. The visual state after each step shows the linked nodes ending with null. Variables head and tail track the start and end of the queue. The size increases with each enqueue. Key points include checking if the queue is empty before adding and updating pointers in the correct order to keep the list connected.

Practice

1. What does the enqueue operation do in a queue implemented using a linked list?

easy

A. Deletes the entire linked list

B. Removes an element from the front (head) of the linked list

C. Adds a new element at the end (tail) of the linked list

D. Adds a new element at the front (head) of the linked list

Solution

1. Step 1: Understand enqueue operation

   Enqueue means adding an element to the queue.

2. Step 2: Identify position in linked list

   In a linked list queue, new elements are added at the tail (end).

3. Final Answer:

   Adds a new element at the end (tail) of the linked list -> Option C

4. Quick Check:

   Enqueue = add at tail [OK]

Hint: Enqueue always adds at the tail in linked list queue [OK]

Common Mistakes:

• Confusing enqueue with dequeue operation
• Adding new element at the head instead of tail
• Thinking enqueue removes elements

2. Which of the following is the correct way to create a new node for enqueue in JavaScript linked list?

easy

A. const node = { value: val, next: null };

B. const node = new Node(val); node.next = val;

C. const node = { val: value, next: undefined };

D. const node = Node(val, null);

Solution

1. Step 1: Understand node structure

   A node should have a value and a pointer to next (null initially).

2. Step 2: Check syntax correctness

   const node = { value: val, next: null }; correctly creates an object with value and next set to null.

3. Final Answer:

   const node = { value: val, next: null }; -> Option A

4. Quick Check:

   Node = {{value, next:null}} [OK]

Hint: Node must have value and next=null for enqueue [OK]

Common Mistakes:

• Using wrong property names like 'val' instead of 'value'
• Setting next to undefined instead of null
• Calling Node as a function without new keyword

3. What will be the state of the queue after these operations?

enqueue(10); enqueue(20); enqueue(30);

Assuming an empty queue initially, what is the linked list representation?

medium

A. 10 -> 20 -> 30 -> null

B. 30 -> 20 -> 10 -> null

C. null -> 10 -> 20 -> 30

D. 20 -> 10 -> 30 -> null

Solution

1. Step 1: Enqueue 10

   Queue is empty, so 10 becomes head and tail: 10 -> null

2. Step 2: Enqueue 20 and 30

   20 added at tail: 10 -> 20 -> null, then 30 added: 10 -> 20 -> 30 -> null

3. Final Answer:

   10 -> 20 -> 30 -> null -> Option A

4. Quick Check:

   Order preserved, enqueue adds at tail [OK]

Hint: Enqueue adds at tail, order stays same [OK]

Common Mistakes:

• Reversing order of elements
• Confusing head and tail positions
• Assuming enqueue adds at head

4. Consider this enqueue function snippet:

function enqueue(val) {
  const node = { value: val, next: null };
  if (!this.tail) {
    this.head = node;
  }
  this.tail.next = node;
  this.tail = node;
}

What error will occur when enqueue is called on an empty queue?

medium

A. ReferenceError: this is not defined

B. SyntaxError: Unexpected token

C. No error, works fine

D. TypeError: Cannot read property 'next' of null

Solution

1. Step 1: Analyze empty queue condition

   When queue is empty, this.tail is null or undefined.

2. Step 2: Identify error line

   Code tries this.tail.next = node; but this.tail is null, causing TypeError.

3. Final Answer:

   TypeError: Cannot read property 'next' of null -> Option D

4. Quick Check:

   Accessing next on null causes TypeError [OK]

Hint: Check if tail exists before accessing next [OK]

Common Mistakes:

• Ignoring null check for tail
• Assuming no error on empty queue
• Confusing this.head and this.tail usage

5. You want to implement enqueue in a linked list queue that keeps track of both head and tail. Which of these code snippets correctly enqueues a new value val?

hard

A. const node = { value: val, next: null };
this.tail.next = node;
this.tail = node;

B. const node = { value: val, next: null };
if (!this.head) {
this.head = node;
this.tail = node;
} else {
this.tail.next = node;
this.tail = node;
}

C. const node = { value: val, next: this.head };
this.head = node;

D. const node = { value: val, next: null };
this.head.next = node;
this.head = node;

Solution

1. Step 1: Handle empty queue case

   If head is null, both head and tail should point to new node.

2. Step 2: Handle non-empty queue

   Set tail.next to new node and update tail to new node.

3. Final Answer:

   const node = { value: val, next: null }; if (!this.head) { this.head = node; this.tail = node; } else { this.tail.next = node; this.tail = node; } -> Option B

4. Quick Check:

   Check empty and non-empty cases for enqueue [OK]

Hint: Set head and tail on empty, else add at tail.next [OK]

Common Mistakes:

• Not updating tail on empty queue
• Adding new node at head instead of tail
• Forgetting to update tail pointer