Edge: SCRIPT1028: Expected identifier, string or number

Question

My page works fine in Chrome and Firefox:

However, when I try to load this page in Edge, the questions and answers disappear. Only the categories are posted. Also, when trying to load this page in IE, everything disappears except for the search bar.

Edge gives me the following error:

SCRIPT1028: SCRIPT1028: Expected identifier, string or number on line 84 of faq.html

This refers to the following code:

function sortByCategory(data) {
  return data.reduce((obj, c) => {
    const { category, ...rest } = c; // this line throws the error
    obj[category] = obj[category] || [];
    obj[category].push(rest);
    return obj;
  }, {});
}

How do I fix this?

Answer 1

It appears (surprisingly) that Edge doesn't support property rest yet, which is unfortunate but then it was officially added only in ES2018. You'll need to rewrite the code not to use property rest (the ...rest part of your object literal) (or, as CertainPerformance suggests, use a transpiler).

Here's one of many ways to do that:

function sortByCategory(data) {
    return data.reduce((obj, c) => {
        //const { category, ...rest } = c;
        const { category } = c;
        const rest = {};
        for (const key of Object.keys(c)) {
            if (key !== "category") {
                rest[key] = c[key];
            }
        }
        obj[category] = obj[category] || [];
        obj[category].push(rest);
        return obj;
    }, {});
}

I avoided using delete because delete on an object de-optimizes the object, making property lookups slower. But deoptimizing just these objects may well not make any difference to the perceived speed of your page/app, so...

Answer 2

Neither Edge nor IE support object property rest syntax (though Edge will likely support it eventually). I'd suggest automatically transpiling your code to ES5 with Babel, which will allow you to write in the latest and greatest version of the language, while allowing ancient and incompatible browsers to understand all of your transpiled code. For example, plugging in

const { category, ...rest } = c;

results in

"use strict";

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var _c = c,
    category = _c.category,
    rest = _objectWithoutProperties(_c, ["category"]);

Doesn't look so pretty, but it can be done automatically.

One manual way of doing it could be:

const c = {
  category: 'category',
  foo: 'foo',
  bar: 'bar'
};

const category = c.category;
// Object.assign so as not to mutate the original object:
const rest = Object.assign({}, c);
delete rest.category;
console.log(rest);