Safari Spotter | code.sinau.dev

🔭 What is .find()?

Imagine ranger binoculars sweeping across the herd, left to right. The moment an animal matches your clue — stop! That's .find(). It returns the first item that passes the test, and ignores everything after it.

// Find the first animal faster than 70 km/h
const speeds = [40, 65, 120, 80];

const fast = speeds.find(s => s > 70);
// Result: 120 (the FIRST one over 70)

What vs Where: In Neon Patrol you learned .findIndex() — it gives you the WHERE (a position number). .find() gives you the WHAT (the item itself)!

const animals = ["Zebra", "Cheetah", "Lion"];

animals.findIndex(a => a === "Cheetah") // → 1 (WHERE: index 1)
animals.find(a => a === "Cheetah") // → "Cheetah" (WHAT: the item)

What if nothing matches? .find() returns undefined — the ranger saw nothing today. Always check before using the result:

const tiger = animals.find(a => a === "Tiger");
if (tiger) { console.log("Found: " + tiger); } // doesn't run
else { console.log("No sighting today!"); }

And .includes()? It doesn't care WHERE or WHAT — it just answers yes or no (true/false). Perfect for simple values like strings and numbers:

const names = ["Zebra", "Cheetah", "Lion"];

names.includes("Lion") // → true
names.includes("Tiger") // → false 🙁

Remember: In Gem Vault, .filter() kept ALL matches as a new array. .find() stops at the FIRST match and returns just that one item. Many results → filter. One result → find!

1 Challenge: Find the First Big Number

Scan the list and stop at the FIRST number greater than 10!

const numbers = [3, 8, 15, 22];
const big = numbers.find(n => n > 10);
// Result: 15 (22 never gets checked!)

2 Challenge: WHAT vs WHERE

Same test, two superpowers: .find() gives the item, .findIndex() gives the position!

const fruits = ["Apple", "Banana", "Cherry"];
fruits.find(f => f.length > 5); // → "Banana"
fruits.findIndex(f => f.length > 5); // → 1

3 Challenge: Membership Check

.includes() just answers true or false — no position, no item!

const safari = ["Elephant", "Lion", "Zebra"];
safari.includes("Lion"); // → true
safari.includes("Penguin"); // → false (wrong continent! 🐧)

4 Challenge: Nothing Found → undefined

When no animal passes the test, .find() returns undefined. Guard it with an if!

const animals = ["Zebra", "Lion"];
const whale = animals.find(a => a === "Whale");
if (whale) { console.log("Found: " + whale); }
else { console.log("No sighting!"); } // → "No sighting!"

5 Challenge: Filter + Find Combo

Master move! First .filter() to keep only predators, then .find() the first one faster than 100!

const animals = [
  { name: "Zebra", diet: "herbivore", speed: 65 },
  { name: "Lion", diet: "predator", speed: 80 },
  { name: "Cheetah", diet: "predator", speed: 120 }
];
const rocket = animals.filter(a => a.diet === "predator").find(a => a.speed > 100);
// Result: { name: "Cheetah", ... } 🏆

✨ What You Learned

🔭.find() — Returns the FIRST item that passes your test, then stops scanning
📍.find() vs .findIndex() — find gives you WHAT, findIndex gives you WHERE
👻undefined — What find returns when nothing matches (guard with if!)
❓.includes() — A simple true/false check: is this value in the array?
🔗Chains — .filter().find(): narrow the herd, then spot the first match!