javascript - ES6 to ES3 translation for MediaWiki (foreach() method and spreading operator)

Question

I desire to execute the following tested, working in console, ES6 code through MediaWiki as described in detail here,

but it fails being executed through MediaWiki as its latest release for now (1.33.0) allegedly can only execute ES3:

const list = document.querySelector("#footnotes_list");
document.querySelectorAll(".footnote>sup").forEach((footnote, i) => {
    const li = document.createElement("li");
    li.append(...footnote.childNodes); // move content
    list.appendChild(li);
    footnote.textContent = i+1;
});

I assume const is okay to become var;
I read in W3schools that forEach() is ES5 but AFAICR I can replace this with for loop.

I miss what could replace array spreading via spread operator (...) in ES3.
Google search for "array spreading ES3" (without quote marks) brings no example on how to spread an array in ES3 (maybe the terminology is different?).

If possible within the limitations of ES3, how will you do array spreading with it?

Answer 1

Your code, "babelified" here:

"use strict";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

var list = document.querySelector("#footnotes_list");
document.querySelectorAll(".footnote>sup").forEach(function (footnote, i) {
  var li = document.createElement("li");
  li.append.apply(li, _toConsumableArray(footnote.childNodes)); // move content

  list.appendChild(li);
  footnote.textContent = i + 1;
});