BG Photo by Sepp Rutz on Unsplash

JS Array iterators cheat sheet — Part 1

Krishna Damaraju
Nov 12, 2019 · 3 min read

Iterator methods are helpful and slightly confusing if you don’t understand the slight differences between them. This cheat sheet discusses the contrasting differences between forEach , map , filter andsome.

Before beginning..

“You must unlearn what you have learned” — Yoda

Here are few keywords used in this article and their meaning —

  • 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: 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.
  • Empty arrays/elements: Will be ignored.
  • undefined/null: Will be considered.
  • Async: Will not be 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: 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 considered.

🥢 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 dosen’t return
  • Mutation: 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 considered.

🧃 Array.prototype.some

  • Usage: Returns true if at-least one element passes the provided condition in the callback or else false
  • Returns: boolean
  • Mutation: 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 considered.

Decision diagram for Arrays

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

Hope you like the article, let me know your thoughts in comments.

Cheers 🙌
KD

Small Things

Coding tips for beginners

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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