Skip to main content

Command Palette

Search for a command to run...

forEach method in JavaScript + GIVEAWAY

Updated
2 min read
forEach method in JavaScript + GIVEAWAY
R

19, Hustler.

The main purpose of forEach method is it executes a provided function once for each array element. In other words, iterates over the array. Often used in functional programming. Always returns undefined.

// SYNTAX: syntax.png

  • arr - The array forEach is iterating on
  • this - A value to use as this when executing callback (optional)
  • callback - A fucntion executed once for each arr element

Argumnet passed to the callback function:

  • currentValue - The current element being processed in the array.
  • index - The index of the current element being processed in the array (optional)
  • arr - The whoole array forEach is iterating on(optional)

Let's do something

let arr = ['a', 'b', 'c', 'd'] 

arr.forEach((el, i, arr) => {
    console.log(el)
}); 

// Logs each string form arr in the console. Let's say we want to log each element in the array until we meet a 'c' character. Then the forEach loop. 

// But actually - there's no way to exit (stop) the while for Each! We can only exit the current iteration. 

// That's when you should go and use a loop. If not, here's a way to do it with forEach:

let meet = true
arr.forEach((el, i, arr) => {
    if (el === 'c') meet = false; 
    if (meet) console.log(el); 
}) // log ['a', 'b']

// now the same thing using a for loop: 
for (let i = 0; i <= arr.length; i++) {
    if (arr[i] === 'c') brake; 
    console.log(arr[i]); 
}

// In this previous situation it was better to just use a loop. Now I will show you a case where it's the opposite. 

let copy = []

// before
for (let i = 0; i < arr.length; i++ ) {
    copy.push(arr[i])
}

// after
arr.forEach( el => copy.push(el))

Facts:-

  • it always returns true
  • expects the callback function to synchronous
  • you can't stop its iteration
  • very powerful when chained with another method
  • support by all modern browsers

🚨GIVEAWAY 🚨

I've 300 Followers on Twitter Finally 🤩. So I'm giving away a 3 BUNDLES that consists of
- Udemy Course
- 3 eBook (Growth, Marketing and Productivity)

Enter now:
🎯Follow me
🔄Retweet this tweet
💕Like this tweet

(Next thread for more details)#Giveaways pic.twitter.com/lhqj3HNRu8

— RAHUL (@rahxul) May 12, 2021


Thanks for Reading😅

D

A good article but a little feedback / info from my perspective.

ForEach() is not really used in functional programming as it is used merely to mutate an object or create a side effect. In your examples they show examples that are almost an anti pattern to the functional paradigm.

There are far more optimal approaches to transforms on arrays. Most of which return a copy of the collection or transformed resource.

From a functional perspective, for each is avoidable and should be so. Instead map(), filter() or reduce() provide a strong and more optimal approach to data transformation, at the least returning copies of original resources without side effect.

Remember actions like pop() and push() are mutating the original object referenced. The function console.log() is a side effect, though notably for each and console log are often used in debugging which is fair enough providing the code does not make it to production pipelines.

There is very little need for foreach these days, it’s a throwback to JavaScript’s early days.

More from this blog

R

RAHULISM - FrontEnd Web Developer

232 posts

18, Hustler.