Blog

Reactive Programming is basically a way to write code that makes it easier to deal with things happens over timelike data coming from a network, users clicking on stuff, or updates popping up in a database. In reactive programming, we look at data as a stream of events. So instead of just waiting a lot for data to be ready, were kind of subscribe to these events and responding as soon as they happen.

Working with async (asynchronous) data gets a lot simpler with reactive programming. Async data can usually be tough because we dont know exactly when it will show up. But here in reactive programming, everything acts like a stream; we just listen for the data and handle it as soon as its ready.

Secondly, the reactive programming can actually make our code faster, because we get notified exact the moment new data comes in. We dont have to keep checking for it; it just shows up when its ready, and this makes a lot easier for us.

Lastly, this makes our code more understandable and manageable. because were handling data as a flow of events, its clear how the different pieces of code connect with each other. The code becomes more declarative, we just say what should happen, and it takes care of reacting to events in the right order. So its not only efficient but also keeps things cleaner and easier to work.

Reactive Programming in JavaScript

There are several libraries and frameworks that help us write reactive code in JavaScript. Some of the most popular ones are:

• RxJS: RxJS is a JavaScript library that gives tools for reactive programming. It is a popular framework, It is also used a lot with frameworks like Angular, and you may also have seen used with React. RxJS lets us handle data as a stream of events, that makes it much simple to deal with async stufflike user actions, API calls, or real-time updates.
• React: React is a JavaScript library mostly for building user interfaces. The great part is if data changes behind the scenes, React just updates the UI for us. React uses a virtual DOM which is a simple version of the actual webpage so it only updates the specific parts of the page, instead of updating whole webpage each time. This makes things faster as less time needed to update some of components.
• Vue.js: Vue.js is also a JavaScript framework for building user interfaces, and its designed to grow along with your project. It has a reactive data model, meaning if the data changes, the UI automatically changes. Vue has handy tools like computed properties (which handle data that depends on other data) and watchers (which track changes and let us react to them right away). This makes Vue pretty straightforward and really useful for building interactive features.

Prototype is like a template in JavaScript. These template help object to share the properties and methods. Instead of duplicating code everywhere, we can define method or property once and then can easily share with other instances of an object.

Types of Prototype in JavaScript

In JavaScript, there are more than one type of prototype that are used to share the properties and methods among the objects. The main types of prototype in JavaScript are:

• Object Prototype
• Constructor Function Prototype
• Function Prototype
• Built-in Prototype

Object Prototype

The object prototype is foundational template to all objects in JavaScript. This template is available in every object we create by default. It is like built-in sheet of tool that every object can use.

Code Snippet

Following is an example snippet of using object prototype.

let obj ={
   name:"John",
   age:21};
console.log(obj);
console.log(obj.toString());// [object Object]

Output

Following is the output of above code snippet −

{ name: 'Ansh', age: 24 }

In above example, we have created an object named obj with properties name and age. We also have used toString() method which is available by default in object prototype.

Constructor Function Prototype

A construction function is type of function that is used for creating new objects. When we need to create multiple objects having same properties and behaviours, we can use constructor function. Constructor function prototype is used to share the properties and methods among the objects created using constructor function.

Code Snippet

Below is an example snippet of using constructor function prototype.

functionPerson(name, age){this.name = name;this.age = age;}Person.prototype.greet=function(){return"Hello, "+this.name;}let person1 =newPerson("John",21);let person2 =newPerson("Ansh",24);

Output

Following is the output of above code snippet.

Hello, John
Hello, Ansh

In above example, we have created a constructor function named Person. We also have added a method greet to the prototype of Person. We have created two objects person1 and person2 using Person constructor function and then called greet method on both objects.

Function Prototype

Function prototype is a template that is available to all functions in JavaScript. This template is used to share the properties and methods among the functions.

Code Snippet

Below is an example snippet of using function prototype.

functiongreet(){return"Hello, World!";}
console.log(greet.toString());// function greet() { return "Hello, World!"; }

Output

Following is the output of above code snippet.

function greet() { return "Hello, World!"; }

In above example, we have created a function named greet. We also have used toString() method which is available by default in function prototype.

Built-in Prototype

There are many built-in objects in JavaScript like Array, String, Number, etc. These built-in objects have their own prototype. We can use these prototypes to share the properties and methods among the objects of these built-in objects.

