Master JavaScript Array Methods with Live Examples (map, filter, reduce)

If you’re learning JavaScript and still feel unsure about map(), filter(), and reduce() — don’t worry. You're not alone.

These array methods are some of the most powerful tools in JavaScript, and once you get comfortable with them, you’ll find yourself using them in almost every project.

And the best part? You can try all of these examples interactively inside CodeFramer. No setup, no npm install, just write and run. Let’s dive in. 👇

🔁 map() – Transform Your Array

The map() method lets you take an array and create a new one by applying a function to each item.

Example: Double all the numbers in an array

1const numbers = [1, 2, 3, 4];const doubled = numbers.map(n => n * 2);console.log(doubled); // [2, 4, 6, 8]

🧪 Try this live in CodeFramer: Open your JavaScript playground, paste the code, and run it.

🎯 filter() – Keep What You Need

The filter() method is all about removing things you don’t need.

Example: Get only even numbers

1const numbers = [1, 2, 3, 4, 5, 6];const evens = numbers.filter(n => n % 2 === 0);console.log(evens); // [2, 4, 6]

👉 Want to keep odd numbers instead? Just flip the condition: n % 2 !== 0.

➕ reduce() – Build Something From Scratch

reduce() might seem confusing at first, but it’s incredibly versatile. You can use it to sum values, flatten arrays, group items — it’s a workhorse.

Example: Get the sum of all numbers

1const numbers = [10, 20, 30];const total = numbers.reduce((acc, curr) => acc + curr, 0);console.log(total); // 60

Here, acc is the running total (accumulator), and curr is the current item from the array.

🤯 Bonus: Chain Them Together

This is where the magic happens — you can chain these methods for super clean logic.

Example: Double only even numbers

1const numbers = [1, 2, 3, 4, 5, 6];const doubledEvens = numbers.filter(n => n % 2 === 0).map(n => n * 2);console.log(doubledEvens);

💡 This is functional programming in action — short, expressive, and easy to maintain.

💬 Learn By Doing – Live on CodeFramer

Every code example above? You can try it out instantly on CodeFramer using our built-in JS playground. Just paste, run, and play with it.

• Want to see what happens when you start with an empty array?

• Curious about how reduce() behaves with strings instead of numbers?

You don't have to guess. Try it live.