Collection Iteration Functions in Javascript

I see many people misusing the collection iteration functions on the Array prototype and wanted to write my thoughts down on usage of each of the iteration functions (every, filter, find, forEach, includes, map, reduce, some)

Boolean Usage (determining the state of a collection)

The first group of functions are those that return a boolean representing a state of the collection. These operations include: every, includes, and some.

every — Returns true if all elements in a collection match a criteria, false if any element is falsy.

some — Returns true if any element in a collection returns truthy in its callback.

includes — Very similar to some, but instead of taking a callback, it takes a value to look for.

forEach

For Each is slightly different than any of the other iterative functions. It’s the only of the above functions that doesn’t return a value. It is intended to be used to perform an action or set a value (in the object passed into the callback). It is not, however, intended to be used for summations, creating a separate collection etc.

I see the above code quite a bit. What most developers don’t realize is they are modifying the original object in collection which has an unintended consequence. Instead, map should be used for the above case.

Here is a proper use of forEach:

Values from a Collection

This category contains functions that take a given collection and return a new value based on the original collection.

filter — Returns a new collection with only the values that return truthy for the callback. Be wary this returns the reference to the object, so if you modify it in the filtered array, it will modify it in the original.

map — Returns a new array containing whatever value is returned by the callback.

Map is the proper function to use if you want to generate something based on each element in the array. This and forEach are the most misused functions. Please do not modify the original reference during a map function. If you find yourself doing that, you should be using forEach instead.

reduce — This is used to take a collection and reduce it down to a single value. For instance, if you want to create a sum from the values in an array:

I also always pass the “default” value as the second argument to the function. The reason for this is: if the array is empty then there will be a runtime error thrown. In addition, it hints as to what is expected as a response (what type).

reduceRight does the same, but from right to left as opposed to left to right.

find — Returns the first value that returns truthy for its callback. This is useful when one knows that there is a unique element in an array. It shouldn’t be used to determine whether or not something exists (some should be used in that scenario).

Conclusion

Using the above iteration functions, I’ve been able to replace the use of for loops almost entirely. However, knowing the proper use for each of them can save developers from unintended consequences! Hopefully this helps with that.

Front End Developer

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