5.5 Iterating and Transforming Arrays

Hi, folks. In this lesson, we're going to continue looking at arrays, this time focusing on some of the many iteration methods that arrays have. As well as being used with for and for-of loops, arrays themselves contain methods that iterate them in different ways. For basic iteration, we can use the forEach method. So the forEach method is called on an array and we pass a callback function to this method. The callback function will be invoked for each item within the array and has passed the current item each time it gets invoked. In this case, we just log it to the console. Unlike the for, or for-of loops, it's not possible to exit from a forEach loop early. It will always visit every element in the array. If we do want to only partially iterate the items in the array, we do have some other options. We could use the some method instead. The signature of the some method is similar to the signature of the forEach method. It's still a method that is called on the array instances, and it still gets passed a callback function. This callback function is passed the current from the array each time the callback gets invoked. The difference between some and forEach, is that the some method will iterate the array that it is called on until the callback function returns true. In this example, that will be on the second iteration. So let's check the browser's output this time. This time we only see two console logs. And that is because the callback function returns true when the current item equals y, and that is the second item in the array. And it's at that point that the some method stops. The some method itself will return true once it stops iterating. If the callback that we provide doesn't return true at all, the method will return false. The opposite of the some method is the every method. This method works in exactly the same way as the some method, except that it stops iterating the array when the callback function returns false. Let’s check the output for this one. This time we only see one console log. We only see one console log. Because as soon as the every method invokes the callback function for the second item, that item will not equal x. And so it will return true and the every method will stop iterating. Another useful method is the reduce method, which reduces an array down to a single value. Let's use a new array for this example. Like the other methods that we've looked at so far, the reduce method is passed a callback function. This callback function will be passed the value returned by the callback on the previous iteration, as well as the current item in the array. In this example, we just return the sum of the previous item, plus the current item. As well as passing a callback function, we also pass a second argument to the reduce method. This argument is the value that the previous argument to the callback function should have the very first time the callback function is invoked. So let's take a look at the output. So basically, what we've done is use the reduce method to sum all of the numbers in the array. One of the most powerful iteration methods that arrays have is the map method, which is used to map an array into another array. In this example, we first added an object of references which associates a letter with its equivalent in the Greek alphabet. We then have an array containing the values a, b, c. Like the callbacks past methods that we've looked at in this lesson, the callback can receive up to three arguments. The first argument is the current item. And it will also receive the index as the second argument to the callback, as well as the original array as the third argument. Although we don't actually use these in this example, they are available if you need them. So the callback function will be invoked for each item in the array that it is called on. Whatever we return from this callback, on each iteration, will end up as a new element in the new array that the map method returns. So let's take a look at the output. So we've mapped the first array, a, b, g, into a new array containing alpha, beta, gamma. So the map method takes an array and creates a new array by iterating the original array. We can modify the values from the original array and transform them or create entirely new elements for the new array, just like we did in this example. So in this lesson, we looked at some of the methods that all arrays have for iterating through the items in the array. We looked at the basic forEach method first, which simply visits each item in the array and invokes a callback function for them. We then moved on to look at some variations of this behavior such as the some and every methods, which iterate the array until the call back function returns either true or false respectively. We also saw the reduce method, which reduces the array values down into a single value. And lastly, we looked at the map method, which maps one array into another array. All of these methods can be extremely useful when working with arrays, so it's good to understand them well. In the next lesson, we can look at some of the useful properties and methods that we can access through the Object type. Thanks for watching.