Topological Sort Using DFS in DSA Javascript - Build from Scratch

Topological Sort Using DFS

📖 Scenario: You are managing tasks in a project where some tasks must be done before others. You want to find an order to do all tasks so that every task is done only after all its prerequisites are done.

🎯 Goal: Build a program that uses Depth-First Search (DFS) to find a topological order of tasks represented as a directed graph.

📋 What You'll Learn

Create a graph as an adjacency list with exact tasks and dependencies

Create a visited set to track visited tasks

Implement DFS function to explore tasks

Use DFS to find topological order

Print the final topological order as an array

💡 Why This Matters

🌍 Real World

Topological sort is used in project management, build systems, and scheduling where tasks have dependencies.

💼 Career

Understanding topological sort and DFS is important for software engineers working on compilers, task schedulers, and dependency resolution.

1

Create the graph as an adjacency list

Create a constant called graph as an object with these exact keys and values: 'A': ['C'], 'B': ['C', 'D'], 'C': ['E'], 'D': ['F'], 'E': ['H', 'F'], 'F': ['G'], 'G': [], 'H': []

DSA Javascript

# Create the graph adjacency list as described
# Your code here

Hint

Use an object where each key is a task and the value is an array of tasks that depend on it.

2

Create a visited set and an empty array for order

Create a constant called visited as a new empty Set, and a constant called order as an empty array []

DSA Javascript

const graph = {
  'A': ['C'],
  'B': ['C', 'D'],
  'C': ['E'],
  'D': ['F'],
  'E': ['H', 'F'],
  'F': ['G'],
  'G': [],
  'H': []
};

// Create visited set and order array
# Your code here

Hint

Use new Set() for visited and [] for order.

3

Implement DFS function and run it on all tasks

Create a function called dfs that takes a parameter task. Inside, if visited has task, return immediately. Otherwise, add task to visited. Then, for each neighbor in graph[task], call dfs(neighbor). After the loop, push task to order. Finally, use a for loop with variable task over Object.keys(graph) and call dfs(task) for each.

DSA Javascript

const graph = {
  'A': ['C'],
  'B': ['C', 'D'],
  'C': ['E'],
  'D': ['F'],
  'E': ['H', 'F'],
  'F': ['G'],
  'G': [],
  'H': []
};

const visited = new Set();
const order = [];

// Implement dfs function and run it on all tasks
# Your code here

Hint

Use recursion to visit neighbors before pushing the current task to order.

4

Print the topological order

Print the array order reversed using console.log(order.reverse())

DSA Javascript

const graph = {
  'A': ['C'],
  'B': ['C', 'D'],
  'C': ['E'],
  'D': ['F'],
  'E': ['H', 'F'],
  'F': ['G'],
  'G': [],
  'H': []
};

const visited = new Set();
const order = [];

function dfs(task) {
  if (visited.has(task)) {
    return;
  }
  visited.add(task);
  for (const neighbor of graph[task]) {
    dfs(neighbor);
  }
  order.push(task);
}

for (const task of Object.keys(graph)) {
  dfs(task);
}

// Print the topological order reversed
# Your code here

Hint

Reverse the order array before printing to get the correct topological order.

Practice

1. What is the main purpose of using DFS in Topological Sort on a directed graph?

easy

A. To count the number of connected components

B. To find the shortest path between two nodes

C. To detect cycles in an undirected graph

D. To visit nodes in a way that ensures dependencies come before dependents

Solution

1. Step 1: Understand DFS role in Topological Sort

   DFS visits nodes deeply, ensuring all nodes reachable from a node are visited before it is processed.

2. Step 2: Relate DFS order to dependencies

   In Topological Sort, nodes are added after visiting all their dependencies, so dependencies come before dependents.

3. Final Answer:

   To visit nodes in a way that ensures dependencies come before dependents -> Option D

4. Quick Check:

   DFS ensures dependency order = A [OK]

Hint: DFS post-order gives correct dependency order [OK]

Common Mistakes:

• Confusing DFS with BFS for topological sorting
• Thinking DFS finds shortest paths
• Mixing cycle detection with topological order

2. Which of the following is the correct way to mark a node as visited in a DFS-based topological sort in JavaScript?

easy

A. visited = node;

B. visited.push(node);

C. visited[node] = true;

D. visited[node] == true;

Solution

