ARRAY METHODS

Mastering JavaScript Array Methods: A Fun and Practical Guide

Get Njagua Nyingi Kevin’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

If you’ve ever worked with JavaScript, you’ve probably encountered arrays. But did you know that JavaScript has some powerful built-in methods that make working with arrays a breeze? Today, we’ll explore these methods with some fun examples and a sprinkle of humor to keep things entertaining. Let’s dive in!

1. Filter Method: No More Junk Data!

Imagine you’re sorting out your closet and deciding which clothes to keep. The filter method is like your inner fashion police — it goes through the array (your wardrobe) and keeps only what meets your condition.

Example: Filtering Scores

const scores = [10, 30, 15, 25, 50, 40, 5];
const filteredScores = scores.filter(score => score > 18);
console.log(filteredScores); // [30, 25, 50, 40]

Translation? You're not allowed in the party if you’re not at least 18! 🎉

Example: Filtering Premium Users

const users = [
  { name: "Kevin", premium: true },
  { name: "John", premium: false },
  { name: "Wick", premium: false },
  { name: "Wangari", premium: true }
];
const premiumUsers = users.filter(user => user.premium);
console.log(premiumUsers);

Premium users only? Sorry, free-tier folks — Netflix isn’t free! 😆

2. Map Method: Transform Your Data Like a Magician

Ever wanted to double your money instantly? Well, the map method won’t do that (sorry), but it will transform your data into something new!

Example: Halving Prices for a Sale

const prices = [20, 10, 30, 25, 15, 40, 80, 5];
const salePrices = prices.map(price => price / 2);
console.log(salePrices);

Everything is 50% off! (Unless you’re at a high-end fashion store — then it’s just “selected items.”)

3. Reduce Method: Counting Like a Pro

You know when you’re trying to track how many times you’ve hit “Snooze” on your alarm? That’s where reduce shines — it accumulates values over time.

Example: Counting Scores Over 50

const scores = [10, 20, 60, 40, 70, 90, 30];
const over50 = scores.reduce((acc, curr) => curr > 50 ? acc + 1 : acc, 0);
console.log(over50); // 3

That’s three people flexing their scores while you barely passed. 😅

Example: Adding Mario’s Scores

const userScores = [
  { player: "Mario", score: 20 },
  { player: "Mamoush", score: 40 },
  { player: "Mario", score: 30 },
  { player: "Beyonce", score: 10 }
];
const marioScore = userScores.reduce((acc, curr) => curr.player === "Mario" ? acc + curr.score : acc, 0);
console.log(marioScore); // 50

Mario wins again! But let’s be honest, Luigi deserves more love. 💚

4. Find Method: First Come, First Served!

The find method is like finding the first seat available at a concert. It returns the first element that meets the condition.

const theScore = [10, 5, 0, 40, 30, 10, 90, 70];
const firstHighScore = theScore.find(score => score > 50);
console.log(firstHighScore); // 90

Only the first high score gets the VIP treatment! 🎟️

5. Sort Method: Rearranging Your Life (or Just Data)

Sorting is great… until you use it on numbers and realize it sorts them as strings by default. (Yes, “100” comes before “2” because JavaScript is quirky.)

Example: Sorting Numbers

const ages = [20, 10, 2, 13, 56, 12, 76, 45];
ages.sort((a, b) => a - b);
console.log(ages);

Now they’re in proper order! (Unlike my priorities. 😅)

Example: Sorting Players by Score

const players = [
  { player: "Mario", score: 20 },
  { player: "Mamoush", score: 40 },
  { player: "Beyonce", score: 10 },
  { player: "Sasha", score: 70 }
];
players.sort((a, b) => b.score - a.score);
console.log(players);

Beyoncé may run the world, but Sasha dominates the leaderboard. 🔥

6. Chaining Methods: Why Stop at One?

Want to filter and modify data in one go? Method chaining is your best friend.

const produce = [
  { name: "goldstar", price: 20 },
  { name: "mushroom", price: 40 },
  { name: "green shells", price: 30 },
  { name: "banana skin", price: 10 },
  { name: "red shells", price: 50 }
];

const promotions = produce
  .filter(product => product.price > 20)
  .map(product => `The ${product.name} is now ${product.price / 2} pounds!`);
console.log(promotions);

Boom! We filtered expensive items and applied discounts in one smooth move. Like a pro. 😎

Final Thoughts

JavaScript array methods make handling data much easier (and a lot more fun). Whether you’re filtering, mapping, reducing, sorting, or chaining them together, these methods will save you time and lines of code.

So go forth, brave coder, and wield these array methods like a mighty JavaScript warrior! ⚔️💻

If you enjoyed this guide, share it with a fellow coder who needs to level up their JavaScript skills! 🚀