Issue
The problem arises due to arrow functions, a new addition in ECMAScript 2015 (ES6). Since not all browsers have fully implemented ES6 features, the compatibility of this new syntax varies from browser to browser. Helpful resources include the ES2015 (ES6) compatibility table and MDN documentation on arrow functions, which detail browser support for these features.
Upon reviewing the compatibility table, we note the following:
- Internet Explorer does not support arrow functions.
- Safari >=10 offers support for arrow functions.
- Chrome >=45 is compatible with arrow functions.
- Firefox >=22 includes support for arrow functions.
- Opera >=32 also supports arrow functions.
Therefore, in your specific case, arrow functions worked on Chrome because they were available in that version of the browser. However, Safari and IE did not support them either due to outdated versions or lack of overall support for this feature.
Resolutions
You have two choices: one simpler option and another more complex solution.
1) Replace arrow functions with function. While this may require some adjustments to mimic arrow function behavior regarding the this context, it will offer immediate ease of use. The exact example is provided below:
var temp = [];
$scope.mulImage = $scope.mulImage.filter(function(x, i) {
if(temp.indexOf(x.filename) < 0) {
temp.push(x.filename);
return true;
}
return false;
})
2) Consider using a tool like Babel – a transpiler that transforms ES6 code into regular ES5 code supported by all browsers. By following their installation guidelines, you can convert your ES6 code containing arrow functions into universal JavaScript for broader compatibility.