Skip to content

Instantly share code, notes, and snippets.

@mrmartineau
Forked from ggauravr/array_iteration_thoughts.md
Last active November 22, 2022 15:10
Show Gist options
  • Select an option

  • Save mrmartineau/9e39954c0afe02f53b4c0c7814bc601b to your computer and use it in GitHub Desktop.

Select an option

Save mrmartineau/9e39954c0afe02f53b4c0c7814bc601b to your computer and use it in GitHub Desktop.
Array iteration methods summarized

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it much simpler to think about both the old list and the new one, what they contain, and what happened during the operation.

Below are some of the methods that iterate - in other words, that operate on the entire list, one item at a time. When you call them, you provide a callback function - a single function that expects to operate on one item at a time. Based on the Array method you've chosen, the callback gets specific arguments, and may be expected to return a certain kind of value - and (except for forEach) the return value determines the final return value of the overarching array operation. Although most of the methods are guaranteed to execute for each item in the array - for all of them - some of the methods can stop iterating partway through; when applicable, this is indicated below.


forEach:

  • callback answers: here’s an item. do something nutty with it, i don't care what.
  • callback gets these arguments: item, index, list
  • final return value: nothing - in other words, undefined

map:

  • callback answers: here’s an item. what should i put in the new list in its place?
  • callback gets these arguments: item, index, list
  • final return value: list of new items

filter:

  • callback is a predicate - it should return a truthy or falsy value
  • callback answers: should i keep this item?
  • callback gets these arguments: item, index, list
  • final return value: list of kept items

reduce:

  • callback answers: here’s the result from the previous iteration. what should i pass to the next iteration?
  • _callback gets these arguments: result, item, index, list
  • final return value: result of last iteration

reduceRight: (same as reduce, but in reversed order: last-to-first)

some:

  • callback is a predicate - it should return a truthy or falsy value
  • callback answers: does this item meet your criteria?
  • callback gets these arguments: item, index, list
  • final return value: true after the first item that meets your criteria, else false
  • note: stops iterating once it receives a truthy value from your callback.

every:

  • callback is a predicate - it should return a truthy or falsy value
  • callback answers: does this item meet your criteria?
  • callback gets these arguments: item, index, list
  • final return value: false after the first item that failed to meet your criteria, else true
  • note: stops iterating once it receives a falsy value from your callback.

find:

  • callback is a predicate - it should return a truthy or falsy value
  • callback answers: is this item what you’re looking for?
  • callback gets these arguments: item, index, list
  • final return value: the item you’re looking for, or undefined
  • note: stops iterating once it receives a truthy value from your callback.

findIndex:

  • callback is a predicate - it should return a truthy or falsy value
  • callback answers: is this item what you’re looking for?
  • callback gets these arguments: item, index, list
  • final return value: the index of the item you’re looking for, or -1
  • note: stops iterating once it receives a truthy value from your callback.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment