Zigzag Level Order Traversal in DSA Typescript - Build from Scratch

Zigzag Level Order Traversal

📖 Scenario: Imagine you have a family tree represented as a binary tree. You want to visit each generation, but in a zigzag way: first generation from left to right, second from right to left, and so on. This helps you see the family members in a fun, alternating order.

🎯 Goal: Build a TypeScript program that performs a zigzag level order traversal on a binary tree. The program will output the values of nodes level by level, alternating the direction of traversal at each level.

📋 What You'll Learn

Create a binary tree using the given TreeNode class

Use a variable to track the current level number

Implement the zigzag level order traversal using a queue and alternating direction

Print the final traversal result as an array of arrays

💡 Why This Matters

🌍 Real World

Zigzag traversal is useful in scenarios like displaying hierarchical data with alternating directions for better readability, such as organizational charts or family trees.

💼 Career

Understanding tree traversals and queue usage is essential for software engineering roles involving data structures, algorithms, and problem solving.

1

Create the binary tree structure

Create the binary tree nodes using the TreeNode class and build the tree with root value 1, left child 2, right child 3, left child of 2 as 4, and right child of 3 as 5. Assign the root node to a variable called root.

DSA 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);
    }
}

// Create the binary tree nodes and assign to root
// Your code here

Hint

Use the new TreeNode(value, leftChild, rightChild) constructor to build the tree step by step.

2

Add a variable to track the current level

Create a variable called level and set it to 0. This will help track which level we are currently processing in the tree.

DSA 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);
    }
}

const root = new TreeNode(1,
    new TreeNode(2, new TreeNode(4), null),
    new TreeNode(3, null, new TreeNode(5))
);

// Create a variable called level and set it to 0
// Your code here

Hint

Use let level = 0; to create the variable.

3

Implement zigzag level order traversal

Write the core logic to perform zigzag level order traversal. Use a queue called queue initialized with root. Use a while loop that runs while queue.length > 0. Inside the loop, create an array currentLevel to hold node values for the current level. Use a for loop to process all nodes at the current level. Add their children to the queue. If level is odd, reverse currentLevel before adding it to the result array result. Increment level by 1 after each level is processed. Store the final traversal in a variable called result.

DSA 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);
    }
}

const root = new TreeNode(1,
    new TreeNode(2, new TreeNode(4), null),
    new TreeNode(3, null, new TreeNode(5))
);

let level = 0;

// Implement zigzag level order traversal and store in result
// Your code here

Hint

Use a queue to process nodes level by level. Reverse the current level array when the level number is odd.

4

Print the zigzag traversal result

Write a console.log statement to print the result array which contains the zigzag level order traversal of the tree.

DSA 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);
    }
}

const root = new TreeNode(1,
    new TreeNode(2, new TreeNode(4), null),
    new TreeNode(3, null, new TreeNode(5))
);

let level = 0;
const result: number[][] = [];
const queue: TreeNode[] = [];
if (root !== null) {
    queue.push(root);
}

while (queue.length > 0) {
    const levelSize = queue.length;
    const currentLevel: number[] = [];
    for (let i = 0; i < levelSize; i++) {
        const node = queue.shift()!;
        currentLevel.push(node.val);
        if (node.left !== null) queue.push(node.left);
        if (node.right !== null) queue.push(node.right);
    }
    if (level % 2 === 1) {
        currentLevel.reverse();
    }
    result.push(currentLevel);
    level++;
}

// Print the result array
// Your code here

Hint

Use console.log(result); to display the final zigzag traversal.

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