Arrays help us store multiple values in a single variable. But storing data is only part of the story. Most of the time we also need to process that data.

For example:

• change values

• remove unwanted values

• calculate totals

JavaScript gives us built in methods to do these tasks easily.

Some of the most useful array methods are:

• map()

• filter()

• reduce()

Let’s understand them one by one.

---

map()

map() is used when we want to transform every value in an array.

It goes through each element and returns a new array with the updated values.

Example array:

const numbers = [2, 4, 6, 8]

Suppose we want to double each number.

Using a traditional loop

const numbers = [2, 4, 6, 8]

const doubled = []

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2)
}

console.log(doubled)

Output:

[4, 8, 12, 16]

Now let’s do the same thing using map().

Using map()

const numbers = [2, 4, 6, 8]

const doubled = numbers.map(function(num) {
  return num * 2
})

console.log(doubled)

Output:

[4, 8, 12, 16]

Original array stays the same:

console.log(numbers)

[2, 4, 6, 8]

map() creates a new array instead of modifying the original one.

---

filter()

Sometimes we only want some values from an array.

That is where filter() helps.

It returns a new array containing only the values that match a condition.

Example array:

const numbers = [5, 12, 8, 20, 3]

Suppose we want numbers greater than 10.

Using a loop

const numbers = [5, 12, 8, 20, 3]

const result = []

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result.push(numbers[i])
  }
}

console.log(result)

Output:

[12, 20]

Now using filter().

Using filter()

const numbers = [5, 12, 8, 20, 3]

const result = numbers.filter(function(num) {
  return num > 10
})

console.log(result)

Output:

[12, 20]

Again, the original array remains unchanged.

---

reduce()

reduce() is used when we want to combine all values into a single result.

Common examples:

• calculating totals

• counting items

• combining values

Example array:

const numbers = [10, 20, 30, 40]

Suppose we want the total sum.

Using a loop

const numbers = [10, 20, 30, 40]

let total = 0

for (let i = 0; i < numbers.length; i++) {
  total += numbers[i]
}

console.log(total)

Output:

100

Now using reduce().

Using reduce()

const numbers = [10, 20, 30, 40]

const total = numbers.reduce(function(sum, num) {
  return sum + num
}, 0)

console.log(total)

Output:

100

How it works:

1. Start with sum = 0

2. Add each number

3. Return the final value

---

Try These Examples Yourself

Create an array of numbers.

const numbers = [5, 10, 15, 20]

Double every number using map().

const doubled = numbers.map(function(num) {
  return num * 2
})

console.log(doubled)

Get numbers greater than 10 using filter().

const greater = numbers.filter(function(num) {
  return num > 10
})

console.log(greater)

Calculate the total sum using reduce().

const total = numbers.reduce(function(sum, num) {
  return sum + num
}, 0)

console.log(total)

Try running these examples in your browser console.

---

Array methods make working with data much easier.

Instead of writing long loops, we can use built in methods like:

• map() to transform values

• filter() to select values

• reduce() to combine values