Clever Geek Handbook

Why does the newsletter operator in CodePen and Chrome have different results?

I tested the spread operator in CodePen and Chrome and I got a different result.

var str = 'foo';
var char = [...str];
console.log(char);

In CodePen I used Babel preprocessor and got ["foo"]

.

In Chrome Developer Tools I got ["f", "o", "o"]

.

Why is this happening?

+3


source to share


2 answers


As mentioned in the comment, this is related to babp js transpiler. It looks like codepen uses this babel-preset es2015-loose

and it has some discrepancies in the implementation of its spread operator:

Babels free mode translates ES6 code into ES5 code that is less faithful to ES6 semantics.



source: http://2ality.com/2015/12/babel6-loose-mode.html

This is actually a code problem, they probably shouldn't be using the mode loose

these days.

+4


source


You can see the difference between the code compiled by Codepen and JS Bin.

Codepen compiled:

'use strict';

var str = 'foo';
var char = [].concat(str);
alert(char);


JS Bin compiled:

try {
'use strict';

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

    var str = 'foo';
    var char = [].concat(_toConsumableArray(str));
    window.runnerWindow.proxyConsole.log(char);
} catch (error) { throw error; }
0


source






More articles:


All Articles