Search code examples
javascriptgoogle-chromeecmascript-6codepen

Why does spread operator at CodePen and Chrome have different results?

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

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

At CodePen I used the Babel preprocessor and got ["foo"].

In Chrome developer tools, I got ["f", "o", "o"].

Why does this happen?

Solution

  • As mentioned in the comment, this is related to babel js transpiler. Looks like codepen is using this babel-preset es2015-loose and it has some divergences in its spread operator implementation:

    Babel’s loose mode transpiles ES6 code to ES5 code that is less faithful to ES6 semantics.

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

    This is actually a codepen issue, they probably shouldn't be using loose mode these days.