DEV Community

Thinkster for Thinkster

Posted on • Edited on • Originally published at Medium

1

A Better Way to Loop Over an Array

When you need to loop over an array in JavaScript do you default to the trusty for loop? Even got yourself a quick keyboard macro to create your for loop? You're in good company, I do the same. Something like the following is my habitual goto when looping over an array of data:

image

But there's a better way. the forEach method on arrays not only lets you deal with this pattern in a more functional way, it's just prettier (no relation to prettier :)

image

But what if you need the index? what if you're going to display that as well, like in the following?

image

Well, no problem. foreach has you covered there. The second parameter to the foreach is the current index.

image

Finally, foreach allows you to separate out your iteration function from the iteration itself and create code that is extremely readable.

image

You CAN do this with a for loop, but it's not nearly as readable:

image

One final note. The forEach function also uses a 3rd parameter which is the array itself, in case you need to use the entire array in your processing function.

image

Now it's time to actually LEARN something. Without practice, tomorrow you'll only remember about 15% of what you just read. Want to learn all of it? That requires actually PRACTICING what I just showed you.

This StackBlitz project has several different for loops that need to be turned into more readable foreach functions. It'll take you a couple minutes to complete, but by the time you're done you'll actually feel comfortable using forEach in your own coding, and can finally drop that less effective for loop.

Happy coding!

Signup for my newsletter at here.
Visit Us: thinkster.io | Facebook: @gothinkster | Twitter: @gothinkster

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay