for vs forEach vs map

Hello 👋 ,

Javascript new bees may confuse on for, forEach and map. In this article i will explain difference between for, forEach and map.

for

For is loop it is standard loop we can find in many programming languages.

Here is the syntax

for(;;)

We have a control over iterations in for loop. We can continue iterations or break conditionally .

forEach and map

forEach and map both are array methods. We can only use those on array.

map will accept call-back function and runs that function on each and every element in array and returns result array.

const list = [1,2,3,4]
const inc = x => x + 1
const result = list.map(inc) 
result // [2,3,4,5]

like map, forEach also accept call-back function and runs that function on each and every element in array and it will not return any thing like map.

const list = [1,2,3,4]

const inc = x => x + 1
const printIncrementedValue = x => console.log(x + 1)

const result = list.forEach(inc) 
result //undefined
list.forEach(printIncrementedValue) // 2,3,4,5
list.map(printIncrementedValue) // prints 2,3,4,5 and returns [undefined, undefined, undefined, undefined]

How to choose ?

If you want to transform a list or expecting a result then you can pick map

const strToDate = str => new Date(str)
const list = [1648989124036, 1648989124037, 1648989124038]
list.map(strToDate) // You will get date objects

If you are not expecting any return and you just want to perform a function on array then forEach is good fit

const list = [1648989124036, 1648989124037, 1648989124038]
list.forEach(console.log) // prints array

If you want control over array iterations or if you want iteration without array you have to pick 'for'

One best example is finding an element in an array. map will not fit for this case and forEach will work because we don't have control over that so we cannot break the iteration after finding an element. But with for loop we can break once we find it.

const list = [1,2,3,4]

const find = (arr, ele) => {
 for(let i = 0; i < arr.length; i++){
  if(arr[i] === ele)
   return true
 }
 return false
}
find(list, 2) // Iteration will stop once element is found and returns true.

Cheers,
Happy coding!