IE11 issue with “arrow” and “includes” Javascript method and an alternate solution

Again one more Microsoft problem 😢 😢

Yesterday, I  suddenly observed that one part of my newly developed feature was not working in IE11. This is a simple feature which contains two select boxes, user can select the one or multiple items from the first select box and copy to another select box. I have added a kind of logic there which checks before copying if the item(s) to be copied are already in list 2, if true, alert the user and skip copying duplicates. While developing I checked this feature in chrome, Edge and Firefox and all work perfectly!  I couldn’t check in IE11 and that was my mistake as IE is infamous for such issues. While debugging I saw that IE11 was crashing on the places where I have used the functions  => and .include. Actually, the arrow function is not supported in IE 11. You can refer to this compatibility table: https://kangax.github.io/compat-table/es6/ to get an overview of what is supported where and to what extent in a detailed fashion. You may read more on arrow functions at below link: 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Check below a small demo which shows the problem and an alternate which solves the IE11 issue.

Demo:

**********************************

JSFiddle (Fails in IE11)

JSFiddle (Works in IE11)

**********************************

Github:

code (Fails in IE11) 

code (Works in IE11) 

 

**********************************

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.