Zigzag Level Order Traversal in DSA Typescript - Deep Dive

Overview - Zigzag Level Order Traversal

What is it?

Zigzag Level Order Traversal is a way to visit all nodes in a tree level by level, but alternating the direction of traversal at each level. Instead of always going left to right, it switches to right to left on the next level, then back again, creating a zigzag pattern. This helps explore the tree in a more flexible way than simple level order traversal. It is often used to solve problems where direction matters at different depths.

Why it matters

Without zigzag traversal, we only explore trees in one fixed direction per level, which limits how we can analyze or process data that depends on alternating patterns. Zigzag traversal solves this by allowing us to capture the tree's structure in a way that reflects changes in direction, useful in games, UI layouts, or hierarchical data visualization. Without it, some problems would be harder or less intuitive to solve.

Where it fits

Before learning zigzag traversal, you should understand basic tree structures and simple level order traversal using queues. After mastering zigzag traversal, you can explore more complex tree traversals like boundary traversal, vertical order traversal, or depth-first search variations.

Mental Model

Core Idea

Zigzag Level Order Traversal visits tree nodes level by level, switching direction each level to create a zigzag pattern.

Think of it like...

Imagine walking through a library aisle by aisle. On one aisle, you walk from left to right, but on the next aisle, you walk back from right to left, zigzagging through the shelves to cover all books efficiently.

Tree Levels with Zigzag:

Level 0:        1
               /   \
Level 1:     2       3
             <---   --->
Level 2:   4   5   6   7
           ---> <--- ---> <---

Arrows show direction of traversal per level.

Build-Up - 7 Steps

1

Foundation

Understanding Binary Trees

Concept: Learn what a binary tree is and how nodes connect.

A binary tree is a structure where each node has up to two children: left and right. Nodes hold values and connect to children forming levels. The top node is called the root. Traversing means visiting nodes in some order.

Result

You can visualize a tree as layers of nodes connected by branches.

Understanding the tree structure is essential because traversal methods depend on how nodes connect and are arranged.

2

Foundation

Level Order Traversal Basics

Concept: Learn how to visit nodes level by level from left to right.

Level order traversal uses a queue to visit nodes starting from the root, then all nodes at level 1, then level 2, and so on. Nodes are dequeued, their values recorded, and their children enqueued in order.

Result

Visiting nodes in order: 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7

Level order traversal introduces the idea of processing nodes by levels, which zigzag traversal builds upon.

3

Intermediate

Introducing Direction Switching

🤔Before reading on: do you think we can use the same queue approach for zigzag traversal without changes? Commit to yes or no.

Concept: Zigzag traversal alternates direction each level, so we must track direction and reverse node order accordingly.

We keep a flag to know if the current level should be read left-to-right or right-to-left. When collecting nodes for a level, if direction is right-to-left, we reverse the order before adding to the result. This requires careful handling of node insertion and output.

Result

Level 0: [1] Level 1: [3, 2] Level 2: [4, 5, 6, 7]

Knowing when and how to switch direction is key to producing the zigzag pattern and requires more than just a simple queue.

4

Intermediate

Using Two Stacks for Zigzag

🤔Before reading on: do you think using two stacks can simplify direction switching? Commit to yes or no.

Concept: Two stacks can hold nodes of current and next levels, allowing natural reversal of order by popping from stacks.

One stack holds nodes of the current level. When popping nodes, their children are pushed onto the other stack in an order depending on direction. This naturally reverses the traversal direction without explicit reversing.

Result

Stacks alternate roles each level, producing zigzag order efficiently.

Using two stacks leverages their LIFO nature to handle direction changes elegantly without extra reversing steps.

5

Intermediate

Implementing Zigzag in TypeScript

Concept: Write a complete TypeScript function to perform zigzag traversal using a queue and direction flag.

```typescript class TreeNode { val: number; left: TreeNode | null; right: TreeNode | null; constructor(val?: number, left?: TreeNode | null, right?: TreeNode | null) { this.val = val === undefined ? 0 : val; this.left = left === undefined ? null : left; this.right = right === undefined ? null : right; } } function zigzagLevelOrder(root: TreeNode | null): number[][] { if (!root) return []; const result: number[][] = []; const queue: TreeNode[] = [root]; let leftToRight = true; while (queue.length > 0) { const levelSize = queue.length; const levelNodes: number[] = []; for (let i = 0; i < levelSize; i++) { const node = queue.shift()!; if (leftToRight) { levelNodes.push(node.val); } else { levelNodes.unshift(node.val); } if (node.left) queue.push(node.left); if (node.right) queue.push(node.right); } result.push(levelNodes); leftToRight = !leftToRight; } return result; } ```

