JavaScript | すべての要素に順番に同じ処理を行い、新しい配列を作る

ここでは、各問題（A〜C）を「ステップ実行風」に console.log() で中身を見える化 したサンプルコードを紹介します。
実際にブラウザの開発者ツール（Console タブ）や Node.js で動かすと、どんな順番で要素が処理されているか がよくわかります。

問題A：数値を3で割る — ステップ実行付き

let arr = [2, 4, 6];

let result = arr.map((n, index) => {
  console.log(`--- ステップ ${index + 1} ---`);
  console.log(`取り出した要素: ${n}`);
  
  let divided = n / 3;
  console.log(`処理結果: ${n} ÷ 3 = ${divided}`);
  
  console.log(`返す値（新しい配列に入る）: ${divided}`);
  console.log('----------------------');
  
  return divided; // return が重要！
});

console.log("最終的な新しい配列:", result);
console.log("元の配列は変わらない:", arr);

let arr = [2, 4, 6];

let result = arr.map((n, index) => {
  console.log(`--- ステップ ${index + 1} ---`);
  console.log(`取り出した要素: ${n}`);
  
  let divided = n / 3;
  console.log(`処理結果: ${n} ÷ 3 = ${divided}`);
  
  console.log(`返す値（新しい配列に入る）: ${divided}`);
  console.log('----------------------');
  
  return divided; // return が重要！
});

console.log("最終的な新しい配列:", result);
console.log("元の配列は変わらない:", arr);

🟢 実行結果（出力例）

--- ステップ 1 ---
取り出した要素: 2
処理結果: 2 ÷ 3 = 0.6666666666666666
返す値（新しい配列に入る）: 0.6666666666666666
----------------------
--- ステップ 2 ---
取り出した要素: 4
処理結果: 4 ÷ 3 = 1.3333333333333333
返す値（新しい配列に入る）: 1.3333333333333333
----------------------
--- ステップ 3 ---
取り出した要素: 6
処理結果: 6 ÷ 3 = 2
返す値（新しい配列に入る）: 2
----------------------
最終的な新しい配列: [ 0.6666666666666666, 1.3333333333333333, 2 ]
元の配列は変わらない: [ 2, 4, 6 ]

問題B：税込価格の配列を作る — ステップ実行付き

let items = [
  { name: 'Pen', price: 100 },
  { name: 'Notebook', price: 250 }
];

let withTax = items.map((item, index) => {
  console.log(`--- ステップ ${index + 1} ---`);
  console.log(`取り出した商品:`, item);
  
  let taxedPrice = item.price * 1.1;
  console.log(`税込価格計算: ${item.price} × 1.1 = ${taxedPrice}`);
  
  let newItem = {
    name: item.name,
    priceWithTax: taxedPrice
  };
  console.log(`返すオブジェクト:`, newItem);
  console.log('----------------------');
  
  return newItem; // 新しいオブジェクトを返す（元は壊さない）
});

console.log("最終的な新しい配列:", withTax);
console.log("元の配列は変わらない:", items);

let items = [
  { name: 'Pen', price: 100 },
  { name: 'Notebook', price: 250 }
];

let withTax = items.map((item, index) => {
  console.log(`--- ステップ ${index + 1} ---`);
  console.log(`取り出した商品:`, item);
  
  let taxedPrice = item.price * 1.1;
  console.log(`税込価格計算: ${item.price} × 1.1 = ${taxedPrice}`);
  
  let newItem = {
    name: item.name,
    priceWithTax: taxedPrice
  };
  console.log(`返すオブジェクト:`, newItem);
  console.log('----------------------');
  
  return newItem; // 新しいオブジェクトを返す（元は壊さない）
});

console.log("最終的な新しい配列:", withTax);
console.log("元の配列は変わらない:", items);

🟢 実行結果（出力例）

--- ステップ 1 ---
取り出した商品: { name: 'Pen', price: 100 }
税込価格計算: 100 × 1.1 = 110
返すオブジェクト: { name: 'Pen', priceWithTax: 110 }
----------------------
--- ステップ 2 ---
取り出した商品: { name: 'Notebook', price: 250 }
税込価格計算: 250 × 1.1 = 275
返すオブジェクト: { name: 'Notebook', priceWithTax: 275 }
----------------------
最終的な新しい配列: [
  { name: 'Pen', priceWithTax: 110 },
  { name: 'Notebook', priceWithTax: 275 }
]
元の配列は変わらない: [
  { name: 'Pen', price: 100 },
  { name: 'Notebook', price: 250 }
]

問題C：x^2 = y の形に変換 — ステップ実行付き

let nums = [3, 7, 11];

let formatted = nums.map((x, index) => {
  console.log(`--- ステップ ${index + 1} ---`);
  console.log(`取り出した数値: ${x}`);
  
  let squared = x * x;
  console.log(`2乗の計算: ${x} × ${x} = ${squared}`);
  
  let text = `${x}^2 = ${squared}`;
  console.log(`返す文字列: "${text}"`);
  console.log('----------------------');
  
  return text;
});

console.log("最終的な新しい配列:", formatted);
console.log("元の配列は変わらない:", nums);

let nums = [3, 7, 11];

let formatted = nums.map((x, index) => {
  console.log(`--- ステップ ${index + 1} ---`);
  console.log(`取り出した数値: ${x}`);
  
  let squared = x * x;
  console.log(`2乗の計算: ${x} × ${x} = ${squared}`);
  
  let text = `${x}^2 = ${squared}`;
  console.log(`返す文字列: "${text}"`);
  console.log('----------------------');
  
  return text;
});

console.log("最終的な新しい配列:", formatted);
console.log("元の配列は変わらない:", nums);

🟢 実行結果（出力例）

--- ステップ 1 ---
取り出した数値: 3
2乗の計算: 3 × 3 = 9
返す文字列: "3^2 = 9"
----------------------
--- ステップ 2 ---
取り出した数値: 7
2乗の計算: 7 × 7 = 49
返す文字列: "7^2 = 49"
----------------------
--- ステップ 3 ---
取り出した数値: 11
2乗の計算: 11 × 11 = 121
返す文字列: "11^2 = 121"
----------------------
最終的な新しい配列: [ '3^2 = 9', '7^2 = 49', '11^2 = 121' ]
元の配列は変わらない: [ 3, 7, 11 ]

ここでの学びポイント