Having trouble translating this ES6 to ES5 including spread syntax

Question

I am trying to translate the following into ES5, while learning the language:

const transitionendFn = ()=> {
    [...this.slider].forEach((el)=> el.className = 'item');
    selectedEl.classList.add('active');
    this.isAnimating = false
}

ES5:

const transitionendFn = function() {
    [].concat(this.slider).
        forEach(function (el) {
            return el.className = 'item';
        });
    selectedEl.classList.add('active');
    this.isAnimating = false
}

I don’t understand the spread part.

this.slider contains the following:

Any help correcting this code is appreciated.

I get “TypeError: el is undefined” with my translation.

Answer 1

Be aware that:

• Arrow functions do not have a this binding. Traditional functions (the only kind available in ES5) do, so you will have to bind it to the desired value.
• ES5 does not have const variables. Only var ones.
• ES5 does not have iterable objects. I will assume this.slider is array-like.

Then the translation would be something like

var transitionendFn = function() {
  [].forEach.call(this.slider, function(el) {
    return el.className = 'item';
  });
  selectedEl.classList.add('active');
  this.isAnimating = false;
}.bind(this);