Код ES6 map() не работает в IE 11

jQuery.noConflict(); 
jQuery(document).ready(function($) { 
 
  const keys = ["hard", "soft"]; 
 
  document.head.appendChild((style => { 
    style.textContent = keys.map(key => ` 
			#main-slider-wrapper .slider-key button[data-key="${key}"] { 
				background-image: 
					url(img/${key}-key-slider.png) 
			} 
 
			#main-slider-wrapper[data-key="${key}"] .slider img[src*="${key}-key"] { 
				opacity: 1; 
			} 
 
			#main-slider-wrapper[data-key="${key}"] .slider-key button[data-key="${key}"] { 
				filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5)); 
				-webkit-filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5)); 
			} 
		`).join("\n\n"); 
    return style; 
  })(document.createElement("style"))); 
 
  document.addEventListener("click", ({ 
    target 
  }) => { 
    if (!target.matches( 
        `${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow` 
      )) return; 
 
    const root = target.closest("#main-slider-wrapper"); 
    const key = target.dataset.key; 
    const index = keys.indexOf(key); 
    root.dataset.key = key; 
 
    for (const arrow of root.querySelectorAll(".slick-arrow")) { 
      arrow.dataset.key = keys[ 
        (keys.length + ( 
          arrow.classList.contains("left") ? -1 : 1 
        ) + index) % keys.length 
      ]; 
    } 
  }); 
 
  for (const e of document.querySelectorAll(`[data-key="${keys[0]}"]`)) 
    e.click(); 
});