javascriptasciiutf-16fromcharcode

In JavaScript, how does join vs += on a string handle utf encodings differently?


What is the difference between the below two operations that accounts for the one with join resulting in "÷C " where the other with reduce results in "÷C"?

1

// returns "÷C "
["f7","43"].map(x=>'0x'+ x).map(String.fromCharCode).join('');

2

// returns "÷C"
["f7","43"].map(x=>'0x'+x).reduce((a, c) => { 
    a += String.fromCharCode(c); 
    return a 
}, '');

Solution

  • String.fromCharCode accepts multiple arguments. Each argument will be interpreted as a code unit. In the first code, since .map also provides arguments for the index and the array being iterated over:

    ["f7","43"].map(x=>'0x'+ x).map(String.fromCharCode).join('');
    

    is equivalent to

    ["f7","43"]
      .map(x=>'0x'+ x)
      .map((str, i, arr) => (
        String.fromCharCode(str, i, arr)
      )
      .join('');
    

    Which has unexpected results.

    Explicitly pass only the str instead, and it'll result in the same as in the second snippet:

    const result = ["f7","43"]
      .map(x=>'0x'+ x)
      .map((str) => (
        String.fromCharCode(str)
      ))
      .join('');
    console.log(result);

    (still, calling fromCharCode with something that isn't a number is weird and confusing, better to do it explicitly as Barmar mentions)