JavaScript Array Methods Explained

When I first started JavaScript, I always got confused between forEach(), map(), and filter(). They all loop through an array, but they don't do the same thing.

Here's the easiest way to remember them.

1. forEach() – Just Visits Every Element

You can imagine as if forEach() is saying:

"Go through every element and perform some work."

It does not create a new array and does not return anything.

eg:

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

numbers.forEach((value, index) => {
    console.log(index, value);
});

Output

0 1
1 2
2 3
3 4

You can also modify another array.
eg:

const arr = [1, 2, 3, 4];
const squares = [];

arr.forEach((value, index) => {
    squares[index] = value * value;
});

console.log(squares);

Output

[1, 4, 9, 16]

Now lets see how trying to return something doesn't work.

const arr = [1, 2, 3, 4];

const result = arr.forEach((value) => {
    return value * 2;
});

console.log(result);

Output

undefined

Imp Point Over here: forEach() is mainly used when you want to perform side effects like printing, updating the DOM, making API calls, or modifying another variable.

2. map() – Transform Every Element

Use map() when you want a completely new array.

eg:

const arr = [1, 2, 3, 4];
const doubled = arr.map(value => value * 2);
console.log(doubled);

Output

[2, 4, 6, 8]

Another example:

const arr = [1, 2, 3, 4];
const evenCheck = arr.map(value => value % 2 === 0);
console.log(evenCheck);

Output

[false, true, false, true]

Note it here map() returns something for every element.

const arr = [1, 2, 3, 4];

const result = arr.map(value => {
    if (value % 2 === 0) {
        return value;
    }
});

console.log(result);

Output

[undefined, 2, undefined, 4]

That's because map() must return one value for every position in the array.

3. filter() – Keeps Only Matching Elements

filter() is quite different. It doesn't return one value for every element.

Instead, it asks:
"Should I keep this element?"

=> If the callback returns true, the element stays.

=> If it returns false, the element is removed.

const arr = [1, 2, 3, 4];
const evenNumbers = arr.filter(value => value % 2 === 0);
console.log(evenNumbers);

Output

[2, 4]

A simple way to remember it:

• map() → transforms every element.
• filter() → keeps only matching elements.

4. some() – Is At Least One Element Matching?

some() returns true as soon as one element satisfies the condition.

const arr = [1, 2, 3, 4];

const result = arr.some(value => value % 2 === 0);

console.log(result);

Output

true

Another example:

const arr = [1, 3, 5, 9];

console.log(arr.some(value => value % 2 === 0));

Output

false

5. every() – Do All Elements Match?

every() returns true only if every element satisfies the condition.

const arr = [8, 2, 4, 6];
const result = arr.every(value => value % 2 === 0);
console.log(result);

Output

true

Example where it fails:

const arr = [8, 2, 5, 6];

console.log(arr.every(value => value % 2 === 0));

Output

false

6. sort() – It says Be Careful!

Many beginners expect sort() to sort numbers correctly.
But by default, JavaScript sorts elements as strings.

const arr = [5, 4, 6, 1, 11, 51];

console.log(arr.sort());

Output

[1, 11, 4, 5, 51, 6]

Here JS considers 1 as first or smallest then 11 then 4 it doesnot see it as eleven it sees as 'one one';

For numbers, always provide a comparison function.

Ascending order

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

Output

[1, 4, 5, 6, 11, 51]

Descending order

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

Output

[51, 11, 6, 5, 4, 1]

But you must be wondering Why does this work?

(a, b) => a - b

• Negative value → keep a before b
• Positive value → swap them
• Zero → keep their order

My Shortcut to Remember

• forEach → "Do something."
• map → "Change everything."
• filter → "Keep only what I need."
• some → "At least one?"
• every → "Everyone?"
• sort → "Arrange them."

Once I understood these six methods, writing cleaner JavaScript became much easier.