Unique Paths in Grid DP in DSA Javascript - Execution Trace

Concept Flow - Unique Paths in Grid DP

Start at top-left cell (0,0)

↓

Initialize DP table with 1s in first row and first column

↓

For each cell (i,j) from (1,1) to (m-1,n-1)

↓

Calculate dp[i

↓

Repeat until bottom-right cell (m-1,n-1)

↓

Return dp[m-1

We fill a table where each cell counts paths from start by adding paths from top and left cells, starting with 1s on top row and left column.

Execution Sample

DSA Javascript

function uniquePaths(m, n) {
  const dp = Array(m).fill().map(() => Array(n).fill(1));
  for (let i = 1; i < m; i++) {
    for (let j = 1; j < n; j++) {
      dp[i][j] = dp[i-1][j] + dp[i][j-1];
    }
  }
  return dp[m-1][n-1];
}

Calculates number of unique paths in an m x n grid moving only right or down.

Execution Table

Step	Operation	Cell Updated	Value Computed	DP Table State
0	Initialize DP table with 1s	All cells	1 in first row and first column, 1 elsewhere initially	[[1,1,1],[1,1,1],[1,1,1]]
1	Calculate dp[1][1]	(1,1)	dp[0][1] + dp[1][0] = 1 + 1 = 2	[[1,1,1],[1,2,1],[1,1,1]]
2	Calculate dp[1][2]	(1,2)	dp[0][2] + dp[1][1] = 1 + 2 = 3	[[1,1,1],[1,2,3],[1,1,1]]
3	Calculate dp[2][1]	(2,1)	dp[1][1] + dp[2][0] = 2 + 1 = 3	[[1,1,1],[1,2,3],[1,3,1]]
4	Calculate dp[2][2]	(2,2)	dp[1][2] + dp[2][1] = 3 + 3 = 6	[[1,1,1],[1,2,3],[1,3,6]]
5	Return result	dp[2][2]	6	Final answer: 6 unique paths

💡 All cells computed, bottom-right cell dp[2][2] holds total unique paths

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
dp	[[1,1,1],[1,1,1],[1,1,1]]	[[1,1,1],[1,2,1],[1,1,1]]	[[1,1,1],[1,2,3],[1,1,1]]	[[1,1,1],[1,2,3],[1,3,1]]	[[1,1,1],[1,2,3],[1,3,6]]	[[1,1,1],[1,2,3],[1,3,6]]
m	3	3	3	3	3	3
n	3	3	3	3	3	3

Key Moments - 3 Insights

Why do we initialize the first row and first column with 1s?

Because from the start cell, there is only one way to reach any cell in the first row (all moves right) or first column (all moves down). This is shown in step 0 of the execution_table.

Why do we add dp[i-1][j] and dp[i][j-1] to get dp[i][j]?

Because to reach cell (i,j), you can only come from the cell above (i-1,j) or the cell to the left (i,j-1). So total paths to (i,j) is sum of paths to those two cells, as shown in steps 1-4.

What does dp[m-1][n-1] represent at the end?

It represents the total number of unique paths from the top-left to bottom-right cell, after filling the entire dp table, as shown in step 5.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value computed for dp[2][1]?

A 2

B 6

C 3

D 1

💡 Hint

Check the 'Value Computed' column in execution_table row with Step 3

At which step does the dp table first show a value greater than 3?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look at the 'DP Table State' column in execution_table rows to find when a value > 3 appears

If the grid size was 2x2, what would be the final dp[m-1][n-1] value?

A 2

B 3

C 1

D 4

💡 Hint

Think about the dp table initialization and calculation for a smaller 2x2 grid, similar to the example in variable_tracker

Concept Snapshot

Unique Paths in Grid DP:
- Use a 2D dp array of size m x n
- Initialize first row and first column with 1
- For each cell dp[i][j], dp[i][j] = dp[i-1][j] + dp[i][j-1]
- dp[m-1][n-1] holds total unique paths
- Only moves allowed: right or down

Full Transcript

This visualization shows how to find the number of unique paths in a grid using dynamic programming. We start by creating a 2D table filled with 1s in the first row and column because there is only one way to reach those cells. Then, for each other cell, we add the number of ways to get to the cell above and the cell to the left. This sum gives the total ways to reach the current cell. We repeat this until we fill the entire table. The value in the bottom-right cell is the total number of unique paths from the top-left to bottom-right corner. The execution table traces each update step by step, and the variable tracker shows how the dp table changes after each step. Key moments clarify common confusions about initialization and the addition logic. The quiz tests understanding of the dp table values and the process.

Practice

1. What does the problem Unique Paths in Grid DP ask you to find?

easy

A. The number of different ways to move from the top-left to bottom-right corner of a grid using only right and down moves.

B. The shortest path length from top-left to bottom-right in a grid.

C. The maximum sum path from top-left to bottom-right in a grid.

D. The number of obstacles in the grid.

Solution

1. Step 1: Understand the problem goal

   The problem asks for counting all possible paths from the top-left corner to the bottom-right corner of a grid, moving only right or down.

2. Step 2: Differentiate from other path problems

   It is not about shortest path length, maximum sum, or obstacles count, but about counting unique paths.

3. Final Answer:

   The number of different ways to move from the top-left to bottom-right corner of a grid using only right and down moves. -> Option A

4. Quick Check:

   Unique paths count = number of ways to move right/down [OK]

Hint: Count paths by moving only right or down [OK]

Common Mistakes:

• Confusing unique paths with shortest path length
• Thinking about obstacles when none are given
• Counting diagonal moves

2. Which of the following JavaScript code snippets correctly initializes a 2D array dp of size m x n filled with zeros for the Unique Paths problem?

easy

A. const dp = Array.from({ length: m }, () => Array(n).fill(0));

B. const dp = Array(m).fill(Array(n).fill(0));

C. const dp = new Array(m).map(() => new Array(n));

D. const dp = Array(m).map(() => Array(n));

Solution

1. Step 1: Understand array initialization in JavaScript

   Using Array.from with a mapping function creates independent inner arrays, avoiding shared references.

2. Step 2: Analyze each option

   const dp = Array(m).fill(Array(n).fill(0)); shares the same inner array reference for all rows, causing bugs. Options C and D create inner arrays with undefined elements instead of zeros (missing .fill(0)). const dp = Array.from({ length: m }, () => Array(n).fill(0)); correctly creates independent arrays filled with zeros.

3. Final Answer:

   const dp = Array.from({ length: m }, () => Array(n).fill(0)); -> Option A

4. Quick Check:

   Use Array.from with arrow function for 2D array [OK]

Hint: Use Array.from with function to avoid shared inner arrays [OK]

Common Mistakes:

• Using fill with array directly causing shared references
• Not filling inner arrays with zeros (elements undefined)
• Not initializing inner arrays separately

3. What is the output of the following JavaScript code for uniquePaths(3, 3)?

function uniquePaths(m, n) {
  const dp = Array.from({ length: m }, () => Array(n).fill(0));
  for (let i = 0; i < m; i++) dp[i][0] = 1;
  for (let j = 0; j < n; j++) dp[0][j] = 1;
  for (let i = 1; i < m; i++) {
    for (let j = 1; j < n; j++) {
      dp[i][j] = dp[i - 1][j] + dp[i][j - 1];
    }
  }
  return dp[m - 1][n - 1];
}
console.log(uniquePaths(3, 3));

medium

A. 3

B. 6

C. 9

D. 12

Solution

1. Step 1: Initialize dp array and base cases

   Set first row and first column to 1 because only one way to reach cells in first row or column.

2. Step 2: Fill dp using sum of top and left cells

   Calculate dp[1][1] = 1+1=2, dp[1][2] = 1+2=3, dp[2][1] = 2+1=3, dp[2][2] = 3+3=6.

3. Final Answer:

   6 -> Option B

4. Quick Check:

   Unique paths in 3x3 grid = 6 [OK]

Hint: Sum paths from top and left neighbors [OK]

Common Mistakes:

• Not initializing first row and column to 1
• Adding instead of summing dp[i-1][j] and dp[i][j-1]
• Off-by-one errors in loops

4. The following code attempts to solve the Unique Paths problem but overwrites values across multiple rows unexpectedly for uniquePaths(3, 3). What is the bug?

function uniquePaths(m, n) {
  const dp = Array(m).fill(Array(n).fill(0));
  for (let i = 0; i < m; i++) dp[i][0] = 1;
  for (let j = 0; j < n; j++) dp[0][j] = 1;
  for (let i = 1; i < m; i++) {
    for (let j = 1; j < n; j++) {
      dp[i][j] = dp[i - 1][j] + dp[i][j - 1];
    }
  }
  return dp[m - 1][n - 1];
}

medium

A. The dp array is not initialized with zeros.

B. The loops start from 1 instead of 0.

C. Using fill with array causes all rows to reference the same array.

D. The return statement is outside the function.

Solution

1. Step 1: Analyze dp initialization

   Using Array(m).fill(Array(n).fill(0)) makes all rows point to the same inner array, so updating one row updates all rows.

2. Step 2: Understand effect on dp updates

   Setting dp[i][0] = 1 changes the same array for all rows. During table filling, updates overwrite values from earlier rows (e.g., dp[1][1] becomes 3 instead of 2), causing incorrect intermediate values.

3. Final Answer:

   Using fill with array causes all rows to reference the same array. -> Option C

4. Quick Check:

   Shared references cause wrong dp updates [OK]

Hint: Avoid fill with array; use Array.from for independent rows [OK]

Common Mistakes:

• Using fill with array causing shared references
• Incorrect loop ranges
• Misplaced return statement

5. Given a grid with obstacles represented by a 2D array obstacleGrid where 1 means obstacle and 0 means free cell, how would you modify the Unique Paths DP solution to count unique paths avoiding obstacles?

hard

A. Set dp[i][j] = 1 for all cells without checking obstacles.

B. Ignore obstacles and calculate paths as usual.

C. Use recursion without memoization to count paths.

D. Initialize dp with zeros, set dp[0][0] = 1 if no obstacle, then for each cell dp[i][j] = 0 if obstacle else dp[i-1][j] + dp[i][j-1].

Solution

1. Step 1: Initialize dp considering obstacles

   Set dp[0][0] to 1 only if the start cell has no obstacle; otherwise 0.

2. Step 2: Update dp cells with obstacle check

   For each cell, if obstacleGrid[i][j] is 1, dp[i][j] = 0 (no path). Else dp[i][j] = dp[i-1][j] + dp[i][j-1].

3. Step 3: Return dp[m-1][n-1]

   This gives the count of unique paths avoiding obstacles.

4. Final Answer:

   Initialize dp with zeros, set dp[0][0] = 1 if no obstacle, then for each cell dp[i][j] = 0 if obstacle else dp[i-1][j] + dp[i][j-1]. -> Option D

5. Quick Check:

   Obstacle cells block paths by setting dp to 0 [OK]

Hint: Set dp=0 for obstacles, sum paths only for free cells [OK]

Common Mistakes:

• Ignoring obstacles in dp calculation
• Not initializing start cell properly
• Using recursion without memoization causing inefficiency