JavaScript Array Methods - map, filter, reduce with Examples

Arrays

An array is a special variable, which allow us to store multiple values together in a single variable of same or different data types. It can store any valid value, which include string, number, object, function, and even other array.

Creating an Array

const fruits = ["Apple", "Mango", "Orange"];

It can also be created using new keyword like below-

const fruits = new Array("Apple", "Mango", "Orange");

Working with Array Elements

Every item inside an array has an index. JavaScript arrays use zero-based indexing, which means the first element is at index 0, the second element is at index 1, and so on. You can read, update, or add values by using square brackets.

const fruits = ["Apple", "Mango", "Orange"];

console.log(fruits[0]); // Apple
fruits[1] = "Banana";
fruits[3] = "Grapes";

console.log(fruits); // ["Apple", "Banana", "Orange", "Grapes"]
console.log(fruits.length); // 4

The length property tells us how many elements are present in an array. This is useful when looping through an array or when we want to access the last item using arr[arr.length - 1].

Important Array Methods

Adding and Removing Items

JavaScript provides convenient methods to add and remove elements from the beginning or end of an array. push() adds to the end, pop() removes from the end, unshift() adds to the beginning, and shift() removes from the beginning.

const colors = ["Red", "Green"];

colors.push("Blue");     // ["Red", "Green", "Blue"]
colors.unshift("Black"); // ["Black", "Red", "Green", "Blue"]

colors.pop();            // removes "Blue"
colors.shift();          // removes "Black"

console.log(colors);     // ["Red", "Green"]

The slice() Method

The slice() method returns a shallow copy of a part of an array as a new array object. It accepts a start index and an optional end index, where the end index is not included. The original array is not modified.

const fruits = ["Apple", "Mango", "Orange"];

console.log(fruits.slice(1));      // ["Mango", "Orange"]
console.log(fruits.slice(1, 2));   // ["Mango"]
console.log(fruits.slice(-2, -1)); // ["Mango"]

The splice() Method

Unlike slice(), the splice() method changes the original array. It can remove elements, insert new elements, or replace existing elements starting at a given index. This makes it very useful when you want to edit the actual array data.

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

numbers.splice(1, 1);           // removes 20
numbers.splice(1, 0, 25);       // inserts 25 at index 1
numbers.splice(2, 1, 35);       // replaces 30 with 35

console.log(numbers);           // [10, 25, 35, 40]

Looping Through Arrays

Arrays are often used with loops because we usually want to process each element one by one. A traditional for loop gives full control over indexes, while for...of is cleaner when you only need the values.

const marks = [78, 85, 91];

for (let i = 0; i < marks.length; i++) {
    console.log("Index:", i, "Value:", marks[i]);
}

for (const mark of marks) {
    console.log("Mark:", mark);
}

Using map(), filter(), and reduce()

Modern JavaScript arrays include helper methods that make common operations much easier. map() transforms every element, filter() keeps only matching elements, and reduce() combines all elements into a single value such as a total or summary.

const prices = [100, 200, 300];

const discounted = prices.map(price => price - 20);
const expensive = prices.filter(price => price >= 200);
const total = prices.reduce((sum, price) => sum + price, 0);

console.log(discounted); // [80, 180, 280]
console.log(expensive);  // [200, 300]
console.log(total);      // 600

Searching in Arrays

You can search arrays in different ways depending on what you need. includes() checks whether a value exists, indexOf() returns the position of a value, and find() returns the first element that matches a condition.

const users = ["Amit", "Neha", "Ravi", "Priya"];

console.log(users.includes("Ravi"));           // true
console.log(users.indexOf("Neha"));            // 1
console.log(users.find(user => user[0] === "P")); // Priya

Copying and Combining Arrays

The spread operator makes array operations more readable. It can be used to copy an array, merge multiple arrays, or extract values through destructuring. Keep in mind that this creates a shallow copy, so nested objects are still copied by reference.

const frontend = ["HTML", "CSS"];
const backend = ["Node.js", "MongoDB"];

const stack = [...frontend, ...backend];
const copy = [...stack];
const [first, second, ...others] = stack;

console.log(stack);  // ["HTML", "CSS", "Node.js", "MongoDB"]
console.log(first);  // HTML
console.log(others); // ["Node.js", "MongoDB"]

Arrays Can Store Any Type

A JavaScript array is flexible and can store strings, numbers, booleans, objects, functions, and even nested arrays. While mixed arrays are allowed, it is usually better to keep similar kinds of data together so the code remains easier to understand and maintain.

const data = [
    "Tutorials Logic",
    2026,
    true,
    { category: "JavaScript" },
    ["arrays", "objects"]
];

console.log(data[3].category); // JavaScript