Result

For tree [1,2,3,4,5,6,7], output is [[1],[3,2],[4,5,6,7]]

Implementing the algorithm solidifies understanding of direction control and queue usage in zigzag traversal.

6

Advanced

Optimizing Space with Deque

🤔Before reading on: do you think using a deque can reduce complexity compared to two stacks? Commit to yes or no.

Concept: A double-ended queue (deque) allows adding/removing nodes from both ends, enabling efficient zigzag traversal with less space overhead.

Using a deque, we can add nodes to the front or back depending on direction, and pop nodes accordingly. This avoids reversing arrays or using two stacks, improving performance and clarity.

Result

Traversal proceeds with O(n) time and O(w) space, where w is max width of tree.

Using a deque leverages data structure properties to optimize traversal, showing how choice of structure impacts algorithm efficiency.

7

Expert

Handling Large Trees and Edge Cases

🤔Before reading on: do you think zigzag traversal changes for unbalanced or very deep trees? Commit to yes or no.

Concept: Zigzag traversal must handle trees with uneven levels, null nodes, and large depth without performance loss or errors.

In large or unbalanced trees, the queue or stacks may grow large. Careful null checks prevent errors. Tail recursion or iterative approaches avoid stack overflow. Also, memory usage can be optimized by processing levels on the fly without storing all nodes.

Result

Algorithm remains correct and efficient even for skewed or large trees.

Understanding edge cases and performance constraints prepares you for real-world scenarios where trees are not perfect or small.

Under the Hood

Zigzag traversal works by visiting nodes level by level, but alternates the order of node values collected per level. Internally, it uses a queue or stacks to hold nodes of the current level. The direction flag controls whether node values are appended normally or reversed. Using two stacks exploits their last-in-first-out behavior to naturally reverse traversal order without extra operations. The algorithm processes each node exactly once, ensuring O(n) time complexity.

Why designed this way?

The design balances simplicity and efficiency. Using a queue alone requires reversing arrays or inserting at the front, which can be costly. Two stacks or a deque provide natural reversal mechanisms. This approach was chosen to avoid extra passes or complex data manipulation, making the algorithm both intuitive and performant.

┌───────────────┐
│    Root Node  │
└──────┬────────┘
       │
┌──────▼───────┐
│ Current Level│
│   (Queue)   │
└──────┬───────┘
       │
┌──────▼───────┐
│ Direction    │
│  Flag (bool) │
└──────┬───────┘
       │
┌──────▼───────┐
│ Collect Nodes│
│  Left->Right  │
│ or Right->Left│
└──────┬───────┘
       │
┌──────▼───────┐
│  Next Level  │
│  (Queue or   │
│  Stacks/Deque)│
└──────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does zigzag traversal always require reversing the entire level array after collecting nodes? Commit yes or no.

Common Belief: People often think zigzag traversal must reverse the collected nodes array after each level.

Reality: Reversing is one way but inefficient. Using two stacks or a deque naturally handles direction without reversing.

Why it matters: Reversing arrays repeatedly adds extra time and space cost, slowing down the algorithm unnecessarily.

Quick: Is zigzag traversal just a fancy name for level order traversal? Commit yes or no.

Common Belief: Some believe zigzag traversal is the same as normal level order traversal.

Reality: Zigzag traversal differs by alternating direction each level, changing the order nodes are processed and output.

Why it matters: Confusing the two leads to wrong answers in problems requiring direction changes.

Quick: Can zigzag traversal be done with depth-first search (DFS) easily? Commit yes or no.

Common Belief: Many think DFS can be used directly for zigzag traversal.

Reality: DFS alone does not naturally produce level order or zigzag patterns; BFS or level tracking is needed.

Why it matters: Using DFS without level tracking complicates the solution and can cause incorrect order.

Quick: Does zigzag traversal always start left to right? Commit yes or no.

Common Belief: People assume zigzag traversal must start left to right at the root level.

Reality: The starting direction can be chosen either way depending on problem requirements.

Why it matters: Assuming fixed start direction limits flexibility and may cause errors in custom traversal needs.

Expert Zone

