🔥 Master JavaScript’s map(), filter(), and reduce() Methods (with Code Examples)

wimet — Wed, 18 Jun 2025 09:04:20 +0000

👋 Hey Devs!
If you're learning JavaScript, chances are you've come across the trio: map(), filter(), and reduce().

These array methods are powerful but can be confusing at first. In this post, I’ll break them down with clean examples you can use in your own code.

🚀 1. map() – Transform Data

const prices = [10, 20, 30];
const taxIncluded = prices.map(price => price * 1.18);
console.log(taxIncluded); // [11.8, 23.6, 35.4]

📌 Use it when you need to convert or modify array items.

🔍 2. filter() – Keep What You Need

const scores = [45, 67, 89, 34];
const passing = scores.filter(score => score >= 60);
console.log(passing); // [67, 89]

📌 Use it when you want to exclude some data.

🧮 3. reduce() – Crunch Everything

const cart = [100, 200, 50];
const total = cart.reduce((acc, curr) => acc + curr, 0);
console.log(total); // 350

📌 Use it to sum, count, or combine data.

💡 Summary
These three methods are essential for writing clean, functional JavaScript. And once you get comfortable with them, you'll reach for them in almost every project.

📖 Check out my full article with visual explanation and code breakdown:
👉 https://webcodingwithankur.blogspot.com/2025/06/javascript-map-filter-reduce-explained.html

What is Debounce in JavaScript? (Explained Simply)

wimet — Mon, 16 Jun 2025 07:58:24 +0000

In modern frontend development, performance plays a crucial role — especially when dealing with events like scroll, resize, or keyup. This is where debouncing in JavaScript becomes essential.

Debounce is a technique that limits how often a function is executed. Instead of triggering a function repeatedly during a rapid event (like typing in a search bar), the function is delayed and executed only after the event has stopped firing for a defined time.

Imagine a user typing in a search field. Without debounce, each keystroke could trigger a network request — flooding the server and slowing down the UI. With debounce, the function waits until the user pauses typing, then sends one clean request.

This technique helps in reducing API calls, improving UI responsiveness, and making your code more efficient.

👉 Read the full article with code samples and live examples on my blog:

➡️ https://webcodingwithankur.blogspot.com/2025/06/javascript-debounce-made-simple-live.html

Let me know your thoughts and how you’ve used debounce in your own projects! 💬

DEV Community: wimet

🔥 Master JavaScript’s map(), filter(), and reduce() Methods (with Code Examples)

What is Debounce in JavaScript? (Explained Simply)