Code Snippet

Below is an example snippet of using built-in prototype.

let arr =[1,2,3,4,5];

console.log(arr);
console.log(arr.toString());// 1,2,3,4,5
console.log(arr.join("-"));// 1-2-3-4-5
console.log(arr.reverse());// [ 5, 4, 3, 2, 1 ]

Output

[ 1, 2, 3, 4, 5 ]
1,2,3,4,5
1-2-3-4-5
[ 5, 4, 3, 2, 1 ]

In above example, we have created an array named arr. We also have used toString(), join(), and reverse() methods which are available by default in array prototype.

Parameters and arguments are terms that are used for the function. Both are generally confused with each other. But they are different from each other in JavaScript. In this tutorial, we will learn about the difference between parameters and arguments in JavaScript.

Parameters

Parameters are variable names that are used in the function definition. They are used to hold the values of the arguments that are passed to the function.

Arguments

Arguments are used in the function call. These are the values that are passed to the function when it is called. They are the actual values that are passed to the function when it is called.

We can pass any number of arguments to the function. But the number of arguments should match the number of parameters in the function definition. If the number of arguments is less than the number of parameters, the remaining parameters will be undefined. If the number of arguments is more than the number of parameters, the extra arguments will be ignored.

Parameters vs Arguments

Following are the notable Differences Between Parameters and Arguments −

Parameters	Arguments
Parameters are the variable names that are used in the function definition.	Arguments are the real values that we need to pass to the function when it is called.
Parameters are used to hold the values of the arguments that are passed to the function.	Arguments are the values that are passed to the function when it is called.
Parameters are used in the function definition.	Arguments are used in the function call.

Example

Lets see an example −

<html><body><script>functionadd(a, b){return a + b;}
document.write(add(10,20));</script></body>

Output

30

Explanation

In the above example, there is a function called add() that adds up the two numbers. In the function definition, there are two parameters a and b. When the function is called, the values 10 and 20 are passed as arguments to the function. These values are stored in the parameters a and b. The function returns the sum of these two values.

There are mainly two programming paradigms: The imperative programming paradigm and the declarative programming paradigm. Functional programming is a subtype of the declarative paradigm. The paradigm word refers to the approach to solving a particular problem.

Functional programming has been in use for the last decades but came in the trend after 2015 when the last main revised version of JavaScript was released. There are many benefits to using functional programming, which we will discuss in this tutorial.

Characteristics of Functional Programming

Functional programming works as mathematical function works. It allows developers to develop software based on function evaluation. It means programmers can break the code into small parts, which we can call the function, making it easy to evaluate and test code. The following concepts of functional programming are covered in this tutorial

• Pure Functions
• Code Readability

Pure Functions in JavaScript

In JavaScript, we can write the pure function. In simple terms, a pure function takes the values as a parameter, performs some operations on that, and returns the output.

The pure function never shares any variable with other function or use a global variable.

The followings are the properties of a Pure function

• A pure function always returns the same output for a given input.
• A pure function does not depend on any external state or variables that are not passed to them as arguments.
• A pure function does not produce any side effects, such as modifying global variables or changing the state of external objects.

Now, let us see and understand the pure function with an example.

Example

In the example below, we have created the pure_func() named which takes the value as a parameter and multiplies it with 2. After that, it prints the value. Users can see that pure_func() is not sharing any variable globally with another function.

Also, we can use the global_var directly without passing it as a parameter of a pure function. Still, we have passed it as a parameter as a pure function never shares any variable declared outside the function’s scope.

<html><body><h2>Pure Function Example</h2><div id="result"></div><script>let result = document.getElementById('result');let global_var =10;functionpure_func(value){return value *2;}
result.innerHTML =pure_func(5);</script></body></html>

Immutability in JavaScript

Immutability is another important concept of functional programming. In simple terms, immutability means that we cannot change the value of the variable once it is declared. In JavaScript, we can achieve immutability by using the const keyword. Lets see an example of immutability in JavaScript.

Example

In the example below, we have declared the variable using the const keyword. We have tried to change the value of the variable, which will throw an error as we cannot change the value of the variable declared using the const keyword.

<html><body><h2>Immutability Example</h2><div id="result"></div><script>let result = document.getElementById('result');const value =10;
value =20;
result.innerHTML = value;</script></body></html>

Ouptut

