JavaScript Array Methods: The Complete Visual Guide Master these methods and you'll write 50% less code. ┌─────────────────────────────────────────┐ │ JavaScript Arrays │ ├─────────┬──────────┬──────────┬─────────┤ │ Iterate │ Transform │ Filter │ Reduce │ ├─────────┼──────────┼──────────┼─────────┤ │ forEach │ map │ filter │ reduce │ │ for...of │ flatMap │ find │ some │ │ │ sort │ findIndex│ every │ │ │ reverse │ includes │ join │ │ │ slice │ splice │ toString│ ├─────────┼──────────┼──────────┼─────────┤ │ │ │ │ │ │ "Do" │ "New" │ "Pick" │ "Result"│ └─────────┴──────────┴──────────┴─────────┘ const numbers = [1, 2, 3, 4, 5]; // Double every number numbers.map(n => n * 2); // [2, 4, 6, 8, 10] // Extract property from objects const users = [{ name: 'Alex', age: 30 }, { name: 'Sam', age: 25 }]; users.map(u => u.name); // ['Alex', 'Sam'] // Convert types const strings = ['1', '2', '3']; strings.map(Number); // [1, 2, 3] const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Even numbers only numbers.filter(n => n % 2 === 0); // [2, 4, 6, 8, 10] // Active users const users = [ { name: 'Alex', active: true }, { name: 'Bob', active: false }, { name: 'Charlie', active: true }, ]; users.filter(u => u.active); // [{ name: 'Alex' }, { name: 'Charlie' }] // Remove falsy values const mixed = [0, 1, '', 'hello', null, undefined, false, 42]; mixed.filter(Boolean); // [1, 'hello', 42] const numbers = [1, 2, 3, 4, 5]; // Sum numbers.reduce((sum, n) => sum + n, 0); // 15 // Count occurrences const fruits = ['apple', 'banana', 'apple', 'cherry', 'banana', 'apple']; fruits.reduce((count, fruit) => { count[fruit] = (count[fruit] || 0) + 1; return count; }, {}); // { apple: 3, banana: 2, cherry: 1 } // Flatten (use flat() instead though) const nested = [[1, 2], [3, 4], [5]]; nested.reduce((flat, arr) => [...flat, ...arr], []); // [1, 2, 3, 4, 5] // Group by property const people = [ { name: 'Alex', dept: 'Engineering' }, { name: 'Sam', dept: 'Marketing' }, { name: 'Charlie', dept: 'Engineering' }, ]; people.reduce((groups, person) => { (groups[person.dept] ??= []).push(person); return groups; }, {}); // { Engineering: [...], Marketing: [...] } const users = [ { id: 1, name: 'Alex', role: 'admin' }, { id: 2, name: 'Sam', role: 'user' }, { id: 3, name: 'Charlie', role: 'admin' }, ]; // Find first admin users.find(u => u.role === 'admin'); // { id: 1, name: 'Alex', role: 'admin' } // Find by id users.find(u => u.id === 2); // { id: 2, name: 'Sam', role: 'user' } // Index of first admin users.findIndex(u => u.role === 'admin'); // 0 // Not found → undefined users.find(u => u.id === 999); // undefined const numbers = [2, 4, 6, 8, 10]; // Is at least one even? (always true here, but example) numbers.some(n => n > 5); // true // Are ALL numbers even? numbers.every(n => n % 2 === 0); // true // Real use case: form validation const form = { email: '[email protected]', password: 'abc123', name: '' }; const isValid = Object.values(form).every(Boolean); // false (name is empty) // Real use case: permissions check const userPermissions = ['read', 'write']; const hasWrite = userPermissions.includes('write'); // true const isAdmin = userPermissions.includes('admin'); // false const nums = [3, 1, 4, 1, 5, 9, 2, 6]; nums.sort((a, b) => a - b); // [1, 1, 2, 3, 4, 5, 6, 9] ascending nums.sort((a, b) => b - a); // [9, 6, 5, 4, 3, 2, 1, 1] descending // Sort objects by property const users = [ { name: 'Charlie', age: 25 }, { name: 'Alex', age: 30 }, { name: 'Sam', age: 28 }, ]; users.sort((a, b) => a.age - b); // Youngest first users.sort((a, b) => a.name.localeCompare(b.name)); // Alphabetical // ⚠️ sort() mutates the original array! // Use .toSorted() (ES2023) for a new array: const sorted = nums.toSorted((a, b) => a - b); // Flatten nested arrays const nested = [1, [2, 3], [4, [5, 6]]]; nested.flat(); // [1, 2, 3, 4, [5, 6]] (one level) nested.flat(Infinity); // [1, 2, 3, 4, 5, 6] (all levels) // flatMap = map + flat (one step) const sentences = ['hello world', 'foo bar baz']; sentences.flatMap(s => s.split(' ')); // ['hello', 'world', 'foo', 'bar', 'baz'] // Practical: Filter + Transform in one step const users = [ { name: 'Alex', posts: 10 }, { name: 'Bob', posts: 0 }, { name: 'Charlie', posts: 5 }, ]; users.flatMap(u => u.posts > 0 ? [u.name] : []); // ['Alex', 'Charlie'] (filter AND extract) const arr = [1, 2, 3, 4, 5]; // slice: Extract without modifying original arr.slice(1, 3); // [2, 3] arr.slice(-2); // [4, 5] arr.slice(2); // [3, 4, 5] // arr is still [1, 2, 3, 4, 5] // splice: Modify original (remove, insert, replace) const removed = arr.splice(1, 2); // Remove 2 elements from index 1 // arr is now [1, 4, 5], removed is [2, 3] // Insert at index arr.splice(1, 0, 2, 3); // Insert 2, 3 at index 1 // arr is now [1, 2, 3, 4, 5] const colors = ['red', 'green', 'blue']; colors.includes('green'); // true colors.includes('yellow'); // false // More readable than indexOf: // Old: colors.indexOf('green') !== -1 // New: colors.includes('green') const users = [ { name: 'Alex', age: 30, role: 'admin', active: true }, { name: 'Bob', age: 20, role: 'user', active: false }, { name: 'Charlie', age: 25, role: 'user', active: true }, { name: 'Diana', age: 35, role: 'admin', active: true }, ]; // Get names of active users over 25, sorted by age const result = users .filter(u => u.active) // Keep active .filter(u => u.age > 25) // Keep over 25 .sort((a, b) => a.age - b) // Sort by age .map(u => u.name); // Extract names // ['Alex', 'Diana'] // Average age of active admins const avgAge = users .filter(u => u.role === 'admin' && u.active) .map(u => u.age) .reduce((sum, age, _, arr) => sum + age / arr.length, 0); // 32.5 Method Returns Mutates? Use Case map() New array No Transform elements filter() New array No Keep matching elements reduce() Any value No Accumulate into one value find() Element or undefined No Find first match findIndex() Index or -1 No Find index of first match some() Boolean No At least one matches? every() Boolean No All match? includes() Boolean No Contains value? sort() Same array Yes Sort elements flat() New array No Flatten nested arrays flatMap() New array No Map + flatten slice() New array No Extract portion splice() Removed elements Yes Insert/remove/replace Which array method do you use most? Any I missed? Follow @armorbreak for more JavaScript content.