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.