DEV Community

Cover image for JS Array Iterators Cheat Sheet — Part 1
Krishna Damaraju for XenoX

Posted on • Edited on

JS Array Iterators Cheat Sheet — Part 1

Hey! I'm starting this new series aimed at helping beginners understand some key javascript concepts. I know that digesting all the info and being able to implement everything in the first go can be difficult for beginners, so I'll try and include a decision diagram at the end of each post. I hope it helps! Let's get started.

Iterator methods are helpful, but they can also be confusing if you don't understand the slight differences between them. This cheat sheet discusses the contrasting differences between forEach, map, filter, and some.

Before beginning...

"You must unlearn what you have learned" - Yoda

Yoda quote GIF

Here are a few keywords used in this article and their meanings:

  • Callback - A function to be called after the current code execution.
  • Chainable - A method to pass the returned value to the other function.
  • Mutation - Change and replace the original value.

🥨 Array.prototype.forEach

Usage: An alternative to for with advantages of scoping. Use this for ajax calls, set/get operations to be performed on each array item and go for this when no other function fits your needs.
Returns: undefined
Mutation (by default): Doesn't mutate the provided array.
Breaking the loop: Cannot skip the loop execution.
Chainable: Not Possible as it returns undefined
Change in array values while iterating:

"Breath-in and breath-out before you read this" 😇

1. Any new data added to the array while the loop execution will be ignored. 

2. Any data modified or deleted will be provided chainable to the forEach when forEach visits it. 

3. Any modifications to the processed data will be ignored and deletion of the processed element might make the next element in the loop to be skipped due to the change of index.
Enter fullscreen mode Exit fullscreen mode

emoji explanation

Empty arrays/elements: Will be ignored.
undefined/null: Will be looped.
Async: Is not supported.

🍱 Array.prototype.map

Usage: use this when you want to transform the given array. If you use case is not to return anything, use forEach or for...of
Returns: Array and array of undefined's if callback doesn't return anything.
Mutation (by default): Doesn't mutate the provided array.
Breaking the loop: Cannot skip the loop execution.
Chainable: Yes
Change in array values while iterating: Same as forEach
Empty arrays/elements: Will be ignored.
undefined/null: Will be looped.

🥢 Array.prototype.filter

Usage: To filter an array based on a given condition. If you need to return the first element matched, use Array.prototype.find()
Returns: Array and empty array if nothing is filtered or callback doesn't return
Mutation (by default): Doesn't mutate the provided array.
Breaking the loop: Cannot skip the loop execution.
Chainable: Yes
Change in array values while iterating: Same as forEach
Empty arrays/elements: Will be ignored.
undefined/null: Will be looped.

🧃 Array.prototype.some

Usage: Returns true if at-least one element passes the provided condition in the callback or else false
Returns: boolean
Mutation (by default): Doesn't mutate the provided array.
Breaking the loop: Cannot skip the loop execution.
Chainable: Yes
Change in array values while iterating: Same as forEach
Empty arrays/elements: Will be ignored.
undefined/null: Will be looped.

Decision diagram for Arrays

If you are a beginner, there will be some confusion till sometime on what iterator method to be used. I made a decision diagram for the same. Hope it helps. 🙏

Decision diagram

Hope you like the article, let me know your thoughts in the comments or tweet me
Cheers! 🙌
KD

Initially published on Medium


P.S.

If you're passionate about open-source development and looking to contribute to exciting open-source projects, Team XenoX might just be your calling. We're always working on something cool. So I'd love for you to join us! Check out our work at XenoX Multiverse! 🔥

Write for XenoX!

Team XenoX is also looking to add more authors to our publication. If you like writing and have some creative ideas you'd like to share, we'd love to have you! 💯 Your blog posts will gain a lot more eyeballs. 👀 You'll get a chance to win some cool swag. And hey, you also get expert consultation and free proofing/editing from our best. 😉😎

Write for XenoX GIF

If you want to apply, just go here and enter your details:
https://forms.clickup.com/f/1rz92-3351/VMFE0Q81LI7E0A92Z0

Top comments (4)

Collapse
 
rkichenama profile image
Richard Kichenama

The third parameter sent to the callback for most of these functions is still a reference to the original array, not a copy. This means that while, during the callback, it is possible to mutate the original through array functions or assigning values.

Collapse
 
sarathsantoshdamaraju profile image
Krishna Damaraju • Edited

Yes, Richard, it does, but that is an optional callback passed by the developer and not a spec requirement. And one more important thing, using this callback might cause the unknown side-effects while mutating the original array.

But thanks for pointing, I have made some changes not to confuse readers.

Collapse
 
sarthology profile image
Sarthak Sharma

LOVED IT, MAN !! 🤘

Collapse
 
igcp profile image
Igor Conde

Hey Awesome! Thank You