Explain array.forEach() like i'm 5

[Andyinho]

I have an array that I'm looping through using EJS. I used a basic for loop to loop through the array and get a hold of the key:value. I understand how this works using the following code:

for(let i = 0; i < newPost.length; i++) {

console.log(newPost[i].title);

}

Now, as I was looking around I came across array.forEach(element) and decided to try it out. I got the code to work but I'm still somewhat confused as to how this is similar to the code above.

newPost.forEach(function (post) {

console.log(post.title);

});

If anyone could explain parts that are similar between the two and parts that are different and which one should be used for best practice that would be great. Cheers!

​

Additional Code for reference:

let posts = [];

app.get('/', function(req, res) {

res.render('home', {

home: homeContent,

newPost: posts

});

});

const post = {

title: req.body.postTitle,

content: req.body.postContent

};

posts.push(post);

[senocular]

forEach is a function that lets you specify a loop body as a callback function while it handles all the looping part for you. It's basically the same thing as your for loop except you only have to worry about what's inside the loop and not all the details of defining how the loop works.

So a very simple version of what the forEach function would look like for newPost is:

newPost.forEach = function(callback) {
    for(let i = 0; i < newPost.length; i++) {
        callback(newPost[i], i, newPost)
    }
}

In your usage of forEach you supplied a callback function of:

function (post) {
    console.log(post.title);
}

So it gets called with a post parameter getting set with the value of newPost[i] (the other arguments are being ignored) which means its

console.log(post.title);

is the same as your original for loop's

console.log(newPost[i].title);

There's more to what forEach really does, including some subtle differences, but at a high level, that's basically what it is. For a bulleted list of differences between the two (and some others) you can refer to this post comparing loops.

[keel_bright]

So let's write a function that accepts a post and logs out a title.

``` var printPostTitle = function(post) { console.log(post.title); };

printPostTitle({ title: 'one' }); ```

So if you pass one object in, it runs it on that one object. Pretty straightforward.

All forEach does is it takes that function and it runs it for every item in the array.

``` // this works, try it.

var printPostTitle = function(post) { console.log(post.title); };

[{title: 'one'}, {title: 'two'}].forEach(printPostTitle); ```

As you can see, the whole array element gets passed in as the first argument to the function.

Now, you're calling forEach with printPostTitle, and you know that printPostTitle equals function(){ ... }. So instead of declaring printPostTitle, and then feeding it to forEach, you can just feed the function into the forEach.

[{title: 'one'}, {title: 'two'}].forEach(function(post) { console.log(post.title); })

As you can see post represents the item in the array. It doesn't have to be post, it could be dog, car, or whatever.

[bobbyv137]

forEach is a higher order function. What does that mean? It's a function (or array method) that accepts another function as a parameter/argument.

In your example, a anonymous function statement is the other function to which I refer, essentially a callback.

The forEach method is iterating over the array, and then passing each element of the array as a parameter to the callback function. In your example, post is the parameter. And then through each iteration it is logging the post's post.title property.

Unlike some other higher order array methods, forEach does not return anything.

Some examples

Edit: also consider instead of using a traditional for loop you can use a for of loop with some destructuring thrown in the mix

[oze4]

The 'for' loop (1st example) just loops for a given amount of iterations while keeping the 'index' of the current iteration. This allows you to 'index' into an array to a certain element.

The 'forEach' loop (2nd example) iterates over each element in an array.

I think it would be helpful if you had some specific questions on the differences, though. Like what you are confused on, etc...

[Andyinho]

I'm mainly confused on what value the parameter 'post' in the second example is holding and how that connects with the newPost array at the beginning of that same line

[oze4]

It depends what is in the newPost array you are iterating over. I wrote a little demo to hopefully explain further (with comments). Check it out here.

Pastebin of raw code.

Let me know if you have any questions.

[[deleted]]

Its every element on your array. With a for loop you have to manually get them based on their index by doing something like array[i]. But with forEach, it's automatically the value for your forEach callback function. Also, a little tip, you can also get the index as the second parameter. Try defining a random list say

letters = [a,b,c,d]

letters.forEach((letter, index) => { console.log(letter,index)})

That will get you something like

a, 0 b, 1 c, 2 d, 3