The Array Iterators Cheatsheet (JavaScript)
Tags: javascript, beginners, explainlikeimfive, webdev
Published: 2019-06-25 08:56:04

Hi! 😄 I created some superhero examples for understanding some of the most popular built-in iterators in JS! 😄

These built-in methods help us iterate through arrays and are called iteration methods or iterators. **Iterators are methods that are called on arrays to manipulate elements and return some values.**


**Array.forEach()**

Method name: forEach
Returns: undefined

--

This method executes a snippet of code (or a function) once for every element of an array.

For example: 

<img src="https://i.ibb.co/LPn6pcK/carbon.png" alt="carbon" border="0">

The forEach method is called for the superheroes array. The argument of forEach() method is a *callback* function. This function is executed for every element of the array. Each element is passed as an argument to this callback function. 

**Array.map()**

Method Name: map
Returns: A new array

--

This method **returns a new array** with the updated elements after calling a callback function on every element in the array.

<img src="https://i.ibb.co/yP0kxDh/carbon-1.png" alt="carbon-1" border="0">

The map method is called on the superheroes array. This method has as an argument a callback function. Map returns a *new* array, which has the string 'Avengers' concatenated in the original values! The original array doesn't change.  

**Array.filter()**

Method name: filter
Returns: A new array

--

This method checks each element in an array to see if it meets a condition. It returns a new array with the elements that meet the condition.

<img src="https://i.ibb.co/c8NwrbS/carbon-2.png" alt="carbon-2" border="0">

The callback function for the .filter() method should return true or false depending on if the element length is shorter than 5. 
**The elements that cause the callback function to return true are added to the new array.**

**Array.find()**

Method name: find
Returns: The value of the first occurrence of the element, undefined if the element doesn't exist

--

This method returns the **value** of the *first* element of an array which satisfies a condition. The method will return *undefined* if none of the elements satisfies this condition.

<img src="https://i.ibb.co/Gxn6zXp/carbon-4.png" alt="carbon-4" border="0">

**Array.findIndex()**

Method name: findIndex
Returns: The index of the first occurrence of the element, -1 if the element doesn't exist

--

Similar to find method. Their difference is that this method returns the **index** of the first element of an array which satisfies the condition set. The method will return *-1* if none of the elements satisfies the condition.

<img src="https://i.ibb.co/471X5PJ/carbon-5.png" alt="carbon-5" border="0">

**Array.reduce()**

Method name: reduce
Returns: A single value

--

The reduce method is used to reduce the array to a single value. It executes a provided function for each value of the array (from left-to-right). The return value of the function is stored in an accumulator.

<img src="https://i.ibb.co/fkmbcdj/carbon-6.png" alt="carbon-6" border="0">

In this example, Reduce accepts two parameters, the accumulator (all) and the current element (hero). The reduce method iterates through each element in the array as a for-loop. In the accumulator, we store the concatenated string. 

**Array.every()**

Method name: every
Returns: boolean

--

The 'every' method tests if all elements in the array pass a condition. The return value is a boolean.

<img src="https://i.ibb.co/mzk4gfg/carbon-7.png" alt="carbon-7" border="0">

**Array.some()**

Method name: some
Returns: boolean

--

The 'some' method tests if some of the elements in the array pass a condition. The return value is a boolean.

<img src="https://i.ibb.co/GHQ63nw/carbon-8.png" alt="carbon-8" border="0">

Hope you like it! 🦊