1

The choice between queue with reversal, two stacks, or deque affects both time and space complexity subtly, impacting performance on large trees.

2

In languages without built-in deque, simulating it efficiently requires careful data structure design to avoid overhead.

3

Zigzag traversal can be adapted to n-ary trees by generalizing child insertion order, but requires more complex direction logic.

When NOT to use

Zigzag traversal is not suitable when only simple level order is needed or when direction does not matter. For very large trees where memory is constrained, streaming or partial traversal methods may be better. Alternatives include standard BFS or DFS depending on problem goals.

Production Patterns

In production, zigzag traversal is used in UI rendering engines to alternate row layouts, in game AI to explore states with alternating priorities, and in hierarchical data visualization to improve readability. It also appears in coding interviews to test understanding of BFS variations.

Connections

Breadth-First Search (BFS)

Zigzag traversal builds on BFS by adding direction control per level.

Understanding BFS is essential because zigzag traversal is a specialized BFS that changes output order.

Deque Data Structure

Zigzag traversal can be optimized using a deque for efficient front and back operations.

Knowing deque operations helps implement zigzag traversal more efficiently than using arrays or stacks alone.

Weaving Patterns in Textile Design

Both involve alternating directions to create a pattern.

Recognizing alternating direction patterns in textiles helps appreciate the logic behind zigzag traversal's direction switches.

Common Pitfalls

#1 Inserting nodes in the wrong order causing incorrect zigzag output.

Wrong approach:

for (let i = 0; i < levelSize; i++) {
const node = queue.shift()!;
levelNodes.push(node.val);
if (node.left) queue.push(node.left);
if (node.right) queue.push(node.right);
}
// Then reverse levelNodes if direction is right-to-left

Correct approach:

for (let i = 0; i < levelSize; i++) {
const node = queue.shift()!;
if (leftToRight) {
levelNodes.push(node.val);
} else {
levelNodes.unshift(node.val);
}
if (node.left) queue.push(node.left);
if (node.right) queue.push(node.right);
}

Root cause:

Not adjusting insertion order per direction leads to wrong node order in output.

#2 Forgetting to toggle direction flag after each level.

Wrong approach:

while (queue.length > 0) {
// process level
// missing leftToRight = !leftToRight;
}

Correct approach:

while (queue.length > 0) {
// process level
leftToRight = !leftToRight;
}

Root cause:

Without toggling, traversal direction never changes, losing zigzag pattern.

#3 Pushing children in wrong order when using two stacks.

Wrong approach:

if (leftToRight) {
stack2.push(node.left);
stack2.push(node.right);
} else {
stack2.push(node.right);
stack2.push(node.left);
}

Correct approach:

if (leftToRight) {
if (node.left) stack2.push(node.left);
if (node.right) stack2.push(node.right);
} else {
if (node.right) stack2.push(node.right);
if (node.left) stack2.push(node.left);
}

Root cause:

Not checking for null children or pushing in wrong order breaks traversal correctness.

Key Takeaways

Zigzag Level Order Traversal visits tree nodes level by level, alternating direction each level to create a zigzag pattern.

It builds on basic level order traversal but requires careful direction tracking and node insertion order.

Using two stacks or a deque can simplify direction switching and improve performance over reversing arrays.

Handling edge cases like unbalanced trees and large depths ensures robustness in real-world applications.

Understanding zigzag traversal deepens your grasp of tree traversal variations and data structure choices.

Practice

1. What is the main idea behind Zigzag Level Order Traversal of a binary tree?

easy

A. Traverse the tree only from right to left at all levels

B. Traverse the tree only from left to right at all levels

C. Traverse each level of the tree alternating between left-to-right and right-to-left order

D. Traverse nodes in random order without level consideration

Solution

1. Step 1: Understand level order traversal

   Normal level order traversal visits nodes level by level from left to right.

2. Step 2: Identify zigzag pattern

   Zigzag traversal alternates direction each level: left-to-right, then right-to-left, and so on.

3. Final Answer:

   Traverse each level of the tree alternating between left-to-right and right-to-left order -> Option C

4. Quick Check:

   Zigzag means alternating directions [OK]

Hint: Remember zigzag means switching direction each level [OK]

Common Mistakes:

• Thinking traversal is always left to right
• Confusing zigzag with normal level order
• Ignoring level-by-level traversal

2. Which of the following TypeScript code snippets correctly initializes a queue for level order traversal?

