Spiral Matrix Traversal in DSA Typescript - Execution Trace

Concept Flow - Spiral Matrix Traversal

Start at top-left corner

↓

Traverse top row left to right

↓

Traverse right column top to bottom

↓

Traverse bottom row right to left

↓

Traverse left column bottom to top

↓

Move boundaries inward

↓

Repeat until all elements visited

We move around the matrix edges in a spiral, shrinking the boundaries after each full round until all elements are visited.

Execution Sample

DSA Typescript

function spiralTraversal(matrix: number[][]): number[] {
  const result: number[] = [];
  let top = 0, bottom = matrix.length - 1;
  let left = 0, right = matrix[0].length - 1;
  while (top <= bottom && left <= right) {
    for (let i = left; i <= right; i++) result.push(matrix[top][i]);
    top++;
    for (let i = top; i <= bottom; i++) result.push(matrix[i][right]);
    right--;
    if (top <= bottom) {
      for (let i = right; i >= left; i--) result.push(matrix[bottom][i]);
      bottom--;
    }
    if (left <= right) {
      for (let i = bottom; i >= top; i--) result.push(matrix[i][left]);
      left++;
    }
  }
  return result;
}

This code collects matrix elements in a spiral order starting from the top-left corner.

Execution Table

Step	Operation	Top	Bottom	Left	Right	Elements Added	Visual State
1	Traverse top row left to right	0	2	0	2	[1, 2, 3]	[[1,2,3],[4,5,6],[7,8,9]] → collected: 1,2,3
2	Move top boundary down	1	2	0	2	[]	Top boundary moved to 1
3	Traverse right column top to bottom	1	2	0	2	[6, 9]	Collected: 1,2,3,6,9
4	Move right boundary left	1	2	0	1	[]	Right boundary moved to 1
5	Traverse bottom row right to left	1	2	0	1	[8, 7]	Collected: 1,2,3,6,9,8,7
6	Move bottom boundary up	1	1	0	1	[]	Bottom boundary moved to 1
7	Traverse left column bottom to top	1	1	0	1	[4]	Collected: 1,2,3,6,9,8,7,4
8	Move left boundary right	1	1	1	1	[]	Left boundary moved to 1
9	Traverse top row left to right	1	1	1	1	[5]	Collected: 1,2,3,6,9,8,7,4,5
10	Move top boundary down	2	1	1	1	[]	Top boundary moved to 2
11	Check condition top <= bottom and left <= right	2	1	1	1	[]	top=2 > bottom=1, loop ends

💡 Loop ends because top boundary (2) is greater than bottom boundary (1)

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	After Step 8	After Step 10	Final
top	0	1	1	1	1	2	2
bottom	2	2	2	1	1	1	1
left	0	0	0	0	1	1	1
right	2	2	1	1	1	1	1
result length	0	3	5	7	8	9	9

Key Moments - 3 Insights

Why do we check 'top <= bottom' before traversing the bottom row?

Because after moving the top boundary down, the top might cross bottom, meaning no rows left to traverse. This prevents adding duplicate rows. See execution_table row 5 and 11.

Why do we move boundaries after each traversal?

Moving boundaries shrinks the matrix edges inward, so we don't revisit elements. For example, after traversing the top row, top moves down (row removed). See execution_table rows 2,4,6,8.

What happens if the matrix has only one row or one column?

The checks 'top <= bottom' and 'left <= right' ensure we don't traverse invalid rows or columns multiple times, avoiding duplicates or errors.

Visual Quiz - 3 Questions

Look at the execution_table at Step 5, which elements were added to the result?

A [8, 7]

B [6, 9]

C [4]

D [5]

💡 Hint

Check the 'Elements Added' column at Step 5 in execution_table.

At which step does the top boundary move down for the second time?

A Step 2

B Step 10

C Step 8

D Step 4

💡 Hint

Look at the 'Operation' and 'Top' columns in execution_table for boundary moves.

If the matrix was 1x3, which condition would stop the loop earliest?

A right < left

B left <= right

C top <= bottom

D bottom < top

💡 Hint

Refer to the exit_note and condition check in execution_table row 11.

Concept Snapshot

Spiral Matrix Traversal:
- Use four boundaries: top, bottom, left, right
- Traverse edges in order: top row, right column, bottom row, left column
- After each edge, move the boundary inward
- Repeat until top > bottom or left > right
- Collect elements in spiral order without repeats

Full Transcript

Spiral Matrix Traversal means visiting all elements of a matrix in a spiral order starting from the top-left corner. We keep track of four boundaries: top, bottom, left, and right. We first move across the top row from left to right, then down the right column, then across the bottom row from right to left, and finally up the left column. After each traversal, we move the respective boundary inward to avoid revisiting elements. We repeat this process until the top boundary crosses the bottom or the left boundary crosses the right, meaning all elements are visited. This method ensures all elements are collected in a spiral without duplicates.

Practice

1. What is the main idea behind Spiral Matrix Traversal?

easy

A. Traverse the matrix in a circular pattern starting from the outer layer moving inward

B. Traverse the matrix row by row from top to bottom

C. Traverse the matrix column by column from left to right

D. Traverse only the diagonal elements of the matrix

Solution

1. Step 1: Understand traversal pattern

   Spiral traversal means moving around the edges of the matrix first, then moving inward layer by layer.

2. Step 2: Compare options

   Only Traverse the matrix in a circular pattern starting from the outer layer moving inward describes this circular, inward movement. Others describe linear or diagonal traversals.

