Convert ES6 Arrow Function to ES5

Question

I found a function I can use in a Leaflet project I’m working. The function is written is ES6 and it works great in both Firefox and Chrome. However, I need to target IE as well. In my research I found IE at present don't accept the ES6 Arrow function. I also I found if the ES6 function was converted to ES5, the function will work in IE. For days now I tried to convert the following function to ES5 but to no prevail. Some of the solutions I tried were found posted here. Can some please look at my script and let me know what I’m doing wrong. Also, what is the benefit of ES6 anyway; shorter script? Thank you in advance.

Here’s the working ES6 script:

points.map((p, i) => L.marker(p).bindPopup(`marker${'<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>'  + pointData[i].discrip +  "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"+ pointData[i].popup +"'   title='" + pointData[i].discrip + " '  href='graphic/"+ pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"}`))
.forEach(function(marker) {
    map.addLayer(marker);
    oms.addMarker(marker);
});

Here’s my best attempt/guess with no joy.

points.map(function(p, i) {
L.marker(p).bindPopup(`marker${'<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>'  + pointData[i].discrip +  "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='"+ pointData[i].popup +"'   title='" + pointData[i].discrip + " '  href='graphic/"+ pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"}`)})
.forEach(function(marker) {
map.addLayer(marker);
oms.addMarker(marker);
});

Answer 1

When you have ES6+ code that you want to make compatible for ES5, to transpile the syntax, you can do it automatically with a transpiler like Babel. Plugging in your code gives this result:

points.map(function (p, i) {
  return L.marker(p).bindPopup("marker" + ('<strong>' + pointData[i].cityName + '</strong>' + ', ' + '</br>' + pointData[i].discrip + "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='" + pointData[i].popup + "'   title='" + pointData[i].discrip + " '  href='graphic/" + pointData[i].popup + "' ><img src='graphic/" + pointData[i].popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"));
}).forEach(function (marker) {
  map.addLayer(marker);
  oms.addMarker(marker);
});

You needed to transpile the template literal too - declare strings and concatenate with + instead of using ${} syntax. In addition, you needed to return the L.marker... from the .map callback.

Note that this only transpiles syntax, not methods - if you're using ES6+ methods (for example, Array.prototype.includes), Babel won't be enough - you'll either need to change the code manually to use an ES5 method (like indexOf), or, a better option, include a polyfill (example) to define the ES6+ methods on clients viewing your page.