Understanding JavaScript Array Iteration Methods.

After watching Bianca Gandolfo teach FROM FUNDAMENTAL TO FUNCTIONAL JS V2 on Frontend Masters I realized JavaScript array iteration methods make JavaScript a lot easier to understand.

keywords: iteration — perform repeatedly

JavaScript has a lot of Array iteration methods that helps developers write clean and readable code. Some are immutable, which means they do not mutate the array. Using these methods reduce the use of for, while, do-while loops and the likes.

keywords: mutate — change

.entries()

This method returns a new array iterator object, with key/value pairs for each item or element or index in the array. It is created with its index as the key and the item as the value. This method can be used with destructuring to loop over keys and values.

Using .entries() method.

Parameters:
names is the name of the array, keynames is the name of the iterator and .next().value is a generator (To know more about generators please click here).

.every()

This method checks if all the elements or items in an array pass the condition provided by the function and returns a Boolean value. If any of the element in the array fails the condition the method returns false else it returns true. It also returns true for any condition provided the given array is empty.

Using .every() method

Parameters:
greaterthan is the name of the function, num is the parameter that the function takes and twotimes is the name of the array.

.foreach()

This method executes a function once for each array element. It allows the callback function mutate the array. There is no way to stop or break this method.

Using .foreach() method.

Parameters:
array1 name of the array. add is the callback function.

.map()

This method creates a new array by calling every element in the given array with the result of the provided function. This method is used when you want to apply a function to all the elements in the array.

Using .map() method

Parameters:
animals name of the array, animal is the callback function that checks each element of the array against the given condition.

When .map() and .foreach() are compared based on speed of the operation .map() is slightly faster.

.reduce()

This method executes a provided function on each element of the array to reduce the value of the array to a single value. The provided function must take two important parameters.

1. accumulator — It accumulates the callback return value.
2. currentValue — The element being processed in the array.

Optional Parameter: initialValue — The value to be used as the first argument when calling the callback function.

If the initialValue is provided in the call to reduce(), then the accumulator is equal to the initialValue but if it is not provided the accumulator is equal to the first value in the array and currentValue would be equal to the next value. If an empty array is provided and there is no initialValue, TypeError will be thrown.

If the array is empty and an initialValue is provided the value of the initialValue parameter will be returned without calling the provided function. This method is great if you want to compute a single value from the array an instance is summing a collection of numbers.

Using .reduce() method without providing an initialValue.

Using .reduce() method with an initialValue.

Parameters:
lines name of the array, first is the accumulator, cur is the currentValue, added is a variable and the value 10 is the initialValue.

.filter()

This method creates a new array from an existing array with all the elements that pass the condition in the provided function. if none of the elements pass the condition then an empty array is created.it also allows chaining which means you can use the .map() or the .reduce() method inside it. This method is useful when you need to find one or more items based on a condition you create.

Using .filter() method.

Chaining with .filter() and .map() methods.

Parameters:
animals Is the name of the array, animal is the callback function that checks each element of the array against the given condition.

.find()

This method returns the value of the first element in the array that pass the condition provided by the function. If none of the elements in the array pass the condition undefined is returned.

Using .find() method

Parameters:
numbers name of the array. num is the callback function that checks each element of the array against the given condition.

.findIndex()

This method returns the index of the first element in the array that pass the condition provided by the function and if no element pass the test it returns -1.

Using .findIndex() method.

Parameters:
numbers name of the array. num is the callback function that checks each element of the array against the given condition.

.keys()

This method returns a new array iterator object that contains the keys of each element in the given array.

Using .keys() method

Parameters:
array1 name of the array. key is a variable of the object array1.keys().

.reduceRight()

This method does the same thing as the .reduce() method the only different thing is it executes the array from right to left.

Using .reduceRight() method without an initalValue.

Parameters:
pairs name of the array, first is the accumulator, cur is the currentValue. To read more about .reduceRight() please click here.

.some()

This method checks that at least one of the element in the array pass the condition given by the function. It returns false if the array is empty.

Using .some() method

Parameters:
grades name of the array, grade is the callback function that checks at least one element of the array pass the condition, grading is a variable.

Conclusion
These array iteration methods are needed for solving problems involving operating on every array item.
They are particularly useful because they can be easy to read and maintain.