Implementation of Graph in JavaScript - GeeksforGeeks

21 Feb, 2022
In this article, we would be implementing the Graph data structure in JavaScript. The graph is a non-linear data structure. Graph G contains a set of vertices V and a set of Edges E. Graph has lots of applications in computer science. Graph is basically divided into two broad categories :  
Directed Graph (Di- graph) – Where edges have direction.
Undirected Graph – Where edges do not represent any directed
There are various ways to represent a Graph:-  
Adjacency Matrix
Adjacency List
There are several other ways like incidence matrix, etc. but these two are most commonly used. Refer to Graph and its representations for the explanation of the Adjacency matrix and list.In this article, we would be using Adjacency List to represent a graph because in most cases it has a certain advantage over the other representation. Now Let’s see an example of Graph class-  
JavaScript
// create a graph classclass Graph {    // defining vertex array and    // adjacent list    constructor(noOfVertices)    {        this.noOfVertices = noOfVertices;        this.AdjList = new Map();    }     // functions to be implemented     // addVertex(v)    // addEdge(v, w)    // printGraph()     // bfs(v)    // dfs(v)}
The above example shows a framework of Graph class. We define two private variables i.e noOfVertices to store the number of vertices in the graph and AdjList, which stores an adjacency list of a particular vertex. We used a Map Object provided by ES6 in order to implement the Adjacency list. Where the key of a map holds a vertex and values hold an array of an adjacent node.Now let’s implement functions to perform basic operations on the graph:  
addVertex(v) – It adds the vertex v as key to adjList and initializes its values with an array.  
JavaScript
// add vertex to the graphaddVertex(v){    // initialize the adjacent list with a    // null array    this.AdjList.set(v, []);}
addEdge(src, dest) – It adds an edge between the src and dest.  
JavaScript
// add edge to the graphaddEdge(v, w){    // get the list for vertex v and put the    // vertex w denoting edge between v and w    this.AdjList.get(v).push(w);     // Since graph is undirected,    // add an edge from w to v also    this.AdjList.get(w).push(v);}
In order to add edge, we get the adjacency list of the corresponding src vertex and add the dest to the adjacency list.
printGraph() – It prints vertices and their adjacency list.  
JavaScript
// Prints the vertex and adjacency listprintGraph(){    // get all the vertices    var get_keys = this.AdjList.keys();     // iterate over the vertices    for (var i of get_keys){        // great the corresponding adjacency list        // for the vertex        var get_values = this.AdjList.get(i);        var conc = "";         // iterate over the adjacency list        // concatenate the values into a string        for (var j of get_values)            conc += j + " ";         // print the vertex and its adjacency list        console.log(i + " -> " + conc);    }}
Let’s see an example of a graph 
Now we will use the graph class to implement the graph shown above:  
JavaScript
// Using the above implemented graph classvar g = new Graph(6);var vertices = [ 'A', 'B', 'C', 'D', 'E', 'F' ]; // adding verticesfor (var i = 0; i < vertices.length; i++) {    g.addVertex(vertices[i]);} // adding edgesg.addEdge('A', 'B');g.addEdge('A', 'D');g.addEdge('A', 'E');g.addEdge('B', 'C');g.addEdge('D', 'E');g.addEdge('E', 'F');g.addEdge('E', 'C');g.addEdge('C', 'F'); // prints all vertex and// its adjacency list// A -> B D E// B -> A C// C -> B E F// D -> A E// E -> A D F C// F -> E Cg.printGraph();
Graph Traversal
We will implement the most common graph traversal algorithm:  
Breadth First Traversal for a Graph
Depth First Traversal for a Graph
Implementation of BFS and DFS:  
bfs(startingNode) – It performs Breadth First Search from the given startingNode  
JavaScript
// function to performs BFSbfs(startingNode){     // create a visited object    var visited = {};     // Create an object for queue    var q = new Queue();     // add the starting node to the queue    visited[startingNode] = true;    q.enqueue(startingNode);     // loop until queue is empty    while (!q.isEmpty()) {        // get the element from the queue        var getQueueElement = q.dequeue();         // passing the current vertex to callback function        console.log(getQueueElement);         // get the adjacent list for current vertex        var get_List = this.AdjList.get(getQueueElement);         // loop through the list and add the element to the        // queue if it is not processed yet        for (var i in get_List) {            var neigh = get_List[i];             if (!visited[neigh]) {                visited[neigh] = true;                q.enqueue(neigh);            }        }    }}
In the above method, we have implemented the BFS algorithm. A Queue is used to keep the unvisited nodes Let’s use the above method and traverse along with the graph  
JavaScript
// prints// BFS// A B D E C Fconsole.log("BFS");g.bfs('A');
The Diagram below shows the BFS on the example graph: 
dfs(startingNode) – It performs the Depth-first traversal on a graph  
JavaScript
// Main DFS methoddfs(startingNode){     var visited = {};     this.DFSUtil(startingNode, visited);} // Recursive function which process and explore// all the adjacent vertex of the vertex with which it is calledDFSUtil(vert, visited){    visited[vert] = true;    console.log(vert);     var get_neighbours = this.AdjList.get(vert);     for (var i in get_neighbours) {        var get_elem = get_neighbours[i];        if (!visited[get_elem])            this.DFSUtil(get_elem, visited);    }}
In the above example, dfs(startingNode) is used to initialize a visited array, and DFSutil(vert, visited) contains the implementation of DFS algorithm Let’s use the above method to traverse along with the graph  
JavaScript
// prints// DFS// A B C E D Fconsole.log("DFS");g.dfs('A');
The Diagram below shows the DFS on the example graph  
This article is contributed by Sumit Ghosh. If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
HadiIrandoost
Akanksha_Rai
shubham_singh
gotyettanuj
saideepesh000
abhishek0719kadiyan
tiagojjoao
JavaScript-DS
Graph
JavaScript
Graph
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Tree, Back, Edge and Cross Edges in DFS of Graph
Vertex Cover Problem | Set 1 (Introduction and Approximate Algorithm)
Comparison between Adjacency List and Adjacency Matrix representation of Graph
Eulerian path and circuit for undirected graph
Find if there is a path between two vertices in a directed graph
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?
Hide or show elements in HTML using display property
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?