ECMASCRIPT6 Google Tag Manager Error: Arrow function

Question

I'm getting a compile error in Google TAG Manager (GTM) with below script:

This language feature is only supported for ECMASCRIPT6 mode or better: arrow function.

Tried to google it but my understanding of JS doesn't seem to be enough. Any ideas on how to change it so Google TAG Manager can compile it?

var modellist = productList.Lockers.reduce((acc, item) => {
    var existItem = acc.find(({
        model
    }) => model === item.model);
    var existItemnew = acc.find(({
        modelname
    }) => modelname === item.modelname);
    if (!existItem) {
        acc.push(item);
    }
    return acc;
}, []);

Answer 1

Change the arrow functions like (acc, item) => { ... } to non-arrow functions like function (acc, item) { ... } .

Object destructuring is also not allowed here, so function ({model}) { ... } needs to become function(i) { var model = i.model; ... } function(i) { var model = i.model; ... } . The following is the fixed version.

var modellist = productList.Lockers.reduce(function (acc, item) {
    var existItem = acc.find(function (i) {
        return i.model === item.model
    });
    var existItemnew = acc.find(function (i) {
        return i.modelname === item.modelname
    });
    if (!existItem) {
        acc.push(item);
    }
    return acc;
}, []);

$.each(modellist, function (i, item) {

    var model = modellist[i].model;
    var modelname = modellist[i].modelname;
    $('.filter.first .dropdown').append('<div class="' + model + '"><input type="radio" name="model" id="' + model + '" value="' + model + '" /><label>' + modelname + '</label>(<span id="modelcount"></span>)<img></div>');

});

Answer 2

You can convert your arrow functions into traditional functions. Your code would then look something like this:

var modellist = productList.Lockers.reduce(
  function(acc, item){
    var existItem = acc.find(
      function({ model }){
        return model === item.model;
      }
    );
    var existItemnew = acc.find(
      function({ modelname }){
        return modelname === item.modelname;
      }
    );
    if (!existItem) { acc.push(item); }
    return acc;
  }, []
);

$.each(modellist, function(i, item) {
  var model = modellist[i].model;
  var modelname = modellist[i].modelname;
  $('.filter.first .dropdown').append('<div class="' + model + '"><input type="radio" name="model" id="' + model + '" value="' + model + '" /><label>' + modelname + '</label>(<span id="modelcount"></span>)<img></div>');

});

There are a few important differences between these two types of functions in JavaScript. To learn about these, check out some online resources like Arrow Functions on MDN

Answer 3

The commenters are right, the error message says exactly what's wrong: some clients don't support ES6, and yours seems to be one of them. I've written an example of how you'll have to replace it:

var existItem = acc.find(function(model) { model === item.model});

These two functions are (mainly) the same:

let myArrowFunction = (text) => console.log(text) // es6, not completely supported (newer)

let myStandardFunction = function(text) { // standard JavaScript, accepted everywhere (original)
  console.log(text)
}

And you'll have to use the second version.