Array Methods (map, filter, reduce, and More)

JavaScript arrays include many built-in methods that facilitate transforming, searching, sorting, and processing data. These methods are extremely important because they help you write clean, short, and powerful code.

Modern JavaScript relies heavily on array methods, particularly in real-world projects, interviews, and coding challenges.
In this chapter, we will learn the most useful methods:

• map

• filter

• reduce

• forEach

• find

• includes

• sort

• slice

• splice

Each method will be explained in simple words with clear examples.

1. map()

The map() method creates a new array by applying a function to each element.

Use it when you want to transform an array.

Example: Double every number

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(n => n * 2);

console.log(doubled);

Output:

[2, 4, 6, 8]

The original array is NOT changed.

2. filter()

The filter() method returns a new array with only the values that pass a condition.

Use it when you want to select certain items.

Example: Get numbers greater than 5

let nums = [3, 6, 8, 2, 10];

let bigNumbers = nums.filter(n => n > 5);

console.log(bigNumbers);

Output:

[6, 8, 10]

3. reduce()

The reduce() method reduces the entire array to a single value.

Use it when you want to calculate totals.

Example: Sum of all numbers

let marks = [50, 60, 40, 30];

let total = marks.reduce((sum, m) => sum + m, 0);

console.log(total);

Output:

180

Here:

• sum ? running total

• m ? current value

• 0 ? starting value

4. forEach()

The forEach() method runs a function on each element but does NOT return a new array.

Use it when you want to print or process items.

Example:

let fruits = ["apple", "banana", "mango"];

fruits.forEach(f => console.log(f));

Output:

apple
banana
mango

5. find()

The find() method returns the first matching value.

Example: Find number greater than 50

let scores = [30, 40, 55, 60];

let result = scores.find(s => s > 50);

console.log(result);

Output:

55

It returns only one value.

6. includes()

The includes() method checks if a value exists in the array.

Example:

let colors = ["red", "blue", "green"];

console.log(colors.includes("blue"));
console.log(colors.includes("yellow"));

Output:

true
false

7. sort()

The sort() method sorts values alphabetically by default.

Sorting strings:

let names = ["Riya", "Aman", "Karan"];

names.sort();

console.log(names);

Output:

["Aman", "Karan", "Riya"]

Sorting numbers (important!)

let nums = [5, 40, 2, 20];

nums.sort((a, b) => a - b);

console.log(nums);

Output:

[2, 5, 20, 40]

Without (a, b) => a - b, numbers sort incorrectly as strings.

8. slice()

The slice() method returns a portion of the array.

Example:

let letters = ["a", "b", "c", "d", "e"];

let part = letters.slice(1, 4);

console.log(part);

Output:

["b", "c", "d"]

(slice does NOT change the original array.)

9. splice()

The splice() method can add or remove items and changes the original array.

Example: Remove items

let items = ["pen", "book", "pencil"];

items.splice(1, 1);

console.log(items);

Output:

["pen", "pencil"]

Example: Add items

items.splice(1, 0, "notebook");

console.log(items);

Output:

["pen", "notebook", "pencil"]

Real-Life Example: Student Filtering

let students = [
    { name: "Riya", marks: 85 },
    { name: "Aman", marks: 40 },
    { name: "Karan", marks: 92 }
];

let toppers = students.filter(s => s.marks > 80);

console.log(toppers);

Output:

[{ name: "Riya", marks: 85 }, { name: "Karan", marks: 92 }]

Real-Life Example: Calculate Total Shopping Bill

let prices = [100, 250, 50];

let total = prices.reduce((sum, p) => sum + p, 0);

console.log("Total Bill:", total);

Output:

Total Bill: 400

Common Mistakes Beginners Make

1. Expecting map/filter to change the original array

2. Using forEach when a new array is needed

3. Using sort without the compare function

4. Confusing slice (no change) and splice (changes array)

5. Using return incorrectly in arrow functions

Practice Tasks (Do It Yourself)

1. Use map to convert an array of marks into grades.

2. Use filter to find numbers less than 50.

3. Use reduce to calculate total marks of 5 subjects.

4. Use find to get the first even number.

5. Use includes to check if a name exists in the array.

6. Use slice to get the first three elements of an array.

7. Use splice to insert an item in the middle.