.some() and .every() are handy JavaScript array methods for checking conditions across elements. In this hands-on React tutorial, you'll explore them through real-time examples—like number checks, form validation, and skill evaluation—while sharpening your logic in a modern frontend setup.
Example 1: Simple Some & Every
This example demonstrates the basic use of .some() and .every() on a simple number array. You'll check if certain numbers exist and whether all values meet a condition (like being positive or negative). It’s a clean, beginner-friendly way to get familiar with how these methods behave.
app/(pages)/simple/page.tsx
const numbers = [2, 4, 6, 8, 10];export default function SimplePage() { const hasEight = numbers.some(number => number === 8); const hasTwelve = numbers.some(number => number === 12); const allPositive = numbers.every(number => number > 0); const allNegative = numbers.every(number => number < 0); return ( <div className="flex flex-col items-center justify-center w-full max-w-[600px] h-[60vh] mx-auto gap-4"> <h1 className="font-semibold text-lg">Simple Some & Every</h1> <p>Numbers array has 8? {hasEight ? "Yes" : "No"}</p> <p>Numbers array has 12? {hasTwelve ? "Yes" : "No"}</p> <p>Are all positive numbers? {allPositive ? "Yes" : "No"}</p> <p>Are all negative numbers? {allNegative ? "Yes" : "No"}</p> </div> )}
Example 2: Check Form Fields Completion
Here, .some() checks if the user has started filling out a form, while .every() ensures that all form fields are filled in. This pattern is extremely useful in real-world apps to enable or disable submission buttons based on form completeness.
This example simulates checking a user’s skills against job qualifications. .every() is used to see if the user qualifies for frontend, backend, or design roles, while .some() checks for knowledge of individual skills like Figma or SQL. This is a great use case for filtering based on inclusion criteria.