Updated July 6, 2023
Introduction to JavaScript instanceof
The instanceof operator in JavaScript is used to dynamically check the type of an object against a specified type at runtime. It allows you to determine whether an object is an instance of a particular class or a subtype of it. JavaScript instanceof operator returns 2 values true or Whenever an instance of an object comparison type both are same then returns true otherwise return false.
Real-Time Scenario: If we have 1000’s user-defined class objects, but we need to work only with particular type objects, then we simply use instanceof operator to decide which objects belong to the desired class object, and then we will work with that objects without any hurdle.
How does instanceof operator work in JavaScript?
While checking whether the object belongs to the object type or not by using instanceof operator, on the left side of the instanceof operator, specify the object name, and on the right side of the instanceof operator, specify the object type. If the left-hand side object name and the right-hand side object type both right belong to a similar instance, then it will return a true value, otherwise returns a false.
Syntax:
var instanceOfOperator = nameOfObject instanceof typeOfObject;Note: Plain JavaScript code can be saved as with .js extension, and we can also include JavaScript code into an HTML file with <script scr=”javascriptfileName.js”></script> or we can directly write JavaScript code within <script> tag.
Examples to Implement JavaScript instanceof
See the examples below.
Example #1 – Operator with Array
Code:
<!DOCTYPE html>
<html>
<head>
<title>instanceof operator</title>
<style>
h1
{
text-align:center;
color:blue;
}
.i
{
color:red;
border-style:solid;
border-color:brown;
border-width:2px;
font-size:22px;
}
</style>
</head>
<body>
<h1>Array Instanceof Operator Demo</h1>
<div class="i">
<script>
var courses = ["Java", "Python", "C#","HTML","CSS","JavaScript"]; //line1
document.write("Is courses object name instance of Array?=>"+(courses instanceof Array) + "<br>"); //line2
document.write("Is courses object name instance of Object?=>"+(courses instanceof Object) + "<br>");//line3
document.write("Is courses object name instance of String?=>"+(courses instanceof String) + "<br>");//line4
document.write("Is courses object name instance of Number?=>"+(courses instanceof Number)); //line5
</script>
<div>
</body>
</html>Output:
Explanation:
- Line1, we have created a courses array with some course values.
- Line2, we have checked courses object is an instance of Array type; as courses are array type, then it has given us true value.
- Line3, we have checked course object is an instance of an object type, as all objects are inherited from the Object type, so the course array is also one of the inherited types, so it has given true value.
- Line4, we have checked courses object is an instance of String type; as courses are not string type, then it has given us a false value.
- Line5, we have checked courses object is an instance of Number type; as courses are not Number type, then it has given us a false value.
Example #2 – Operator with String
Code:
<!DOCTYPE html>
<html>
<head>
<title>instanceof operator</title>
<style>
h1
{
text-align:center;
color:pink;
}
.i
{
color:green;
border-style:solid;
border-color:maroon;
border-width:2px;
font-size:22px;
}
</style>
</head>
<body>
<h1>String Instanceof Operator Demo</h1>
<div class="i">
<script>
var educbaString=new String("EDUCBA"); //line1
document.write("Is educba String object name instance of String?=>"+(educbaString instanceof String) + "<br>"); //line2
document.write("Is educba String object name instance of Object?=>"+(educbaString instanceof Object) + "<br>");//line3
document.write("Is educba String object name instance of Array?=>"+(educbaString instanceof Array) + "<br>");//line4
document.write("Is educba String object name instance of Number?=>"+(educbaString instanceof Number)+"<br>"); //line5
document.write("Is educba String object name instance of Date?=>"+(educbaString instanceof Date)); //line6
</script>
</div>
</body>
</html>Output:
Explanation:
- Line1, we have created educbaString String with the new operator.
- Line2, we have checked educbaString object is an instance of String type; as educbaString is a String type, then it has given us true value.
- Line3, we have checked educbaString object is an instance of the Object type, as all objects are inherited from the Object type, so the educbaString String is also one of the inherited types, so it has given true value.
- Line4, we have checked educbaString object is an instance of Array type; as educbaString is not an Array type, then it has given us a false value.
- Line5, we have checked educbaString object is an instance of Number type; as educbaString is not a Number type, then it has given us a false value.
- Line6, we have checked educbaString object is an instance of Date type; as educbaString is not a Date type, then it has given us a false value.
Example #3 – Operator with Date
Code:
<!DOCTYPE html>
<html>
<head>
<title>instanceof operator</title>
<style>
h1
{
text-align:center;
color:fuchsia;
}
.i
{
color:orange;
border-style:solid;
border-color:red;
border-width:2px;
font-size:22px;
}
</style>
</head>
<body>
<h1>Date Instanceof Operator Demo</h1>
<div class="i">
<script>
var dateValue=new Date("03/15/2020"); //line1
document.write("Is dateValue object name instance of Date?=>"+(dateValue instanceof Date) + "<br>"); //line2
document.write("Is dateValue object name instance of Object?=>"+(dateValue instanceof Object) + "<br>");//line3
document.write("Is dateValue object name instance of Array?=>"+(dateValue instanceof Array) + "<br>");//line4
document.write("Is dateValue object name instance of Number?=>"+(dateValue instanceof Number)+"<br>"); //line
document.write("Is dateValue object name instance of String?=>"+(dateValue instanceof String)); //line6
</script>
</div>
</body>
</html>Output:
Explanation:
- Line1, we have created dateValue Date with the new operator.
- Line2, we have checked dateValue object is an instance of String type; as dateValue is Date type, then it has given us a true value.
- Line3, we have checked dateValue object is an instance of an object type, as all objects are inherited from the Object type, so dateValue Date is also one of the inherited types, so it has given true value.
- Line4, we have checked dateValue object is an instance of Array type; as dateValue is not an Array type, then it has given us a false value.
- Line5, we have checked dateValue object is an instance of a Number type; as dateValue is not a Number type, then it has given us a false value.
- Line6, we have checked dateValue object is an instance of Date type; as dateValue is not Date type, then it has given us a false value.
Example #4 – Operator with Number
Code:
<!DOCTYPE html>
<html>
<head>
<title>instanceof operator</title>
<style>
h1
{
text-align:center;
color:orange;
}
.i
{
color:navy;
border-style:solid;
border-color:yellow;
border-width:2px;
font-size:22px;
}
</style>
</head>
<body>
<h1>Number Instanceof Operator Demo</h1>
<div class="i">
<script>
var numbers=new Number(10.10); //line1
document.write("Is numbers object name instance of Number?=>"+(numbers instanceof Number) + "<br>"); //line2
document.write("Is numbers object name instance of Object?=>"+(numbers instanceof Object) + "<br>");//line3
document.write("Is numbers object name instance of Array?=>"+(numbers instanceof Array) + "<br>");//line4
document.write("Is numbers object name instance of String?=>"+(numbers instanceof String)+"<br>"); //line5
document.write("Is numbers object name instance of Date?=>"+(numbers instanceof Date)); //line6
</script>
</div>
</body>
</html>Output:
Explanation:
- Line1, we have created numbers Number with the new operator.
- Line2, we have checked numbers object is an instance of Number type; as numbers are Number type, then it has given us true value.
- Line3, we have checked numbers object is an instance of an object type, as all objects are inherited from the Object type, so numbers Number is also one of the inherited types, so it has given true value.
- Line4, we have checked numbers object is an instance of Array type, as numbers are not Array type, then it has given us a false value.
- Line5, we have checked numbers object is an instance of String type; as numbers are not String type, then it has given us a false value.
- Line6, we have checked numbers object is an instance of Date type; as numbers are not Date type, then it has given us a false value.
Conclusion
JavaScript instanceof operator is used for comparing object names with the desired object type for validating the actual object instance.
Recommended Articles
This is a guide to JavaScript instanceof. Here we discuss an introduction to JavaScript instanceof with appropriate syntax, working, and respective programming examples. You can also go through our other related articles to learn more –
