Treasure Filter | code.sinau.dev

🎯 Today's Missions

💎 What we're MAKING today: My Treasure Filter

In Dragon Array you stored treasures in a list with push() and pop(). But what if you want to FIND only the expensive ones? Or turn every treasure into its gold value? That's where .filter() and .map() come in! 💎

What is .filter()? It looks at every item in your array and KEEPS only the ones that pass a test. treasures.filter(t => t.value > 100) keeps only treasures worth more than 100 gold! What is .map()? It TRANSFORMS every item into something new. treasures.map(t => t.name) creates a list of just the names! Combined, these turn a messy pile into exactly what you need! ✨

🔗 Last time in Dragon Array you learned dragons.push() to add items and dragons.length to count them. Today, instead of just adding items, you'll FILTER to find specific items and MAP to transform them. Same array, superpowers! 💎

treasure-vault.js JavaScript

var treasures = [
  { name: "Ruby", emoji: "❤️", value: 250 },
  { name: "Sapphire", emoji: "💎", value: 180 },
  { name: "Emerald", emoji: "💚", value: 320 },
  { name: "Gold Coin", emoji: "🪙", value: 50 },
  { name: "Diamond", emoji: "💠", value: 500 }
];

// Use the SLIDER to set minValue
// Then press FILTER to call .filter()

💡 Use the slider to set your gold threshold .filter() finds · .map() transforms

vault view LIVE

📊 Total items

✨ Filtered

💰 Gold value

1,300

💎 All Treasures (array)

✨ Filtered Result (.filter + .map)

Step 1 / 5

Filter by Gold! Set a minimum value with the slider, then press Filter. Try setting the slider to 150 gold — only treasures worth 150+ should appear!

💰 Minimum Gold Value (filter threshold)

Min Value: 0

✨ Show .map() transformation

OFF — showing filtered names only

📋 Your 5 Filter Challenges

0 of 5 challenges complete

💎

You Mastered Treasure Filter!

You learned .filter() to FIND only what you need, and .map() to TRANSFORM everything! These two methods turn a raw array into exactly what you want — the superpowers every real app uses! 💎✨

💫 What You Learned

.filter(fn) keeps only items that pass the test — arr.filter(x => x.value > 100)
The test function returns true (keep) or false (remove)
.map(fn) transforms every item — arr.map(x => x.name) gives you just names!
Chain them! arr.filter(...).map(...) filters THEN transforms!
Arrays power real apps: filtering search results, transforming data, converting currencies!

💎 Your Creation

My Treasure Filter

💎 Come Back Tomorrow!

Next up: Array Sorting — what if you want to sort treasures from cheapest to most expensive? Learn .sort() to order your array by any property! 💰

🏠 Home

Nice! 🎉