How to achieve the spread operator in IE 11?

Question

For some "extraction" operation I am trying to get the following snippet work, without using the spread operator, because IE 11 doesn't knows about spread operators.

works in Chrome, but not IE 11:

html_col_width =[{"targets":0, "width":50}, {"targets":1, "width":100},{"targets":2, "width":442}]

        ... some other code
        order: [
            [response.order_by_column, response.order_by]
        ],
        columnDefs: [
                      ...html_col_width,
                      {other: stuff},
                      {other: stuff}
    })

See columnDefs: ...html_col_width

How can I achieve the following without the spread operator:

columnDefs: [
          {"targets":0, "width":50},
          {"targets":1, "width":100},
          {"targets":2, "width":442},
          {other: stuff},
          {other: stuff}
    })

I have read and tried the following, but this is not working if the array of objects contains 2 keys: Spread Operator equivalent in IE - Javascript. The content at the provided link is about merging different objects, which makes the question rather different.

I wonder if the spread operator is sensitive to whitespace. Consider removing the space before “html” in the console log? — evolutionxbox, Oct 26 '20 at 11:23
@evolutionxbox - It isn't. It just doesn't exist at all in IE11, like most of ES2015+. — T.J. Crowder, Oct 26 '20 at 11:23
Side note: `...` is not an operator. It's like the `()` on an `if` statement: primary syntax. — T.J. Crowder, Oct 26 '20 at 11:23
@T.J.Crowder oooo. I’ve seen it called an operator. It’s good to learn new things. — evolutionxbox, Oct 26 '20 at 11:26
If the given duplicate question does not help you out, please clarfiy your question. What exactly do you want to achieve? — Nico Haase, Oct 26 '20 at 13:41
Given that Microsoft basically forcibly updated everyone from IE to Edge, honestly I would say that anyone who deliberately opted out of critical updates kinda deserves not to have things work... — Niet the Dark Absol, Oct 26 '20 at 15:39
Isn't it a simple concat `columnDefs: thisObj,columnDefs.concat(html_col_width)` — Anzor Asadov, Oct 26 '20 at 15:44
@NiettheDarkAbsol I see your point. And currently we are migrating from Win7 to Win10 which comes for us with Edge. But the migration process (we have 50000+) employees will take a little time, so we need to make sure that we can provide a solution for IE + Edge users — Umut885, Oct 27 '20 at 09:32

score 2 · Accepted Answer · answered Oct 26 '20 at 15:56

What you are using is called "Array Destructuring": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

As you said, it doesn´t work in IE, and that is because it´s part of ES6 and that is not (and never will) supported in IE 11.

One option to solve it is using transpilers like Babel.

Other option, is to define your own function:

var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
        r[k] = a[j];
return r;

};

var html_col_width = [{ "targets": 0, "width": 50 }, { "targets": 1, "width": 100 }, { "targets": 2, "width": 442 }];
var columnDefs = __spreadArrays(html_col_width, [{ other: 'stuff' }, { other: 'stuff' }]);

thank you that's exactly what I needed and it does what the spread operator does! — Umut885, Oct 27 '20 at 09:00

score 0 · Answer 2 · answered Oct 26 '20 at 16:03

Have you tried concat()?

html_col_width =[{"targets":0, "width":50}, {"targets":1, "width":100}, {"targets":2, "width":442}]

obj = {
  columnDefs: [
    {other: 'sds'},
    {others: 'dds'}
    ]
};

obj.columnDefs = obj.columnDefs.concat(html_col_width);
console.log(obj.columnDefs);

score 0 · Answer 3 · answered Oct 27 '20 at 05:37

Spread properties is a part of ECMAScript 2018 which is not supported by IE. You can use Babel to transpile it.

If you just want to use it in non Node.js environments, you can use babel-standalone. You just need to load the babel-standalone in your script and write the script you want to transpile in script tag with type “text/babel” or “text/jsx”, for example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
</head>
<body>
    <script type="text/babel">
        var html_col_width =[{"targets":0, "width":50}, {"targets":1, "width":100},{"targets":2, "width":442}];
        var columnDefs = [
        ...html_col_width,
        { other: "stuff" },
        { other: "stuff" }
        ];
        console.log(JSON.stringify(columnDefs));
    </script>
</body>
</html>

Result in IE:

Thank you for your response. It is a python backend, for that reason I could not test your solution. — Umut885, Oct 27 '20 at 09:29

How to achieve the spread operator in IE 11?

3 Answers3

Linked