JavaScript | for 文で書いた処理を map / filter / reduce に書き換える

JavaScript JavaScript
2020.08.01
スポンサーリンク

では「for 文で書いた処理を map / filter / reduce に書き換える練習問題」を用意します。初心者でも段階的に理解できるようにしてみます。

練習問題 1：配列の要素を2倍にする

for 文

const nums = [1, 2, 3];
const doubled = [];
for (let i = 0; i < nums.length; i++) {
  doubled.push(nums[i] * 2);
}
console.log(doubled); // [2, 4, 6]
JavaScript

👉 これを map に書き換えると？

const doubled = nums.map(n => n * 2);
JavaScript

練習問題 2：偶数だけ取り出す

for 文

const nums = [1, 2, 3, 4, 5];
const even = [];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) {
    even.push(nums[i]);
  }
}
console.log(even); // [2, 4]
JavaScript

👉 これを filter に書き換えると？

const even = nums.filter(n => n % 2 === 0);
JavaScript

練習問題 3：合計を求める

for 文

const nums = [1, 2, 3, 4];
let sum = 0;
for (let i = 0; i < nums.length; i++) {
  sum += nums[i];
}
console.log(sum); // 10
JavaScript

👉 これを reduce に書き換えると？

const sum = nums.reduce((acc, n) => acc + n, 0);
JavaScript

練習問題 4（応用）：20歳以上のユーザーの名前を大文字にして、カンマ区切りで1つの文字列にする

for 文

const users = [
  { name: 'Sato', age: 20 },
  { name: 'Suzuki', age: 17 },
  { name: 'Tanaka', age: 30 },
];

let result = '';
for (let i = 0; i < users.length; i++) {
  if (users[i].age >= 20) {
    if (result !== '') result += ', ';
    result += users[i].name.toUpperCase();
  }
}
console.log(result); // "SATO, TANAKA"
JavaScript

👉 これを filter + map + reduce に書き換えると？

const result = users
  .filter(u => u.age >= 20)          // 20歳以上を選別
  .map(u => u.name.toUpperCase())    // 名前を大文字に変換
  .reduce((acc, name) => acc ? acc + ', ' + name : name, '');

console.log(result); // "SATO, TANAKA"
JavaScript

✅ まとめ

  • for 文 → なんでもできるけどコードが長くなりがち
  • map → 「変換」専用
  • filter → 「選別」専用
  • reduce → 「集約」専用

スポンサーリンク
タイトルとURLをコピーしました