← Back Creator Path 🏦 Gem Vault Lesson 79/20
🎯 Missions
1 Collect gems
2 Filter by value
3 Display filtered gems!
💎 💰 ✨
🏦 Gem Vault
Gem Vault
Welcome to the Gem Vault! The treasure chest is overflowing with gems — but you only want the RARE ones. Meet .filter() — the magic sieve that keeps only items that pass your test!

🏦 What is .filter()?

Imagine a sieve at the Gem Vault. You pour in ALL the gems, and only the ones that match your criteria fall through. That's .filter()!

.filter() tests each item in an array and keeps only the ones that pass. It's perfect for finding:

// Keep gems worth 50 or more
const gems = [25, 80, 40, 90];

const rare = gems.filter(g => g >= 50);
// Result: [80, 90]

How it works:

• g => g >= 50 is a test function — it returns true (keep) or false (discard)
• Items that return true stay in the new array
• The original array stays unchanged!

// The filtering pattern:
array.filter(item => item > 10) // keep if > 10
array.filter(item => item.length > 3) // keep if length > 3

Remember: In Crystal Cavern, you used .sort() to ORGANIZE items. Now with .filter(), you can SELECT only the items you need!

✏️ CODE
// 🏦 Gem Vault - Filter your treasures! const treasures = [15, 85, 30, 90]; // Keep gems worth 50 or more: const rare = treasures.filter(t => t >= 50); console.log("Rare gems: " + rare);
✨ RESULT
💎Total: 0
✨Filtered: 0
Your Gem Collection
Add gems below!

➕ Add Gems

🔍 Filter By

Filtered Results
—

1 Challenge: Filter Words

Can you filter words that have more than 4 letters? Use .length in your filter!

const gems = ["Ruby", "Opal", "Emerald"]; const long = gems.filter(g => g.length > 4); // Result: ["Ruby", "Emerald"]

2 Challenge: Keep Even Numbers

Filter to keep only even numbers using the modulo operator % 2 === 0

const numbers = [1, 2, 3, 4, 5]; const evens = numbers.filter(n => n % 2 === 0); // Result: [2, 4]

3 Challenge: Chain Filter + Map

First filter gems over 50, then use .map() to double their values!

const gems = [30, 60, 90];
const valuable = gems.filter(g => g > 50).map(g => g * 2);
// Filtered: [60, 90], Doubled: [120, 180]

4 Challenge: Filter Objects

Filter an array of gem objects by their rarity property!

const collection = [
  {gem: "Ruby", rarity: "common"},
  {gem: "Diamond", rarity: "rare"}
];
const rare = collection.filter(c => c.rarity === "rare");
// Result: [{gem: "Diamond", rarity: "rare"}]

5 Challenge: Filter + Reduce Combo

Filter gems over 40, then use .reduce() to find the total value!

const gems = [25, 50, 30, 80];
const valuable = gems.filter(g => g > 40);
const total = valuable.reduce((sum, g) => sum + g, 0);
// Filtered: [50, 80], Total: 130

✨ What You Learned