では、filter と map を組み合わせた実践的な課題をまとめて紹介します。初級・中級で学んだ「絞り込み」と「変換」を同時に使う練習です。
filter × map 実践課題
- 問題
以下の配列から「在庫が1以上の商品名」だけを取り出してください。
const products = [
{ name: "Pen", stock: 0 },
{ name: "Notebook", stock: 12 },
{ name: "Marker", stock: 5 }
];
解答
解説: filter で在庫ありを絞り、map で名前だけを抽出します。
const result = products.filter(p => p.stock > 0).map(p => p.name);
console.log(result); // ["Notebook", "Marker"]
解説: filter で在庫ありを絞り、map で名前だけを抽出します。
- 問題
配列[20, 35, 50, 63, 80, 95]から「偶数かつ50以上の数値」を取り出し、その数値を2倍にしてください。
解答
const nums = [20, 35, 50, 63, 80, 95];
const result = nums.filter(n => n % 2 === 0 && n >= 50).map(n => n * 2);
console.log(result); // [100, 160]
解説: filter で条件を満たす数値を選び、map で変換しています。
- 問題
以下の配列から「メールアドレスを持っているユーザーの名前」だけを取り出してください。
const users = [
{ name: "Aki", email: "aki@example.com" },
{ name: "Ken", email: "" },
{ name: "Mao", email: "mao@example.com" }
];
解答
const result = users.filter(u => u.email).map(u => u.name);
console.log(result); // ["Aki", "Mao"]
解説: 空文字は falsy なので、u.email で「メールがあるかどうか」を判定できます。
- 問題
配列[ "sun", "moon", "star", "planet", "sky", "cloud" ]から「インデックスが奇数で、かつ文字数が4文字以上」の単語を大文字に変換してください。
解答
const words = ["sun", "moon", "star", "planet", "sky", "cloud"];
const result = words
.filter((w, i) => i % 2 === 1 && w.length >= 4)
.map(w => w.toUpperCase());
console.log(result); // ["MOON", "PLANET", "CLOUD"]
解説: filter で条件を絞り、map で文字列を大文字に変換しています。
- 問題
以下の配列から「70点以上の学生の名前とスコア」を"名前: スコア"の形式で取り出してください。
const students = [
{ name: "Aki", score: 68 },
{ name: "Ken", score: 85 },
{ name: "Mao", score: 92 }
];
解答
const result = students
.filter(s => s.score >= 70)
.map(s => `${s.name}: ${s.score}`);
console.log(result); // ["Ken: 85", "Mao: 92"]
解説: filter で合格者を選び、map で文字列に整形しています。