次のコードの出力として正しいものはどれですか？ const result = Array.from("ABC", (char) => char.toLowerCase()); console.log(result);

解説

Array.from() の第1引数に文字列を渡すと、文字列はiterableなので1文字ずつ分割されて配列の各要素になります。さらに第2引数にマッピング関数を渡すことで、各要素に対して変換処理を適用できます。これは Array.from(iterable).map(fn) と同等の結果になりますが、中間配列を生成しない分わずかに効率的です。このコードでは "ABC" が ["A", "B", "C"] に分割されたあと、マッピング関数 (char) => char.toLowerCase() が各要素に適用されるため、最終的に ["a", "b", "c"] が出力されます。実務でよく見かけるパターンとしては、第1引数に { length: n } を渡して任意の長さの配列を初期化するケースがあります。たとえば Array.from({ length: 3 }, (_, i) => i + 1) は [1, 2, 3] を返します。new Array(3).map(...) ではスロットが空（empty）のため map が動作しませんが、Array.from なら undefined で埋められた状態になるためマッピング関数が正しく呼ばれます。この違いは初心者がつまずきやすいポイントです。文字列が ["ABC"] のように1要素の配列になることはありません。文字列はiterableとして1文字ずつ走査されます。ネストした配列になることもなく、マッピング関数は各文字に対してスカラー値を返しているだけです。第2引数を省略した場合は ["A", "B", "C"] になりますが、今回はマッピング関数が指定されているため小文字に変換されます。