Let’s be real — most of us abuse .map()
, .filter()
, and .reduce()
like they owe us money. But JavaScript arrays have way more tricks up their sleeves. If you’re only using the same three methods, you’re basically treating a Swiss Army knife like a butter knife.
So, let’s fix that. Here are 7 array functions that’ll make your code cleaner, smarter, and maybe even impress your boss (no guarantees).
1. .find() – The Detective 🕵️♂️
Need to locate the first item in an array that matches a condition? .find()
is on the case.
Example: Find the first pizza in the list 🍕
const foods = ['🥦', '🍕', '🥬', '🍕', '🍔'];
const firstPizza = foods.find(food => food === '🍕');
console.log(firstPizza); // 🍕
Boom! First pizza found, case closed. If only .find()
worked in my fridge…
2. .some() – The Optimist 🌞
Checks if at least one item in the array meets a condition. Great for when you just need a little hope.
Example: Is there any spicy food? 🌶️
const foods = [{ name: '🍔', spicy: false }, { name: '🌶️', spicy: true }];
const hasSpicy = foods.some(food => food.spicy);
console.log(hasSpicy); // true
All you need is one spicy dish to ignite hope (and your taste buds).
3. .every() – The Pessimist ☁️
This one isn’t happy unless everything matches the condition.
Example: Are all users above 18? 🚨
const users = [{ age: 21 }, { age: 25 }, { age: 16 }];
const allAdults = users.every(user => user.age >= 18);
console.log(allAdults); // false ❌
One minor ruins it for everyone. Just like that one friend who forgets their ID at the bar.
4. .flat() – The Pancake Maker 🥞
Tired of nested arrays? Flatten them like a pro!
Example: Flattening a deep array 📦
const messyArray = [1, [2, [3, 4], 5], 6];
const flatArray = messyArray.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]
5. .groupBy() — The Organizer 📂
Need to categorize items in an array? Object.groupBy()
is your best friend! (Sadly it's a static method available in Object type and not in Array.prototype due to some conflicts)
Example: Group people by same age 😈
const people = [
{ name: 'Mia', age: 25 },
{ name: 'Dani', age: 25 },
{ name: 'Ava', age: 30 },
{ name: 'Johny', age: 30 }
];
const groupedByAge = Object.groupBy(people, (person) => person.age);
console.log(groupedByAge);
/* {
25: [{ name: 'Mia', age: 25 }, { name: 'Dani', age: 25 }],
30: [{ name: 'Ava', age: 30 }, { name: 'Johny', age: 30 }]
} */
Now, all people of the same age are neatly grouped together!
6. .fill() – The Rage-Quit Button 😡
Need to replace all values in an array? .fill()
is your emergency reset button.
Example: Reset all scores to zero 🎮
const scores = [5, 10, 15];
scores.fill(0);
console.log(scores); // [0, 0, 0] 🔄
It’s like wiping your browser history before a tech support visit. 😉
7. .sort() – The Sneaky One 🤡
Sorting numbers? Don’t trust .sort()
blindly—it has bad habits.
Example: Sorting numbers (the wrong way) 🚨
const numbers = [10, 2, 5, 1];
console.log(numbers.sort()); // [1, 10, 2, 5] 😱
Why? Because .sort()
treats numbers as strings. Fix it like this:
console.log(numbers.sort((a, b) => a - b)); // [1, 2, 5, 10] ✅
Lesson learned: Never trust .sort()
without a compare function.
Final Thoughts 💡
JavaScript arrays are way more powerful than most developers realize. Master these functions, and you’ll write cleaner, smarter code that actually makes sense.
Which function do you use the most? Drop a comment or just leave a like. 😃
Top comments (0)