Considerando o trecho de código a seguir:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const str = 'Olá! 😀';

    str.split('').forEach((char) => console.log(char));

<!-- end snippet -->

Utilizando o método `split`, note que (quase) todos os caracteres foram separados da string corretamente. Contudo, o emoji foi quebrado em duas partes — `�` e `�`.

Mas, se eu usar algum recurso mais novo da linguagem (como a [implementação de strings para o protocolo de iteração][1]), o emoji não é dividido em duas partes. Veja estes dois exemplos:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const str = 'Olá! 😀';

    for (const char of str) {
      console.log(char);
    }

<!-- end snippet -->

Ou até mesmo um exemplo mais similar ao primeiro excerto de código desta pergunta. A única diferença é que, ao contrário do `split`, a sintaxe de espalhamento foi utilizada:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const str = 'Olá! 😀';

    [...str].forEach((char) => console.log(char));

<!-- end snippet -->

A sintaxe de espalhamento utiliza, por baixo dos panos, o protocolo de iteradores do ECMAScript.

Por que acontece isso? O que provoca essa diferença?


  [1]: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator