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

Question

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 
}, '');

Answer 1

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)