Error | Object Doesn't Support Property Or Method 'Includes' In Internet Explorer 8

Introduction

 
In this article, I am going to explain how to fix the error Object doesn't support property or method 'includes' as well as Object doesn't support property or method 'indexOf' in internet explorer (IE) browser. Here, I will also explain about prototype and Polyfill in the javaScript.
 
 
This is a common error while you working with cross-browser compatibility for your web application. I am working with one of my web application projects to make it cross-browser compatible, I got the error from the internet explorer (IE) 8 browser, Object doesn't support property or method 'includes'. I tried many possible ways to fix this issue in IE 8. Finally, I got the solution for the same, I would like to share it with you, so if you will get the same error then with the help of solutions explained in this article, you can fix it very quickly.
 
Requirement 
  • What is Polyfill?
  • What is a prototype in Javascript?
  • Explain ways to fix error Object doesn't support property or method 'includes' in IE 8.

Implementation

So, let's start with the definitions of Polyfill and prototype in the Javascript, then we will learn how to fix error Object doesn't support property or method 'includes' in IE.
 
Polyfill
 
In web development, a polyfill is a JavaScript code, that is used to the provide latest feature or functionality on the older browsers that do not support it. It uses non-standard features or functionalities in certain browsers to provide a standards-compliant way to access the latest features or functionalities.
 
Prototype
 
A prototype is an object in JavaScript. All the methods and properties in the javascript inherit from a prototype. It allows you to add new or custom methods and properties to all the instances of an object.
 

Ways to Fixed the error

 
There are two different ways are available, that you can use to fix this issue.
  1. Use indexOf() method instead of includes() method
  2. Use the polyfill
1. Use indexOf() method instead of includes() method
 
you can use the indexOf() method instead of the includes() method, as I showed in the below example.
  1. var arr = [1, 2, 3, 4, 5, "Codingvila"];  
  2. console.log(arr.indexOf("Codingvila") > -1)   
2. Use the polyfill
 
You can use the polyfill. To use polyfill you should write the below script on top of all imports in your web application. To get more information about polyfill, you can visit MDN web docs.
  1. Array.prototype.includes = null;  
  2. Array.prototype.indexOf = null;  
  3. if (!Array.prototype.includes) {  
  4.     Array.prototype.includes = function (search) {  
  5.         return !!~this.indexOf(search);  
  6.     }  
  7. }  
  8. if (!Array.prototype.indexOf) {  
  9.     Array.prototype.indexOf = (function (Object, max, min) {  
  10.         "use strict";  
  11.         return function indexOf(member, fromIndex) {  
  12.             if (this === null || this === undefined) throw TypeError("Array.prototype.indexOf called on null or undefined");  
  13.             var that = Object(this), Len = that.length >>> 0, i = min(fromIndex | 0, Len);  
  14.             if (i < 0) i = max(0, Len + i); else if (i >= Len) return -1;  
  15.             if (member === void 0) {  
  16.                 for (; i !== Len; ++i) if (that[i] === void 0 && i in that) return i;  
  17.             } else if (member !== member) {  
  18.                 for (; i !== Len; ++i) if (that[i] !== that[i]) return i;  
  19.             } else for (; i !== Len; ++i) if (that[i] === member) return i;  
  20.             return -1;  
  21.         };  
  22.     })(Object, Math.max, Math.min);  
  23. }  
Example
 
Now, let's take one example, and write a log into the console window as I have shown below, and it will work well. 
  1. var object = { Name: "Nikunj Satasiya", Name: "Hiren Dobariya", Name: "Vivek Ghadiya" };  
  2. var arr = [1, 2, "Codingvila", object];  
  3.    
  4. console.log("List of Items includes 1 :", arr.includes(1));  
  5. console.log("List of Items includes \"Codingvila\" :", arr.includes("Codingvila"));  
  6. console.log("List of Items includes object :", arr.includes(object));  
  7. console.log("List of Items includes Nisha Patel :", arr.includes("Nisha Patel"));  
Output
  1. > "List of Items includes 1 :" true  
  2. > "List of Items includes "Codingvila" :" true  
  3. > "List of Items includes obj :" true  
  4. > "List of Items includes Nisha Patel :" false  

Summary

 
In this article we learned how to fixed object doesn't support property or method 'includes' or 'indexOf' in IE 8, as well as basics of polyfill and prototype in Javascript.
 
Reference Link