What is the difference between instanceof and typeof operators in JavaScript?

What is the difference between instanceof and typeof operators in JavaScript?

Use of typeof Operator in JavaScript

typeof checks for the datatype of a given value. Suppose you have a value in a variable or have multiple values in an array and you want to check the datatype or value type of that value then typeof operator is a solution in JavaScript.

I am giving an example of typeof operator here. In this example I have an array with numeric and string values and I want to take total of only numeric values.

Copy the following given JavaScript code and paste in your browser and save your file as ‘typeof.html’ and then publish in any of the browser and check the result.

<html>
<head>
<title>How to use typeof Operator in JavaScript</title>
</head>
<body>
<script type="text/javascript">
     //lets create an array with the values of number and string datatypes
     var typeofArr = new Array(5,8,9,6,'admec', 'multimedia', 5,3,5,'institute', 6);
     function typeofFun(){
          //declaring a variable to store total
          var total = 0;
          //need to create a loop to get all the values from the array
          for(var i=0; i<typeofArr.length; i++){
               //checking whether the value is number or not
               if(typeof(typeofArr[i]) == 'number'){
                    //storing value coming from the array
                    total = total + typeofArr[i];
                    //above line can be written like this too
                    //total += typeofArr[i];
               }
          }
          alert(total);
     }
     //calling the func
     typeofFun();
</script>
</body>
</html>

Use of instanceof Operator in JavaScript

instanceof operator is good to know about the type of instance of value or variable. Suppose you have a multi-dimensional array with numeric values and want total of all those values then instanceof operator would be a right operator to use.

Please see the following example:

Copy the following given JavaScript code and paste in your browser and save your file as ‘instanceof.html’ and then publish in any of the browser and check the result.

<html>
<head>
<title>
      How to use instanceof Operator in JavaScript
</title>
</head>
<body>
<script type="text/javascript">
     //creating a multi-dimensional array to be used with instanceof operator
      var instofArr = new Array(5,8,9,6,[5,3,5,6,9]);
     //declaring a function
     function instofFunc(){
           //declaring a variable to store total in it
           var total = 0;
           //u need a loop to iterate over all the values in array
           for(var i=0; i<instofArr.length; i++){
                 //checking the instance type of the assigned value in the above array
                 if(instofArr[i] instanceof Array){
                      //taking values from the inside array again by loop
                       for(var j=0; j<instofArr[i].length; j++){
                           total = total + instofArr[i][j];
                       }
                  }else{
                        total = total + instofArr[i];
                  }
            }
            alert(total);
     }
     //calling the function
     instofFunc();
</script>
</body>
</html>

Important: You can check the variation in total by entering the different-2 values in above array too.

Note: Don’t increase the dimension of the array by entering another array in the nested array. You will not get total of those values as I haven’t used recursive array for the simplicity. If you want that too then please write in comment will tell you that too.

Summary: The basic difference between typeof and instanceof operators in JavaScript is that typeof checks for the datatype while instanceof checks for the type of instance. If you are not aware of instance then please read the following explanation on it.

Lets instantiate Array in a variable i.e myArr.

var myArr = new Array();

Here myArr is the instance of Array object meaning all the properties and methods can be used on all the values inside this array through this instance. So if we have multiple objects instantiations and want to check for the instance then it is a good operator.

Leave a Reply

You must be logged in to post a comment.

Copy link
Powered by Social Snap