Kodeclik Blog

Javascript instanceof

We will learn about the Javascript instanceof operator which is a very handy way to understand and verify the types of objects. To explore this operator, we will write and embed our Javascript code inside a HTML page like so:
In the above HTML page you see the basic elements of the page like the head element containing the title (“Javascript's instanceof Operator”) and a body with an empty script tag. The Javascript code goes inside these tags.

instanceof applied to Numbers

The instanceof operator can be one of the most complicated ones to understand but it need not be so. Let us try using it to understand if a given integer is an instance of the Number type.
In the above code we create an integer variable (age) and assign a value of 12 to it. Then we use the instanceof operator to check if the age variable is an instanceof Number. Unfortunately this gives:
Why? This is because the way we have defined age it is considered a primitive and not quite a Number object created within Javascript. Let us try to use the Number() constructor:
The output is:
Unfortunately this still hasn’t worked. This is because the expression “Number(12)” does not quite create a Number object but instead converts it into a primitive value. To really construct a Number object you must use the “new” operator.
The output is, finally:
So the moral of the story is that you must use the right, corresponding, constructor and the “new” operator to create a suitable object of the given type.

instanceof applied to Strings

We will go through the same motions but this time apply the instanceof operator to strings. Consider the following program:
The output is:
The output can be explained as follows. The first use of instanceof returns false because it does not use the String constructor. The second use also returns false because while it uses the String constructor it does not use the new operator. The third use works similar to our earlier example.

instanceof applied to Dates

The same idea can be applied to other types such as the Date type. Here is an example:
The output is:
with the same rationale as given earlier for Strings.
To confirm that the instanceof operator also works as intended when given wrong types here is some code to test this:
The output is:
As can be seen each of the newly created objects is an instanceof exactly one of the tested types each.

instanceof applied to Objects

All Javascript objects inherit from a base type called “Object” and thus all objects are instances of Object as well. We have updated the above code to also test for instanceof w.r.t. Objects:
The output is:
As can be seen the last entry printed in each row is “true”.

instanceof applied to Arrays

By default the way we create and initialize arrays enables Javascript to recognize that it is of type Array. Thus the following code:

instanceof applied to objects of new classes

The advantage of instanceof is that it applies not just to existing types like Date, Number, and String but also objects of new classes that you might create. Let us create a constructor for books:
The output is:
To make sure we have mastered the instanceof operator let us apply it to the title field of the Book object.
The output is:
As expected the second line prints “false” because the title field does not use the constructor and the new operator. Let us modify that part of the constructor:
The output is:
as we desired.
We hope by now you have mastered the instanceof operator. Where will we make use of it? When we have a Javascript program with lots of types of objects it can become very handy to check for specific instances before executing specific pieces of code.
Interested in learning more Javascript? Learn how to loop through two Javascript arrays in coordination and how to make a Javascript function return multiple values!
Want to learn Javascript with us? Sign up for 1:1 or small group classes.

Join our mailing list

Subscribe to get updates about our classes, camps, coupons, and more.

Copyright @ Kodeclik 2024. All rights reserved.