DEV Community

Ganesh Gurav
Ganesh Gurav

Posted on

Master These 7 JavaScript Array Functions and Instantly Level Up — PART 1

Image description

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); // 🍕
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 ❌
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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 }]
} */
Enter fullscreen mode Exit fullscreen mode

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] 🔄
Enter fullscreen mode Exit fullscreen mode

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] 😱
Enter fullscreen mode Exit fullscreen mode

Why? Because .sort() treats numbers as strings. Fix it like this:

console.log(numbers.sort((a, b) => a - b)); // [1, 2, 5, 10] ✅
Enter fullscreen mode Exit fullscreen mode

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)