easy

A. const queue = {}; queue.enqueue(root);

B. const queue = new Set<TreeNode>(); queue.add(root);

C. const queue: TreeNode[] = new TreeNode(); queue.push(root);

D. const queue: TreeNode[] = []; queue.push(root);

Solution

1. Step 1: Identify correct queue initialization

   In TypeScript, an array can be used as a queue with push and shift methods.

2. Step 2: Check each option

   const queue: TreeNode[] = []; queue.push(root); correctly declares an array and pushes root node. Others use wrong types or methods.

3. Final Answer:

   const queue: TreeNode[] = []; queue.push(root); -> Option D

4. Quick Check:

   Array with push is correct queue usage [OK]

Hint: Use array push/shift for queue in TypeScript [OK]

Common Mistakes:

• Using Set instead of queue
• Incorrect object initialization
• Using non-existent enqueue method

3. What is the output of the zigzag level order traversal for the binary tree below?

    1
   / \
  2   3
 / \   \
4   5   6

medium

A. [[1], [3, 2], [4, 5, 6]]

B. [[1], [2, 3], [6, 5, 4]]

C. [[1], [3, 2], [6, 5, 4]]

D. [[1], [2, 3], [4, 5, 6]]

Solution

1. Step 1: Traverse level 0 left to right

   Level 0 has node 1, so output is [1].

2. Step 2: Traverse level 1 right to left

   Level 1 nodes are 2 and 3; reversed order is [3, 2].

3. Step 3: Traverse level 2 left to right

   Level 2 nodes are 4, 5, 6; order is [4, 5, 6].

4. Final Answer:

   [[1], [3, 2], [4, 5, 6]] -> Option A

5. Quick Check:

   Zigzag alternates direction each level [OK]

Hint: Alternate direction each level starting left-to-right [OK]

Common Mistakes:

• Not reversing nodes on odd levels
• Mixing node order at last level
• Confusing left and right children order

4. Consider this TypeScript code snippet for zigzag traversal. What is the bug?

const result: number[][] = [];
const queue: TreeNode[] = [root];
let leftToRight = true;
while (queue.length > 0) {
  const levelSize = queue.length;
  const levelNodes: number[] = [];
  for (let i = 0; i < levelSize; i++) {
    const node = queue.shift()!;
    if (leftToRight) levelNodes.push(node.val);
    else levelNodes.unshift(node.val);
    if (node.left) queue.push(node.left);
    if (node.right) queue.push(node.right);
  }
  result.push(levelNodes);
  // Missing toggle of leftToRight
}

medium

A. Children nodes are pushed in wrong order

B. leftToRight is never toggled, so traversal direction never changes

C. levelNodes.unshift() should be levelNodes.push() always

D. queue.shift() is used instead of queue.pop() causing wrong order

Solution

1. Step 1: Check direction toggle

   The variable leftToRight controls direction but is never changed inside the loop.

2. Step 2: Understand effect of missing toggle

   Without toggling, direction stays same, so zigzag pattern breaks.

3. Final Answer:

   leftToRight is never toggled, so traversal direction never changes -> Option B

4. Quick Check:

   Toggle direction each level for zigzag [OK]

Hint: Toggle direction flag after each level [OK]

Common Mistakes:

• Forgetting to toggle leftToRight
• Using wrong queue methods
• Incorrectly adding nodes to level array

5. Given a binary tree, how would you modify the zigzag level order traversal to return a flat array of node values in zigzag order instead of nested arrays per level?

hard

A. Concatenate each level's nodes to a single array instead of pushing nested arrays

B. Use a stack instead of a queue for traversal

C. Traverse all nodes left to right ignoring zigzag

D. Return only the last level's nodes

Solution

1. Step 1: Understand current output format

   Zigzag traversal usually returns nested arrays, one per level.

2. Step 2: Modify to flat array

   Instead of pushing level arrays, append each level's nodes to a single result array.

3. Step 3: Keep zigzag order

   Maintain alternating direction logic while flattening output.

4. Final Answer:

   Concatenate each level's nodes to a single array instead of pushing nested arrays -> Option A

5. Quick Check:

   Flatten by concatenation, keep zigzag order [OK]

Hint: Append levels to one array instead of nested arrays [OK]

Common Mistakes:

• Changing traversal order incorrectly
• Using stack breaks level order
• Returning only partial nodes