JavaScript入門 練習問題 4：複数のコールバック関数の実行順序
JavaScriptで2つのコールバック関数が使われているコードについて、以下のコードを実行したときのコンソールへの出力として正しいものを選んでください。
```javascript
function processNumbers(arr, callback) {
console.log('数値処理開始');
const doubled = arr.map(num => {
console.log(`${num}を処理中`);
return num * 2;
});
console.log('変換完了');
callback(doubled);
console.log('数値処理終了');
}
function showResult(numbers) {
console.log('結果: [' + numbers.join(', ') + ']');
}
processNumbers([1, 3], showResult);
```
- 数値処理開始 1を処理中 3を処理中 変換完了 結果: [2, 6] 数値処理終了
- 数値処理開始 変換完了 結果: [2, 6] 数値処理終了
- 1を処理中 3を処理中 数値処理開始 変換完了 結果: [2, 6] 数値処理終了
- 数値処理開始 1を処理中 3を処理中 変換完了 数値処理終了 結果: [2, 6]
- 数値処理開始 1を処理中 3を処理中 結果: [2, 6] 変換完了 数値処理終了
Qraftユーザーの成績：難易度 Dランク（レーティング1112）・正答率 68%（19/28回正解）
レーティングは解いた人の実力と正誤から算出する難しさ（初期値1200）。ランクはその全問題中の順位（S+が最難関、F-が最易）
正解と解説を見る
このコードには `arr.map()` に渡す内部コールバックと、`processNumbers` に渡す外部コールバック（`showResult`）の2種類があります。`map()` による各要素の処理が終わってから `callback(doubled)` が呼ばれるため、「数値処理開始→1を処理中→3を処理中→変換完了→結果: [2, 6]→数値処理終了」の順になります。
【正解の理由】
`map()` は配列の各要素に対して内部コールバックを順番に実行するため、「1を処理中」「3を処理中」が先に出力されます。その後 `doubled` が完成してから `callback(doubled)`（＝`showResult`）が呼ばれ、最後に「数値処理終了」が出力されます。
【不正解の理由】
• 数値処理開始→変換完了→結果: [2, 6]→数値処理終了：`map()` 内部コールバックの出力（1を処理中/3を処理中）が抜けています。
• 1を処理中→3を処理中→数値処理開始→変換完了→結果: [2, 6]→数値処理終了：`processNumbers` が呼ばれる前に `map` が実行されることはありません。
• 数値処理開始→1を処理中→3を処理中→変換完了→数値処理終了→結果: [2, 6]：`callback(doubled)` は「数値処理終了」より前の行で呼ばれるため、「結果」の出力が最後になることはありません。
• 数値処理開始→1を処理中→3を処理中→結果: [2, 6]→変換完了→数値処理終了：「変換完了」は `callback(doubled)` の呼び出しより前の行に書かれているため、「結果」より先に出力されます。