FerchoCarcho FerchoCarcho - 3 months ago 11
Javascript Question

Having trouble translating this ES6 to ES5 including spread syntax

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:

enter image description here

Any help correcting this code is appreciated.

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

Answer

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);
Comments