So far in this module you have studied graphs on paper: vertices, edges, directed versus undirected relationships, and the trade-offs between adjacency matrices and adjacency lists. Now you will turn those ideas into working code. The goal of this topic is to build a reusable Graph class in JavaScript that stores its edges as an adjacency list (commonly a Map or object whose keys are vertices and whose values are arrays of neighbors), exposes a method for adding edges, and then supports traversal.
Traversal is where the structure earns its keep. Breadth-first search uses a queue and a visited set to explore a graph level by level, while depth-first search follows one path as far as it can before backtracking. DFS can be written two ways: recursively, where the JavaScript call stack does the bookkeeping for you, or iteratively, where you manage an explicit stack. Writing both versions makes the relationship between recursion and stacks concrete, and it prepares you to handle graphs large enough that deep recursion becomes risky.
The videos below walk through implementations of BFS, recursive DFS, and iterative DFS on an undirected graph. While watching, pay attention to three things: how the graph is represented and how edges get added for an undirected graph (both directions), where the visited set is checked and updated, and the exact order in which vertices are printed. Afterward, run the same graph through all three traversals yourself and compare the output orders so you can explain why they differ.
A short implementation-focused walkthrough of breadth-first search on an undirected graph. Based on the title and series, it should cover the queue-based BFS loop, the use of a visited structure to avoid revisiting vertices, and the resulting level-by-level traversal order on a sample graph.
It targets the BFS subtopic directly at the code level rather than only in theory, and it comes from a structured data-structures-and-algorithms series, so the terminology and graph setup carry over to the DFS videos that follow.
This video implements depth-first search recursively on an undirected graph. Expect it to show a helper method that marks the current vertex visited and then calls itself on each unvisited neighbor, with the call stack handling backtracking automatically.
It covers the recursive DFS subtopic and, because it uses the same graph and style as the BFS video, it makes the contrast between queue-driven and recursion-driven exploration easy to see.
The companion video showing DFS written iteratively with an explicit stack instead of recursion. It should demonstrate pushing a starting vertex, popping and visiting, then pushing unvisited neighbors, and it will likely highlight how the push order affects the visit order.
It completes the recursive-versus-iterative pairing required by this topic and gives you a direct view of how an explicit stack replaces the call stack, which is useful for reasoning about deep or large graphs.
Together these three videos support MO4 most directly: they model building and traversing an adjacency-list graph in code, including BFS, recursive DFS, and iterative DFS. Because each walkthrough traces the visit order on a concrete undirected graph, they also reinforce MO3 by letting you check your hand-traced orderings against a worked example, and they touch MO1 through the handling of undirected edges (added in both directions) and MO2 through the choice of adjacency-list storage. Comparing the BFS and DFS outputs across the videos prepares you for MO5, where you must justify which traversal fits a given problem, such as shortest-hop search versus exhaustive path exploration.
These videos were chosen from YouTube on October 2, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.