Treasure Sorter | code.sinau.dev

🎯 Today's Missions

🪙 What we're MAKING today: My Treasure Sorter

In Dragon Array you learned that arrays are ordered lists with index [0], [1], [2]... In Treasure Filter you kept only the treasures you wanted. But the vault shelf is still a MESS! What if the cheapest should come first? Or the priciest? Or names A → Z? That's a job for .sort() — and today YOU write its rules! 🪙

What is a comparator? It's a tiny function you hand to sort() that compares two items, a and b. Return a negative number → a goes first. Return a positive number → b goes first. (a, b) => a.value - b.value means "smaller values first" (ascending). Flip the subtraction → descending! For names, use a.name.localeCompare(b.name) — it knows the alphabet! 🔤

🔗 Last time in Treasure Filter you chained filter().map() to find and transform treasures. Today you'll put results in ORDER with sort() — and chain it with slice(0, 3) to build a Top 3 leaderboard! Same vault, new superpower! 🏆

treasure-sorter.js JavaScript

💡 Comparators return: − number → a first, + number → b first sort = you write the rules

vault shelf LIVE

📚 Shown

💰 Priciest

—

🪙 Cheapest

—

💎 The Vault (array)

🪙 vault after .sort() — read it left to right: [0], [1], [2]...

🪤 MISSION: The Number Trap — try plain .sort() on numbers!

var scores = [80, 9, 100];
scores.sort(); // no comparator... → ❓❓❓
scores.sort((a, b) => a - b); → [9, 80, 100] ✓

😱 Plain .sort() compares items as TEXT: "100" < "80" < "9" (just like "1" < "8" < "9" in the dictionary)! That's why YOU must always hand it a comparator like (a, b) => a - b for numbers. 🪤 Dodged!

Step 1 / 5

🔑 Sort by KEY (which property?)

🧭 DIRECTION (which way?)

🏆 Top 3 only (vault.slice(0, 3))

OFF — showing the whole vault

📋 Your 5 Sorting Challenges

0 of 5 challenges complete

🪙

You Mastered Treasure Sorter!

You wrote comparator functions that tell sort() EXACTLY how to order your array — by value, by name, up or down — and dodged the Number Trap! Ordering data is what every leaderboard, high-score list, and price filter really does! 🏆

💫 What You Learned

.sort(fn) orders your array using rules YOU write — a comparator
(a, b) => a - b → ascending · (a, b) => b - a → descending
🪤 Plain .sort() compares TEXT: [80, 9, 100] sorts to [100, 80, 9]!
Sort objects by any property: vault.sort((a,b) => a.value - b.value)
Names use a.name.localeCompare(b.name) — it knows A → Z
Chain it! vault.sort(...).slice(0, 3) builds a Top 3 leaderboard! 🏆

🪙 Your Creation

My Treasure Sorter

🔍 Come Back Tomorrow!

Next up: Super Search — you can filter, transform, and sort... but what about finding ONE exact treasure? .find() returns the FIRST match and .includes() checks if it's in the vault at all! 🕵️

🏠 Home

Nice! 🎉