title: Javascript - Extend an ES6 Class in ES5
body: <p>I am using the following code for a slider with <a href="https://pawelgrzybek.github.io/siema/" rel="nofollow noreferrer">Siema</a>:</p>
  
  <p><a href="https://codepen.io/pawelgrzybek/pen/boQQWy" rel="nofollow noreferrer">https://codepen.io/pawelgrzybek/pen/boQQWy</a></p>
  
  <p>Which uses extending classes to add dots to the slide. All works well except that our site is now having issues with Googles Mobile Friendly Test with it using ES6 as it gives the error:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected reserved word
  </code></pre>
  
  <p>on this line:</p>
  
  <pre><code>class SiemaWithDots extends Siema {
  </code></pre>
  
  <p>Is there a way I can make this compatible with ES5?</p>
  
  <p>The code can be seen below:</p>
  
  <pre><code>// instantiate new extended Siema
  const mySiemaWithDots = new SiemaWithDots({
    // on init trigger method created above
    onInit: function(){
      this.addDots();
      this.updateDots();
    },
  
    // on change trigger method created above
    onChange: function(){
      this.updateDots()
    },
  });
  
  // extend a Siema class by two methods
  // addDots - to create a markup for dots
  // updateDots - to update classes on dots on change callback
  class SiemaWithDots extends Siema {
  
    addDots() {
      // create a contnier for all dots
      // add a class 'dots' for styling reason
      this.dots = document.createElement('div');
      this.dots.classList.add('dots');
  
      // loop through slides to create a number of dots
      for(let i = 0; i &lt; this.innerElements.length; i++) {
        // create a dot
        const dot = document.createElement('button');
  
        // add a class to dot
        dot.classList.add('dots__item');
  
        // add an event handler to each of them
        dot.addEventListener('click', () =&gt; {
          this.goTo(i);
        })
  
        // append dot to a container for all of them
        this.dots.appendChild(dot);
      }
  
      // add the container full of dots after selector
      this.selector.parentNode.insertBefore(this.dots, this.selector.nextSibling);
    }
  
    updateDots() {
      // loop through all dots
      for(let i = 0; i &lt; this.dots.querySelectorAll('button').length; i++) {
        // if current dot matches currentSlide prop, add a class to it, remove otherwise
        const addOrRemove = this.currentSlide === i ? 'add' : 'remove';
        this.dots.querySelectorAll('button')[i].classList[addOrRemove]('dots__item--active');
      }
    }
  }
  </code></pre>