Following is the output of the above code

TypeError: Assignment to constant variable.

When we run the above code, it will throw an error as we cannot change the value of the variable declared using the const keyword.

Code Readability

As we write all logic with functions in functional programming, it makes our code more readable. For example, in other programming languages we use for or while loops to iterate through the arrays. But functional programming allows us to use the for-of loop, which makes code more readable and tells other developers that we wanted to iterate through the array and perform some operation on every array element.

Lets look at another example. Suppose we want to filter some values from the array. In other programming approaches, we write a manual function to filter values, but in the functional programming approach, we can use the filter() method, demonstrating that we want to filter values from the array based on the particular logic.

Higher Order Functions

The higher-order function allows us to pass the function as an argument of another function. For example, we can pass the callback function as an argument of the reduce() method of the array. In the callback function, we can write logic to reduce an array into a single element.

Lets see an example of the higher-order function.

Example

In this example, we have used the reduce() method to reduce the array into a single element and passed the callback function as an argument. It represents the higher-order function as we have passed the function as an argument.

<html><body><h2>Higher Order Function Example</h2><div id="result"></div><script>let result = document.getElementById('result');let arr =[1,2,3,4,5];let sum = arr.reduce((acc, val)=> acc + val);
result.innerHTML = sum;</script></body></html>

We have learned about the functional programming approach and how it is beneficial and different from the programming paradigm. We have learned that it provides a way to write maintainable and readable code with fewer bugs.

We can handle forms in different ways like validating, submitting, altering, updating form data, etc. using JavaScript.

Form Validation

Form validation normally occurs at the server, after the client had entered all the necessary data and then pressed the Submit button.

If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.

JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server. Form validation generally performs two functions.

• Basic Validation First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
• Data Format Validation Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate checks to ensure that the data entered is the data you are expecting.

Code snippet

functionvalidateForm(){var x = document.forms["myForm"]["fname"].value;if(x ==""){alert("Name must be filled out");returnfalse;}}validateForm();

In the above code, we have declared a function validateForm that checks if our form inputs are valid and input are properly fille, If not it will alert us to fill the missing data.

Following is the output of the above code:

Name must be filled out

Form Submit

After validating the form, we can submit the form data to the server. We can use methods like submit() and reset() to submit and reset the form data.

Code snippet

<form id="myForm" action="">
   First name:<input type="text" name="fname"><br>
   Last name:<input type="text" name="lname"><br><br><input type="button" value="Submit" onclick="myFunction()"></form><script>
document.getElementById("myForm").submit();
document.getElementById("myForm").reset();</script>

In the above code, we have used the submit() method to submit the form data and reset() method to reset the form data.

Conclusion

We can handle forms easily in JavaScript. Validation becomes a lot more easier and faster with JavaScript. We can also submit and reset the form data using JavaScript.

String is a data type, which we can use to save the data present in text format. It is a sequence of characters inside the double or single quotes.

Sometimes we need to check whether the string is empty or not. In JavaScript, we can check the empty string using the following methods.

Using the length property

It’s really simple and most common way to check the empty string. All we have to do is check the length of the string using the length property of the string. If the length of the string is 0, then it is an empty string. If length is 1 or more than 1 then string is not empty.

Syntax

Below is the syntax given to check the empty string using the length property.