1. Step 1: Understand visited marking in DFS

   Visited is usually an array or object where each node's visited status is stored as a boolean.

2. Step 2: Correct syntax for marking visited

   Assigning true to visited[node] marks that node visited; using '==' is comparison, not assignment.

3. Final Answer:

   visited[node] = true; -> Option C

4. Quick Check:

   Assign true to visited[node] = A [OK]

Hint: Use assignment (=), not comparison (==), to mark visited [OK]

Common Mistakes:

• Using '==' instead of '=' for assignment
• Using push on visited array instead of index assignment
• Overwriting visited variable instead of marking node

3. What will be the output of the following code snippet performing topological sort using DFS on the graph with edges: 5->2, 5->0, 4->0, 4->1, 2->3, 3->1?

const graph = {
  5: [2, 0],
  4: [0, 1],
  2: [3],
  3: [1],
  0: [],
  1: []
};

const visited = {};
const stack = [];

function dfs(node) {
  visited[node] = true;
  for (const neighbor of graph[node]) {
    if (!visited[neighbor]) dfs(neighbor);
  }
  stack.push(node);
}

for (const node in graph) {
  if (!visited[node]) dfs(node);
}

console.log(stack.reverse());

medium

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

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

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

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

Solution

1. Step 1: Perform DFS and track stack push order

   DFS visits nodes deeply, pushing nodes after visiting neighbors. For node 5: visits 2, then 3, then 1, then 0; for node 4: visits 0 and 1. Stack push order is [1,3,2,0,5,4] reversed to [4,5,0,2,3,1].

2. Step 2: Reverse stack to get topological order

   Reversing stack gives [4, 5, 0, 2, 3, 1], which respects dependencies.

3. Final Answer:

   [4, 5, 0, 2, 3, 1] -> Option B

4. Quick Check:

   DFS post-order reversed = [4,5,0,2,3,1] [OK]

Hint: Reverse DFS finishing order for topological sort output [OK]

Common Mistakes:

• Not reversing the stack before output
• Visiting nodes in wrong order due to object key iteration
• Confusing push order with final topological order

4. Identify the bug in this DFS-based topological sort code snippet:

function dfs(node, graph, visited, stack) {
  if (visited[node]) return;
  visited[node] = true;
  for (const neighbor of graph[node]) {
    dfs(neighbor, graph, visited, stack);
  }
  stack.push(node);
}

const graph = {0: [1], 1: [2], 2: []};
const visited = {};
const stack = [];
for (const node in graph) {
  dfs(node, graph, visited, stack);
}
console.log(stack.reverse());

medium

A. No bug; code works correctly

B. Visited check missing before recursive call

C. Stack should be cleared before DFS

D. Visited should be reset inside DFS function

Solution

1. Step 1: Analyze visited check and recursion

   The code checks if node is visited before recursion, preventing repeated visits.

2. Step 2: Confirm stack usage and output

   Nodes are pushed after visiting neighbors, and stack is reversed for correct order.

3. Final Answer:

   No bug; code works correctly -> Option A

4. Quick Check:

   No bug; code works correctly = C [OK]

Hint: Check visited before recursion to avoid repeats [OK]

Common Mistakes:

• Calling dfs without visited check causing infinite recursion
• Not reversing stack before output
• Resetting visited inside DFS causing wrong results

5. Given a directed graph with nodes and edges, how can you modify the DFS-based topological sort to detect if the graph has a cycle?

hard

A. Use an extra recursion stack to track nodes in the current DFS path and detect back edges

B. Count the number of nodes visited and compare with total nodes

C. Sort nodes by their degree before DFS

D. Run BFS instead of DFS to detect cycles

Solution

1. Step 1: Understand cycle detection in DFS

   Cycle exists if a node is visited again in the current DFS path (back edge).

2. Step 2: Use recursion stack to track current path

   Maintain a recursion stack array marking nodes currently in DFS call; if a neighbor is in recursion stack, cycle detected.

3. Final Answer:

   Use an extra recursion stack to track nodes in the current DFS path and detect back edges -> Option A

4. Quick Check:

   Recursion stack detects cycles = D [OK]

Hint: Track recursion stack to find back edges indicating cycles [OK]

Common Mistakes:

• Only using visited array without recursion stack
• Trying to detect cycles by node count mismatch
• Using BFS without proper cycle detection logic