How to modify arrow function to work in IE11

Question

I have learned that arrow functions do not work in IE11. So my code below is throwing a syntax error in IE11. However, I'm having difficulty modifying it to a normal function. Here's the problem line of code:

let selectors = [nextSlide, nextSlide - slick.slideCount, nextSlide + slick.slideCount].map( n => '[data-slick-index="${n}"]' ).join(', ');

I tried changing n => to function(n) {} like below, but that's giving an error in all browsers.

let selectors = [nextSlide, nextSlide - slick.slideCount, nextSlide + slick.slideCount].map( function(n) { '[data-slick-index="${n}"]' } ).join(', ');

What am I doing wrong?

Here's the full function if it's helpful to see what's going on:

$('.text-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  let selectors = [nextSlide, nextSlide - slick.slideCount, nextSlide + slick.slideCount].map( n => '[data-slick-index="${n}"]' ).join(', ');
  $('.shimmer2').removeClass('shimmer2');
  $(selectors).addClass('shimmer2');
});

Thank you!

Answer 1

let selectors = [nextSlide, nextSlide - slick.slideCount, nextSlide + slick.slideCount].map( n => '[data-slick-index="${n}"]' ).join(', ');

Arrow functions without braces like the one above implicitly return the result of the expression/statement. For arrow functions with braces or non-arrow anonymous functions like you have here, you want to return something explicitly:

let selectors = [nextSlide, nextSlide - slick.slideCount, nextSlide + slick.slideCount].map(function(n) {
    return '[data-slick-index="${n}"]';
}).join(', ');