JavaScript destructuring in reduce() method not working with Internet Explorer 11?

Question

I use the JavaScript reduce() method to count how many entries have the same values.

If I use the code with the Firefox 52 browser everything works fine. But if I use the code in Internet Explorer 11, the debugger told me, that there is an error in the script:

const data = [{
    'jahr': '2017',
    'monat': '3'
  },
  {
    'jahr': '2017',
    'monat': '3'
  },
  {
    'jahr': '2017',
    'monat': '4'
  }
];

map = new Map,
  ergebnisMonat = data.reduce((r, {
    jahr,
    monat
  }) => {
    var datum = [monat, jahr].join('-');
    if (!map.has(datum)) {
      map.set(datum, {
        datum,
        anzahl: 0
      });
      r.push(map.get(datum));
    }
    map.get(datum).anzahl++;
    return r;
  }, []);

console.log(ergebnisMonat);

SCRIPT1003: ':' expected

The debugger told me that the ":" is expected here:

ergebnisMonat = data.reduce((r, {
        jahr**here ERROR**,
        monat

The reduce() method is compatible with IE since version 9. So I don’t know why it works in Firefox and not in IE 11. Any idea?

Thanks for your help.

Answer 1

According to the destructuring docs, its not at all supported in IE and hence

data.reduce((r, {
    jahr,
    monat
  })

is not supported, Also Arrow functions don't have support in IE, so you need to use the conventional function definition

ergebnisMonat = data.reduce(function(r, obj){
    var datum = [obj.monat, obj.jahr].join('-');
    if (!map.has(datum)) {
      map.set(datum, {
        datum,
        anzahl: 0
      });
      r.push(map.get(datum));
    }
    map.get(datum).anzahl++;
    return r;
  }, []);