では、さきほどの 問題 A・B・C のそれぞれについて、
「ありがちな間違いパターン」→「実際の挙動」→「正しい修正版」
をステップ実行（console.log付き）で見せる実験コードを用意します。
実験 1：return を忘れたパターン（問題A）
「map の中で return を書き忘れる」と、どうなるか確認します。
// ❌ 間違いパターン
let arr = [2, 4, 6];
let resultWrong = arr.map(n => {
console.log('処理中の値:', n);
n / 3; // ← return を書いていない！
});
console.log('結果(間違い):', resultWrong);
// => [undefined, undefined, undefined]
// ✅ 正しいパターン
let resultCorrect = arr.map(n => {
console.log('処理中の値:', n);
return n / 3; // ← return で返す
});
console.log('結果(正しい):', resultCorrect);
// => [0.666..., 1.333..., 2]
🔍 解説：
mapの中でreturnされた値だけが「新しい配列」に入る。returnを書かないと、暗黙的にundefinedが返る。- したがって結果は
[undefined, undefined, undefined]。
実験 2：アロー関数でオブジェクトを返すときの落とし穴（問題B）
アロー関数で {} を使うときの カッコの書き忘れ に注意。
let items = [{name: 'Pen', price: 100}, {name: 'Notebook', price: 250}];
// ❌ 間違いパターン：丸括弧を付けない
let wrong = items.map(item => { name: item.name, priceWithTax: item.price * 1.1 });
console.log('結果(間違い):', wrong);
// => [undefined, undefined]
// ✅ 正しいパターン：オブジェクト全体を ( ) で囲む
let correct = items.map(item => ({
name: item.name,
priceWithTax: item.price * 1.1
}));
console.log('結果(正しい):', correct);
// => [{name:'Pen', priceWithTax:110}, {name:'Notebook', priceWithTax:275}]
🔍 解説：
{}は JavaScript では「関数の本体」とも解釈される。mapのアロー関数でオブジェクトリテラルを返すときは、
丸括弧( )で囲む 必要がある。
実験 3：元の配列を直接変更してしまう（副作用）（問題B）
map は「新しい配列を作る」のが目的なのに、元を壊してしまうパターン。
let items = [{name: 'Pen', price: 100}, {name: 'Notebook', price: 250}];
// ❌ 間違いパターン：元のオブジェクトを直接書き換え
let withSideEffect = items.map(item => {
item.price = item.price * 1.1; // 元配列を変更してしまう
return item;
});
console.log('新しい配列:', withSideEffect);
console.log('元の配列:', items);
// 両方の price が110%された状態になってしまう！
// ✅ 正しいパターン：新しいオブジェクトを作る
let pureMap = items.map(item => ({
name: item.name,
priceWithTax: item.price * 1.1
}));
console.log('新しい配列:', pureMap);
console.log('元の配列(変更なし):', items);
🔍 解説：
mapの中で元のオブジェクトを変更すると、元の配列も変わる。- これは「副作用（side effect）」と呼ばれ、後の処理でバグの原因になる。
mapは「新しい値を返す」ためのメソッドなので、新しいオブジェクトを返すように書くのがベスト。
実験 4：forEach との混同（問題C）
forEach は 新しい配列を返さない（戻り値が undefined）ので注意。
let nums = [3, 7, 11];
// ❌ 間違いパターン：forEach で新配列を作ろうとしている
let wrong = nums.forEach(x => `${x}^2 = ${x * x}`);
console.log('結果(間違い):', wrong);
// => undefined
// ✅ 正しいパターン：map なら新しい配列を返す
let correct = nums.map(x => `${x}^2 = ${x * x}`);
console.log('結果(正しい):', correct);
// => ["3^2 = 9", "7^2 = 49", "11^2 = 121"]
🔍 解説：
forEachは「繰り返すだけ」で、戻り値は常にundefined。mapは「処理して return した値を集める」。- 「配列を作りたいとき」は
map、「処理だけしたいとき」はforEach。
まとめ
| ミスの種類 | 症状 | 修正方法 |
|---|---|---|
return を忘れる | [undefined, undefined, ...] | return を書く |
{} でオブジェクト返却 | undefined | ( ) でオブジェクトを囲む |
| 元配列を変更 | 元データも変わる | 新しいオブジェクトを返す |
forEach 使用 | 戻り値が undefined | map を使う |
💡 ワンポイント実践：
もしブラウザで動かすなら、これらの実験コードをそのまま
Chromeの「開発者ツール > Console」に貼って実行してみましょう。console.log で処理の流れが見えるので、map の仕組みがよくわかります。