Filter 101

Welcome to the whimsical side‑by‑side of documentation. Here we’ll pretend to teach you the ancient art of filtering—the kind that separates the sweet from the sour, the bright from the dull, and the code from the chaos.

🔎 Overview

A filter is a simple rule that decides whether something should stay or go. Think of it as a bouncer at a very exclusive club: “You’re red? Come on in. You’re green? Sorry, not tonight.”

📂 Types of Filters

Boolean: true/false, on/off, yes/no.
Pattern: regex, glob, or “starts‑with” magic.
Range: numbers between 7 and 42, dates after 1999‑12‑31.
Tag‑based: match one of several keywords.

💻 Example Code

const fruits = [
  {name:'Apple',  color:'red'},
  {name:'Banana', color:'yellow'},
  {name:'Grape',  color:'purple'},
  {name:'Lime',   color:'green'}
];

function filterByColor(list, allowed) {
  return list.filter(item => allowed.includes(item.color));
}

console.log(filterByColor(fruits, ['red','green']));
// → [{name:'Apple',color:'red'},{name:'Lime',color:'green'}]

🧪 Live Demo – Filter the Fruit Basket

Red Yellow Green Purple

Apple (red)

Banana (yellow)

Grape (purple)

Lime (green)

Strawberry (red)

Lemon (yellow)

🔗 Explore Other Vibes