Array Methods You Must Know in JavaScript

In the previous blog, we understood what arrays are and how they work.

You saw how to:

• store multiple values

• access them using index

• add and remove elements

But that was just the beginning.

Real-world applications are not about just storing data. They are about working with data.

You will rarely just read an array. Most of the time, you will:

• transform it

• filter it

• extract values from it

• compute something from it

And this is exactly where array methods come in.

---

Why Array Methods Matter

Let’s start with a simple example.

const numbers = [1, 2, 3, 4, 5];

Now imagine you want:

• all numbers doubled

• only even numbers

• sum of all numbers

You could do this with loops.

But JavaScript gives you built-in methods that make this much cleaner and easier to read.

---

1. forEach: Iterating Over Arrays

forEach is used to loop over an array.

const arr = [1, 2, 3];

arr.forEach(function(num) {
  console.log(num);
});

It runs a function for every element.

Important Point

forEach does not return anything.

const result = arr.forEach(num => num * 2);
console.log(result); // undefined

Use it when you just want to perform an action, not create a new array.

2. map: Transforming Arrays

map creates a new array by transforming each element.

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

Mental Model

• forEach → do something

• map → create something

3. filter: Selecting Elements

filter creates a new array with elements that match a condition.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

Real Use Case

const users = [
  { name: "Shikhar", age: 25 },
  { name: "Rahul", age: 17 }
];
const adults = users.filter(user => user.age >= 18);

4. reduce: Reducing to a Single Value

This is the most powerful and most confusing method.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
  return acc + curr;
}, 0);
console.log(sum); // 10

Breaking It Down

• acc → accumulator

• curr → current value

• 0 → initial value

Step by step:

• 0 + 1 = 1

• 1 + 2 = 3

• 3 + 3 = 6

• 6 + 4 = 10

Real Use Case

const cart = [
  { price: 100 },
  { price: 200 }
];

const total = cart.reduce((sum, item) => sum + item.price, 0);

5. find: Get First Match

const users = [
  { name: "Shikhar" },
  { name: "Rahul" }
];

const user = users.find(u => u.name === "Rahul");
console.log(user);

Returns the first match.

6. some: Check If Any Match

const numbers = [1, 2, 3];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

7. every: Check If All Match

const numbers = [2, 4, 6];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

8. includes: Check Value Exists

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true

9. slice vs splice (Important)

slice (non-destructive)

const arr = [1, 2, 3, 4];
const newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]

Does not modify original array.

splice (destructive)

const arr = [1, 2, 3, 4];
arr.splice(1, 2);
console.log(arr); // [1, 4]

Modifies original array.

---

Chaining Methods

This is where things get powerful.

const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2);

console.log(result); // [4, 8]

This is how real-world code looks.

---

Common Mistakes

1. Using forEach instead of map

// Wrong
arr.forEach(num => num * 2);

2. Forgetting return in map

arr.map(num => {
  num * 2; // returns undefined
});

3. Overusing reduce

Not everything needs reduce.

Real-World Example

const orders = [
  { amount: 100, status: "completed" },
  { amount: 200, status: "pending" },
  { amount: 150, status: "completed" }
];

const totalCompleted = orders
  .filter(order => order.status === "completed")
  .reduce((sum, order) => sum + order.amount, 0);

console.log(totalCompleted);

---

Why This Topic is So Important

Most interview questions:

• involve arrays

• require transformations

• use these methods

If you understand:

• map

• filter

• reduce

You are already ahead of most people.

---

Final Thought

Array methods are not just utilities. They change how you think about problems. Instead of writing long loops, you start writing expressive, readable, and declarative code. And that is what modern JavaScript is all about.