if(string_name.length ===0){// string is empty}

Example

Below is the example code given, that shows how to use the length property to check the empty string.

<html><body><script>var str ='';if(str.length ===0){
   document.write('String is empty');}</script></body></html>

Following is the output of the above program −

String is empty

Using the trim() method

The string.trim() method allows us to remove the space from the start of the string. After moving the space, we can check that if the strings length is zero, the string can be either empty, null, or undefined.

Syntax

Below is the syntax given to check the empty string using the trim() method.

if(string_name.trim()===''){// string is empty}

Example

Below is the example code given, that shows how to use the trim() method to check the empty string.

<html><body><script>var str =' ';if(str.trim()===''){
   document.write('String is empty');}</script></body></html>

Following is the output of the above program −

String is empty

So, we have seen how to check the empty string in JavaScript using the length property and trim() method.

A higher order function accepts other functions as parameters and returns a function. To know about Higher-order functions, we should learn about call back functions.

A call back function is a function that is passed to another function as an argument. With the help of call back functions, one function can call another function and the call back function runs only after other function has finished. Some of the higher-order functions are map, reduce and filter.

Let us take an example and implement it without using any higher order functions.

Example

In the following code, we have a list of numbers and we want to increment each element by 10, to achieve this without using higher order functions, we need to loop through the array using for loop and increment each value by 10 and push the incremented values to a new array. Finally, print the incremented array using console.log().

const numbers =[1,2,3,4,5];
incrementedNums=[]for(i =0; i < numbers.length; i++){
   added = i +10
   incrementedNums.push(added)}
console.log(incrementedNums)

Output

[ 11, 12, 13, 14, 15 ]

And this is how a map function works. It iterates over an array and executes a provided function once for each array element and return the output as an array. Map() function does not change the original array, also it does not perform the operation on an empty array.

Below JavaScript functions are some inbuilt Higher Order Functions

• map()
• filter()
• reduce()
• forEach()

Advantages of Higher Order Functions

Following are the advantages of Higher Order Functions −

• Code Reusability
• Less Code
• Easy to Understand
• Easy to Maintain

Usage of Higer Order Function

Let us take the same example and implement it using higher order functions.

Using map() function

map() function iterates through an array and appllies a callback functionfor every element in the array. Let us consider another example and understand. In the following example, map function iterates through the given array of numbers and passes them into sqrt function, resulting an output of root values.

numbers=[4,9,16,25,36]
root= numbers.map(Math.sqrt)
console.log(root)

Output

[2, 3, 4, 5, 6]

Using filter() function

The filter() method shallow copies of the array and filters down the value which passes the condition implemented by the provided callback function. It is an iterative method, which calls the callback function given as an argument for each element in the array and return an output array with the elements which returned truthy value by the callback function.

Example

In the following example, we have a list of numbers and we want to filter out the even numbers from the list. To achieve this, we need to use filter() function and pass a callback function which returns true if the number is even.

numbers=[10,11,12,14,15]

even=numbers.filter(iseven)functioniseven(n){return(n%2===0)}
console.log(even)

Output

[ 10, 12, 14 ]

Using reduce() function

Similar to map and foreach, reduce method also executes a callback function (reducer function) on every element of the array, resulting a single output. In simple terms, the reduce method reduces the array to a single value. The Parameter of the reducer function is a callback function, which further has two arguments, accumulator and current value. Where current value is the current iterated value of the array. accumulator accumulates the callback function’s output. The final return value is stored in the accumulator.

Example

In the following example, we have a list of numbers and we want to find the sum of all the numbers in the list. To achieve this, we need to use reduce() function and pass a callback function which returns the sum of two numbers.

numbers=[10,11,12,13]

total =numbers.reduce(function(acc,el){return acc+el
},0)
console.log(total)

Output

46

Using forEach() function

The forEach method is similar to a map function, where it executes the callback function for each element in the array. The only difference between forEach() and map() is that, map function returns an array output, where as forEach returs undefined, it just iterates through the array.

Example

Below code shows the working of forEach method

const numbers =[10,20,30,40];

sum=0
numbers.forEach(add)functionadd(n){
   sum=sum+n
}
console.log(sum)

Output

100

Conclusion

Higher Order Functions operate on other functions, either by taking them as arguments or by returning them. JavaScript being a functional programming language, supports Higher Order Functions. Higher Order Functions are used to make the code more readable and maintainable. They help in reducing the code and make it more concise. JavaScript provides inbuilt Higher Order Functions like map(), filter(), reduce() and forEach().

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:

functionBFS(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 definedconst 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);</pre>


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:



functionDFS(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 undefinedconst neighbours = graph[node]||[];for(let i =0; i &lt; 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);</pre>


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:



functiontopologicalSort(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());}}functiontopologicalSortUtil(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 DAGlet 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

In JavaScript, we can get the current URL of the page using the window.location object. The window.location object contains information about the current URL of the page.

We can get URL from another method also, which is document.URL. Another method is document.documentURI which returns the location of the document as a string.

Using window.location

The window.location object can be used to get the current URL. The window.location.href property returns the href (URL) of the current page. We can also use window.location or location in place of window.location.href.

Example

In this example we will use window.location.href to get the current URL. In below example you can try using window.location or location in place of window.location.href.

<html><body><p id="demo"></p><script>let currentURL = window.location.href;
   document.getElementById("demo").innerHTML = currentURL;</script></body></html>

Output

We execute the code online. When you run the above code, You will able to see console message with the current URL.

Using document.URL

We could also use document.documentURI and document.URL properties. The document.URL returns the URL of the document as a string.

Example

In this example, we will use the document.URL to get the current URL of the document.

<html><body><p id="demo"></p><script>let currentURL = document.URL;
   document.getElementById("demo").innerHTML = currentURL;</script></body></html>

Output

When you execute the above code, In console the current URL will be displayed.

Using document.documentURI

The document.documentURI returns the location of the document as a string.

Example

In this example, we will use the document.documentURI to get the current URL of the document.

<html><body><p id="demo"></p><script>let currentURL = document.documentURI;
   document.getElementById("demo").innerHTML = currentURL;</script></body></html>

Output

When you execute the above code, In console you will be able to see the current URL of the document.

In this chapter, we will learn how to check the null values in JavaScript. The null value indicates the intentional absence of any object value. It is a JavaScript primitive value that is false when used in Boolean operations.

This distinguishes null from the related primitive value undefined, which is an unintended absence of any object value. This is because a variable that has been declared but not given a value is undefined rather than null.

We can take an example of a box that has nothing in it, nothing at all. We can say that the box is null. Similarly, in JavaScript, we can say that a variable is null when it has no value.

Checking Null Values

We can check the null values in javascript using quite a few methods. Let’s see them one by one.

• Using the Strict equality operator (===)
• Using the typeof operator
• Using Object.js method

Using the Strict equality operator (===)

In this method, we will see how we can check null values using the strict equality operator (===). The strict equality operator compares two values for equality. It returns true if the values are equal and false otherwise. It is a strict equality operator, which means it checks both the type and the value of the variable.

Syntax

The syntax for checking null values using the strict equality operator is given below.

let result =( v ===null);

Example

Below is the example of checking null values in JavaScript.

<!DOCTYPE html><html><head><title>Check fornull values in JavaScript</title></head><body><h2>Check fornull values using the strict equality operator.</h2><div id="output"></div><script>let output = document.getElementById("output");var v =null;if(v ===null){
   output.innerHTML ="Value is null";}else{
   output.innerHTML ="Value is not null";}</script></body></html>

In the above output, the variable is being checked for null and the value is being executed in the if-block that the variable contains a null value.

Using the typeof operator

The typeof operator may be used to determine the data type of a JavaScript variable. Here we use the typeof operator with the null operator. The (!variable) means the value is not null and if it is checked with the typeof operator variable which has the data type of an object then the value is null.

Syntax

Following is the syntax to typeof operator

typeofvar;

Here var is the variable whose data type is to be checked and is used as a parameter.

Example

In this example, we use the JavaScript typeof operator to check whether the values of a given variable are equal to null or not.

<!DOCTYPE html><html><head><title>Check fornull values in JavaScript</title></head><body><h2>Check fornull values using the typeof operator.</h2><div id="output"></div><script>let output = document.getElementById("output");var v =null;if(!v &&typeof v ==="object"){
   output.innerHTML ="Value is null";}else{
   output.innerHTML ="Value is not null";}</script></body></html>

The variable is tested for null in the above output, and the value is executed in the if-block that the variable has a null value.

Using Object.js method

The Object.is() function in JavaScript that compares two values to see whether they are the same. A boolean value indicates if the two parameters in the function have the same value. Two values could be the same if both the values are null.

Syntax

Following is the syntax to Object.is() method

Object.is( q,null);

Parameters

The parameters used in the Object.is() method are as follows

• q The first value to compare.
• null The second value to compare.

Example

In the program below, we use the Object.is() function to check for null values

<!DOCTYPE html><html><head><title>Check fornull values in JavaScript</title></head><body><h2>Check fornull values using the Object.is() method.</h2><div id="output"></div><script>let output = document.getElementById("output");var v =null;if(Object.is(v,null)){
   output.innerHTML ="Value is null";}else{
   output.innerHTML ="Value is not null";}</script></body></html>

Output

Following is the output of the above program.

Value is null

In the above output, the variable is being checked for null and the value is being printed with a true statement that the variable contains a null value.

Conclusion

In this chapter, we have learned how to check null values in JavaScript using the strict equality operator, typeof operator, and Object.is() method. We have also seen the syntax and examples of each method.