3. Final Answer:

   Traverse the matrix in a circular pattern starting from the outer layer moving inward -> Option A

4. Quick Check:

   Spiral traversal = circular inward movement [OK]

Hint: Think of peeling an onion layer by layer [OK]

Common Mistakes:

• Confusing spiral with row-wise traversal
• Thinking spiral means diagonal only
• Ignoring inward movement after outer layer

2. Which of the following TypeScript code snippets correctly initializes variables for spiral traversal boundaries?

easy

A. let top = -1, bottom = matrix.length - 1, left = -1, right = matrix[0].length - 1;

B. let top = 1, bottom = matrix.length, left = 1, right = matrix[0].length;

C. let top = 0, bottom = matrix.length, left = 0, right = matrix[0].length;

D. let top = 0, bottom = matrix.length - 1, left = 0, right = matrix[0].length - 1;

Solution

1. Step 1: Identify correct boundary initialization

   Top and left start at 0 (first row and column). Bottom and right are last indices, so length - 1.

2. Step 2: Check options

   let top = 0, bottom = matrix.length - 1, left = 0, right = matrix[0].length - 1; correctly sets top=0, bottom=rows-1, left=0, right=cols-1. Others have off-by-one or negative values.

3. Final Answer:

   let top = 0, bottom = matrix.length - 1, left = 0, right = matrix[0].length - 1; -> Option D

4. Quick Check:

   Boundaries start at 0 and end at length-1 [OK]

Hint: Remember array indices start at 0 [OK]

Common Mistakes:

• Using length instead of length - 1 for boundaries
• Starting top or left at 1 instead of 0
• Using negative indices incorrectly

3. Given a rectangular matrix with 3 rows and 5 columns, how many elements will be printed after a complete spiral traversal?

easy

A. 15

B. 8

C. 12

D. 10

Solution

1. Step 1: Calculate total elements in matrix

   Number of elements = rows x columns = 3 x 5 = 15.

2. Step 2: Understand spiral traversal covers all elements

   Spiral traversal visits every element exactly once, so all 15 elements are printed.

3. Final Answer:

   15 -> Option A

4. Quick Check:

   Total elements = rows x columns = 15 [OK]

Hint: Spiral prints all elements once [OK]

Common Mistakes:

• Confusing spiral length with perimeter
• Counting only outer layer elements
• Ignoring rectangular shape

4. What is the output of the following TypeScript code for spiral traversal?

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

function spiralOrder(matrix: number[][]): number[] {
  const result: number[] = [];
  let top = 0, bottom = matrix.length - 1;
  let left = 0, right = matrix[0].length - 1;

  while (top <= bottom && left <= right) {
    for (let i = left; i <= right; i++) result.push(matrix[top][i]);
    top++;
    for (let i = top; i <= bottom; i++) result.push(matrix[i][right]);
    right--;
    if (top <= bottom) {
      for (let i = right; i >= left; i--) result.push(matrix[bottom][i]);
      bottom--;
    }
    if (left <= right) {
      for (let i = bottom; i >= top; i--) result.push(matrix[i][left]);
      left++;
    }
  }
  return result;
}

console.log(spiralOrder(matrix));

medium

A. [1, 4, 7, 8, 9, 6, 3, 2, 5]

B. [1, 2, 3, 6, 9, 8, 7, 4, 5]

C. [1, 2, 3, 4, 5, 6, 7, 8, 9]

D. [9, 8, 7, 4, 1, 2, 3, 6, 5]

Solution

1. Step 1: Trace the spiral traversal on the matrix

   Start top row left to right: 1,2,3
   Right column top to bottom: 6,9
   Bottom row right to left: 8,7
   Left column bottom to top: 4
   Now inner layer: 5

2. Step 2: Combine all elements in order

   Result array: [1,2,3,6,9,8,7,4,5]

3. Final Answer:

   [1, 2, 3, 6, 9, 8, 7, 4, 5] -> Option B

4. Quick Check:

   Spiral order matches [1, 2, 3, 6, 9, 8, 7, 4, 5] [OK]

Hint: Visualize peeling matrix edges in order [OK]

Common Mistakes:

• Reading rows only left to right
• Skipping inner elements
• Mixing traversal directions

5. Identify the bug in this spiral traversal code snippet:

while (top < bottom && left < right) {
  for (let i = left; i <= right; i++) result.push(matrix[top][i]);
  top++;
  for (let i = top; i <= bottom; i++) result.push(matrix[i][right]);
  right--;
  for (let i = right; i >= left; i--) result.push(matrix[bottom][i]);
  bottom--;
  for (let i = bottom; i >= top; i--) result.push(matrix[i][left]);
  left++;
}

medium

A. The for loops should use < instead of <= to avoid index out of bounds

B. The variables top, bottom, left, right are not initialized

C. The while loop condition should use <= instead of < to include last row and column

D. The result array is not declared before the loop

Solution

1. Step 1: Analyze the while loop condition

   Using < excludes the last row and column when top == bottom or left == right, missing elements.

2. Step 2: Correct the condition

   Change while (top < bottom && left < right) to while (top <= bottom && left <= right) to include all layers.

3. Final Answer:

   The while loop condition should use <= instead of < to include last row and column -> Option C

4. Quick Check:

   Use <= in loop condition to cover all edges [OK]

Hint: Use <= to include boundary rows and columns [OK]

Common Mistakes:

• Using < excludes last layer elements
• Not updating boundaries inside loop
• Forgetting to check conditions before loops