
- Javascript Basics Tutorial
- Javascript - Home
- JavaScript - Roadmap
- JavaScript - Overview
- JavaScript - Features
- JavaScript - Enabling
- JavaScript - Placement
- JavaScript - Syntax
- JavaScript - Hello World
- JavaScript - Console.log()
- JavaScript - Comments
- JavaScript - Variables
- JavaScript - let Statement
- JavaScript - Constants
- JavaScript - Data Types
- JavaScript - Type Conversions
- JavaScript - Strict Mode
- JavaScript - Reserved Keywords
- JavaScript Operators
- JavaScript - Operators
- JavaScript - Arithmetic Operators
- JavaScript - Comparison Operators
- JavaScript - Logical Operators
- JavaScript - Bitwise Operators
- JavaScript - Assignment Operators
- JavaScript - Conditional Operators
- JavaScript - typeof Operator
- JavaScript - Nullish Coalescing Operator
- JavaScript - Safe Assignment Operator
- JavaScript - Delete Operator
- JavaScript - Comma Operator
- JavaScript - Grouping Operator
- JavaScript - Yield Operator
- JavaScript - Spread Operator
- JavaScript - Exponentiation Operator
- JavaScript - Operator Precedence
- JavaScript Control Flow
- JavaScript - If...Else
- JavaScript - While Loop
- JavaScript - For Loop
- JavaScript - For...in
- Javascript - For...of
- JavaScript - Loop Control
- JavaScript - Break Statement
- JavaScript - Continue Statement
- JavaScript - Switch Case
- JavaScript - User Defined Iterators
- JavaScript Functions
- JavaScript - Functions
- JavaScript - Function Expressions
- JavaScript - Function Parameters
- JavaScript - Default Parameters
- JavaScript - Function() Constructor
- JavaScript - Function Hoisting
- JavaScript - Self-Invoking Functions
- JavaScript - Arrow Functions
- JavaScript - Function Invocation
- JavaScript - Function call()
- JavaScript - Function apply()
- JavaScript - Function bind()
- JavaScript - Closures
- JavaScript - Variable Scope
- JavaScript - Global Variables
- JavaScript - Smart Function Parameters
- JavaScript Objects
- JavaScript - Number
- JavaScript - Boolean
- JavaScript - Strings
- JavaScript - Arrays
- JavaScript - Date
- JavaScript - DataView
- JavaScript - Handler
- JavaScript - Math
- JavaScript - RegExp
- JavaScript - Symbol
- JavaScript - Sets
- JavaScript - WeakSet
- JavaScript - Maps
- JavaScript - WeakMap
- JavaScript - Iterables
- JavaScript - Reflect
- JavaScript - TypedArray
- JavaScript - Template Literals
- JavaScript - Tagged Templates
- Object Oriented JavaScript
- JavaScript - Objects
- JavaScript - Classes
- JavaScript - Object Properties
- JavaScript - Object Methods
- JavaScript - Static Methods
- JavaScript - Display Objects
- JavaScript - Object Accessors
- JavaScript - Object Constructors
- JavaScript - Native Prototypes
- JavaScript - ES5 Object Methods
- JavaScript - Encapsulation
- JavaScript - Inheritance
- JavaScript - Abstraction
- JavaScript - Polymorphism
- JavaScript - Destructuring
- JavaScript - Destructuring Assignment
- JavaScript - Object Destructuring
- JavaScript - Array Destructuring
- JavaScript - Nested Destructuring
- JavaScript - Optional Chaining
- JavaScript - Global Object
- JavaScript - Mixins
- JavaScript - Proxies
- JavaScript Versions
- JavaScript - History
- JavaScript - Versions
- JavaScript - ES5
- JavaScript - ES6
- ECMAScript 2016
- ECMAScript 2017
- ECMAScript 2018
- ECMAScript 2019
- ECMAScript 2020
- ECMAScript 2021
- ECMAScript 2022
- JavaScript Asynchronous
- JavaScript - Asynchronous
- JavaScript - Callback Functions
- JavaScript - Promises
- JavaScript - Async/Await
- JavaScript - Microtasks
- JavaScript - Promisification
- JavaScript - Promises Chaining
- JavaScript - Timing Events
- JavaScript - setTimeout()
- JavaScript - setInterval()
- JavaScript Cookies
- JavaScript - Cookies
- JavaScript - Cookie Attributes
- JavaScript - Deleting Cookies
- JavaScript Browser BOM
- JavaScript - Browser Object Model
- JavaScript - Window Object
- JavaScript - Document Object
- JavaScript - Screen Object
- JavaScript - History Object
- JavaScript - Navigator Object
- JavaScript - Location Object
- JavaScript - Console Object
- JavaScript Web APIs
- JavaScript - Web API
- JavaScript - History API
- JavaScript - Storage API
- JavaScript - Forms API
- JavaScript - Worker API
- JavaScript - Fetch API
- JavaScript - Geolocation API
- JavaScript Events
- JavaScript - Events
- JavaScript - DOM Events
- JavaScript - addEventListener()
- JavaScript - Mouse Events
- JavaScript - Keyboard Events
- JavaScript - Form Events
- JavaScript - Window/Document Events
- JavaScript - Event Delegation
- JavaScript - Event Bubbling
- JavaScript - Event Capturing
- JavaScript - Custom Events
- JavaScript Error Handling
- JavaScript - Error Handling
- JavaScript - try...catch
- JavaScript - Debugging
- JavaScript - Custom Errors
- JavaScript - Extending Errors
- JavaScript Important Keywords
- JavaScript - this Keyword
- JavaScript - void Keyword
- JavaScript - new Keyword
- JavaScript - var Keyword
- JavaScript HTML DOM
- JavaScript - HTML DOM
- JavaScript - DOM Methods & Properties
- JavaScript - DOM Document
- JavaScript - DOM Elements
- JavaScript - DOM Attributes (Attr)
- JavaScript - DOM Forms
- JavaScript - Changing HTML
- JavaScript - Changing CSS
- JavaScript - DOM Animation
- JavaScript - DOM Navigation
- JavaScript - DOM Collections
- JavaScript - DOM NodeList
- JavaScript - DOM DOMTokenList
- JavaScript Advanced Chapters
- JavaScript - Bubble Sort Algorithm
- JavaScript - Circular Reference Error
- JavaScript - Code Testing with Jest
- JavaScript - CORS Handling
- JavaScript - Data Analysis
- JavaScript - Dead Zone
- JavaScript - Design Patterns
- JavaScript - Engine and Runtime
- JavaScript - Execution Context
- JavaScript - Function Composition
- JavaScript - Immutability
- JavaScript - Kaboom.js
- JavaScript - Lexical Scope
- JavaScript - Local Storage
- JavaScript - Memoization
- JavaScript - Minifying JS
- JavaScript - Mutability vs Immutability
- JavaScript - Package Manager
- JavaScript - Parse S-Expressions
- JavaScript - Prototypal Inheritance
- JavaScript - Reactivity
- JavaScript - Require Function
- JavaScript - Selection API
- JavaScript - Session Storage
- JavaScript - SQL CRUD Operations
- JavaScript - Supercharged Sorts
- JavaScript - Temporal Dead Zone
- JavaScript - Throttling
- JavaScript - TRPC Library
- JavaScript - Truthy and Falsy Values
- JavaScript - Upload Files
- JavaScript - Date Comparison
- JavaScript - Recursion
- JavaScript - Data Structures
- JavaScript - Base64 Encoding
- JavaScript - Callback Function
- JavaScript - Current Date/Time
- JavaScript - Date Validation
- JavaScript - Filter Method
- JavaScript - Generating Colors
- JavaScript - HTTP Requests
- JavaScript - Insertion Sort
- JavaScript - Lazy Loading
- JavaScript - Linked List
- JavaScript - Nested Loop
- JavaScript - Null Checking
- JavaScript - Get Current URL
- JavaScript - Graph Algorithms
- JavaScript - Higher Order Functions
- JavaScript - Empty String Check
- JavaScript - Form Handling
- JavaScript - Functional Programming
- JavaScript - Parameters vs Arguments
- JavaScript - Prototype
- JavaScript - Reactive Programming
- JavaScript - Reduce Method
- JavaScript - Rest Operator
- JavaScript - Short Circuiting
- JavaScript - Undefined Check
- JavaScript - Unit Testing
- JavaScript - Validate URL
- JavaScript Miscellaneous
- JavaScript - Ajax
- JavaScript - Async Iteration
- JavaScript - Atomics Objects
- JavaScript - Rest Parameter
- JavaScript - Page Redirect
- JavaScript - Dialog Boxes
- JavaScript - Page Printing
- JavaScript - Validations
- JavaScript - Animation
- JavaScript - Multimedia
- JavaScript - Image Map
- JavaScript - Browsers
- JavaScript - JSON
- JavaScript - Multiline Strings
- JavaScript - Date Formats
- JavaScript - Get Date Methods
- JavaScript - Set Date Methods
- JavaScript - Modules
- JavaScript - Dynamic Imports
- JavaScript - BigInt
- JavaScript - Blob
- JavaScript - Unicode
- JavaScript - Shallow Copy
- JavaScript - Call Stack
- JavaScript - Reference Type
- JavaScript - IndexedDB
- JavaScript - Clickjacking Attack
- JavaScript - Currying
- JavaScript - Graphics
- JavaScript - Canvas
- JavaScript - Debouncing
- JavaScript - Performance
- JavaScript - Style Guide
JavaScript - Graph Algorithms
A graph is a data structure which consist nodes and edges. The node are simply vertices and the lines which connect them are edges. Graph is non-linear data structure.
A Graph algorithms in JavaScript are used to solve the graph problems. These algorithms are used to traverse the graph, find the shortest path, etc. We can use these algorithms to solve the problems like finding the shortest path, finding the connected components, etc.
Types of Graph
Before dwelling deep into this chapter let's learn about types of graphs.
- Directed Graph : Directed graph is a graph in which the edges have a direction. In other word, we can call it a Digraph. These edges may be one way or two ways and also it may have loops. Arrow is used for representing the direction of the edges.
- Undirected Graph: Undirected graph are exactly opposite of directed graph. Means, in this graph edges does not have any direction. We can also call it simple graph.
- Weighted Graph: Weighted graph means the graph edges have some weight it means value. It help us to define the cost, distance, etc. between the vertices.
- Unweighted Graph: Unweighted graph is opposite of weighted graph. It means the graph edges does not have any weight at all.
Graph Representation
There are two ways to represent the graph:
- Adjacency Matrix: In this representation, we use a 2D array to represent the graph. The elements of the array are 0 or 1. If there is an edge between two vertices then we put 1 otherwise 0.
- Adjacency List: In this representation, we use an array of linked list to represent the graph. Each element of the array represents a vertex and the linked list represents the edges of that vertex.
Graph Algorithms
When we talk about graph algorithms, there are plenty of the algorithms available. We mostly use these algorithms to solve the graph problems. We have listed some of them below:
- Breadth First Search (BFS)
- Depth First Search (DFS)
- Topological Sorting
Breadth First Search (BFS) Algorithm
This algorithm we can use for traversing the graph. It is very useful for resolving many problems. In this algorithm, we start our traversal from the root node and then we go one level down, traverse all the nodes at that level and then move to the next level. We use queue data structure to implement this algorithm.
Algorithm
We can implement the BFS using the below steps given:
- First, we need to create a queue and add the root node to the queue.
- Then we will create a visited array and mark the root node as visited.
- Then loop through the queue until it is empty.
- Then we will dequeue the node from the queue and print it.
- After that, get all the adjacent nodes of the dequeued node and if they are not visited then mark them as visited and enqueue them.
- Repeat the above steps until the queue is empty.
Implementation
Following is the implementation of BFS algorithm in JavaScript:
function BFS(graph, root) { let visited = []; let queue = []; queue.push(root); while (queue.length > 0) { let node = queue.shift(); if (!visited[node]) { console.log(node); // Process the node visited[node] = true; } // Ensure neighbours is defined const neighbours = graph[node] || []; for (let i = 0; i < neighbours.length; i++) { let neighbour = neighbours[i]; if (!visited[neighbour]) { queue.push(neighbour); } } } } let graph = [[1, 2], [3, 4], [5], [6], [6], [7], [8], []]; BFS(graph, 0);
Following is the output of the above program −
Following is the output of above code
0 2 5 7 1 4 6 8 3
Depth First Search (DFS) Algorithm
Similar to BFS, this algorithm is also used for traversing the graph but in different way. In this algorithm, we start from the root node then move to left child or right child go to in-depth until we reach to leaf node then we backtrack and move to the next child.
Algorithm
We can implement the DFS using the below steps given:
- First, we need to create a stack and add the root node to the stack.
- Then we will create a visited array and mark the root node as visited.
- Then loop through the stack until it is empty.
- Then we will pop the node from the stack and print it.
- After that, get all the adjacent nodes of the popped node and if they are not visited then mark them as visited and push them to the stack.
- Repeat the above steps until the stack is empty.
Implementation
Following is the implementation of DFS algorithm in JavaScript:
function DFS(graph, root) { let visited = []; let stack = []; stack.push(root); while (stack.length > 0) { let node = stack.pop(); if (!visited[node]) { console.log(node); visited[node] = true; } // Set a default value if graph[node] is undefined const neighbours = graph[node] || []; for (let i = 0; i < neighbours.length; i++) { let neighbour = neighbours[i]; if (!visited[neighbour]) { stack.push(neighbour); } } } } let graph = [[1, 2], [3, 4], [5], [6], [6], [7], [8], []]; DFS(graph, 0);
Output
Following is the output of above code
0 2 5 7 1 4 6 8
Topological Sorting Algorithm
Using this algorithm we can actually sort the vertices of the graph in such a way that for every edge from vertex u to vertex v, u comes before v in the ordering.
Algorithm
We can implement the Topological Sorting using the below steps given:
- We will create a visited array and mark all the vertices as not visited.
- Then, we will create a stack to store the vertices.
- Then we will loop through all the vertices and call the recursive function.
- Then we will create a recursive function and mark the current node as visited.
- Then we will loop through all the adjacent nodes of the current node and if they are not visited then call the recursive function.
- Then push the current node to the stack.
- Repeat the above steps until all the vertices are visited.
- Finally, print the stack.
Implementation
Following is the implementation of Topological Sorting algorithm in JavaScript:
function topologicalSort(graph) { let visited = []; let stack = []; for (let i = 0; i < graph.length; i++) { if (!visited[i]) { topologicalSortUtil(graph, i, visited, stack); } } while (stack.length > 0) { console.log(stack.pop()); } } function topologicalSortUtil(graph, node, visited, stack) { visited[node] = true; const neighbours = graph[node] || []; for (let i = 0; i < neighbours.length; i++) { let neighbour = neighbours[i]; if (!visited[neighbour]) { topologicalSortUtil(graph, neighbour, visited, stack); } } stack.push(node); } // Valid DAG let graph = [ [1, 2], // Node 0 -> 1, 2 [3], // Node 1 -> 3 [3, 4], // Node 2 -> 3, 4 [], // Node 3 -> No outgoing edges [5], // Node 4 -> 5 [] // Node 5 -> No outgoing edges ]; topologicalSort(graph);
Output
Following is the output of above code
0 1 2 3 4 5 6 7 8