Let’s learn about array iterators

Easing you into what lies beyond a `For Loop`

was nice while it lasted, but it’s about time that and we move on and learn something new. Let me introduce you to its buddy and your first foray into big kid iteration, .

I could show you what MDN says, but I imagine you’re here because you’d rather not. That being the case, I’m also going to steer away from using and my favorite thicc boi arrows in lieu of the more familiar .

Side by Side: for & forEach

Let’s have a look back at a loop. Below is one of those iterating through an of very suspect values:

Not too hard. A bit of extra writing every time you’d like to iterate. It gets the job done. But busting out a in a competitive tech scene is like rolling up to the Indy 500 in your Tonka truck. It’s cute, it got you there, but you’re a kid and the crowd is getting ripped on Montucky Cold Snacks, so you gotta go.

OK. So back to the drawing board. We’ve got a new method:

So a couple things are happening. Let’s start with how the method was called. It’s important to know that an is an , and in fact it is an object that has its own . If you don’t know, a method is essentially a function that belongs to an object…more or less. If you don’t know what an is inside of JS, well…maybe revisit this article once you do.

When you use , , you are essentially calling a of the — just like when we call . So, the syntax for calling the method is the same as calling any of those other, more familiar methods.

Ain’t no call-uh-back gurrrrl

You’ll hear the word ‘callback function’ thrown around a lot. For all intensive purposes, a callback function is a function passed into another function as an argument — that callback function is executed inside of the outer function as part of the outer function’s script…WAT?

Yea, sorry about that.

So, above, the callback function is the nameless (anonymous) function just inside of the , below denoted with a :

Bear with me. To illustrate what’s happening, the same thing can be accomplished, albeit more stupidly in this example, with a named function. Here we define , the function to be used as the callback inside of the . It does the same exact thing as the anonymous callback function above, only we’ve named and defined it outside of the :

Same as before. The is the array iterator method. We pass in the argument as the callback function. The callback function executes on each element, each , inside of the array and logs it to the console.

Whew. OK. Callbacks. Got it.

GREAT. What’s with the variable being called whatever it wants???

So now that we better understand what’s happening with that callback function, let’s look at the variable we’re passing into that callback function as an argument.

Inside of that anonymous callback function, we are passing in the argument , which is going to be a single element inside of our array. Inside of that anonymous callback function, for each within the array, we want to each .

But wait — does the AI hive mind somehow know that we are iterating over an array of ? It somehow knows that the singular of is ? What’s going on here?

No. is a label, it is an ephemeral variable title that represents a singular element inside of the array of elements upon which you are calling the method. You could use any word you’d like in its place — though best practice is using something that makes sense. For example:

This could also be written as:

Make sense?

Alright. Making sense. What about though? I need .

OK. OK, I get it. Quicker. More readable. But, what about ? I like , I need it. What if I need the index of the given array element?

You think ’d lead you astray??

We have access to , and much more easily. Inside of the callback function, add a comma and then whatever you’d like to denote the of the given array element — below we use , because that makes sense, and interpolate it with whatever the value of the current is:

COOL!

BONUS: Here’s one more trick. Let’s say you’re iterating over an array using , but in order to get that array you needed to first , then . Instead of declaring a new variable, you can reference that array by adding one more argument to that callback function, below as :

See, there’s magic in there. Alright, almost done. Last point.

Like our bachelor’s degrees, .forEach() will always return NOTHING (undefined)

OK, so remember this, always. returns. . If you’re setting a variable equal to the value returned from a , then that variable will have a value similar to your pocketbook after completing your four year bachelor’s of arts — that is nothing (speaking from experience).

Let’s have a look back at that , which yes has its place…:

Now, if I were trying to return a value from this loop with the following:

I would get nothing save for the disappointed glares of my peers and of the ghosts of disappointment that fuel my ceaseless drive for self-betterment. Console would yell at you. Unfortunately, console does not make such an explicit point when trying to do the same thing with a :

is undefined…why? Because like a , will always return . So why use a ? Because like a , you can do all sorts of things with each ‘round’ of iteration inside of the iterator:

Ahhh, so is a tool to do something to other things, but not to return a single new value, or any value, ever, because it will always return undefined.

The End.

So there you go. What benefits are offered by ?

  • Easier to write than a
  • is implied for each element, though it can be accessed
  • Will get you into the Indy500
  • Is a great introduction to other array iterator methods

Get out there and show ‘em who’s boss. I’ll be back soon with more on array iterator methods. If you liked this or found it helpful, please let me know!

Front End Dev student at Turing School

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store