Spiral Matrix Traversal in DSA Typescript - Build from Scratch

Spiral Matrix Traversal

📖 Scenario: You are working with a 2D grid of numbers, like a map of city blocks with house numbers. You want to collect these numbers in a spiral order, starting from the top-left corner and moving inward clockwise.

🎯 Goal: Build a program that takes a 2D array (matrix) of numbers and returns a list of those numbers in spiral order.

📋 What You'll Learn

Create a 2D array called matrix with the exact values [[1,2,3],[4,5,6],[7,8,9]]

Create variables top, bottom, left, and right to track the current edges of the matrix

Use a while loop to traverse the matrix in spiral order and collect the numbers in an array called result

Print the result array after the traversal

💡 Why This Matters

🌍 Real World

Spiral traversal is useful in image processing, printing patterns, and navigating grids in games or maps.

💼 Career

Understanding matrix traversal helps in coding interviews and solving problems involving 2D data structures.

1

Create the matrix

Create a 2D array called matrix with these exact values: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

DSA Typescript

# Create the matrix variable with the given values
// Your code here

Hint

Use const matrix: number[][] = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; to create the matrix.

2

Set up boundary variables

Create variables top, bottom, left, and right to track the edges of the matrix. Set top to 0, bottom to matrix.length - 1, left to 0, and right to matrix[0].length - 1.

DSA Typescript

const matrix: number[][] = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
// Create top, bottom, left, right variables to track matrix edges
// Your code here

Hint

Use let top = 0; and similar lines for the other edges.

3

Traverse the matrix in spiral order

Create an empty array called result. Use a while loop that runs while left <= right and top <= bottom. Inside the loop, traverse from left to right on the top row, then top to bottom on the right column, then right to left on the bottom row, and finally bottom to top on the left column. After each traversal, update the top, bottom, left, and right variables accordingly to move inward.

DSA Typescript

const matrix: number[][] = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
let top = 0;
let bottom = matrix.length - 1;
let left = 0;
let right = matrix[0].length - 1;
// Create result array and write the while loop to traverse in spiral order
// Your code here

Hint

Use four loops inside the while loop to go right, down, left, and up. Update the edges after each direction.

4

Print the spiral order result

Print the result array using console.log(result).

DSA Typescript

const matrix: number[][] = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
let top = 0;
let bottom = matrix.length - 1;
let left = 0;
let right = matrix[0].length - 1;
const result: number[] = [];

while (left = left; col--) {
            result.push(matrix[bottom][col]);
        }
        bottom--;
    }

    if (left = top; row--) {
            result.push(matrix[row][left]);
        }
        left++;
    }
}
// Print the result array
// Your code here

Hint

Use console.log(result) to print the spiral order array.

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