Javascript Array Iteration Methods

I have decided to write about the first major hurdle I faced while learning Javascript. Array iteration. This was (and in some ways still is) difficult for me to understand. I am hoping that by writing this blog post it will help me, as well as everyone who reads this, to have a better understanding of some of the main array iteration methods.

The first thing to understand is what iterating over an array means. Iterating over an array means that we are going through the array and accessing each element one by one. This is helpful because sometimes we need to perform the same action on groups of elements. Say we have an array:

const candy = ["sour patch", "twizzlers", "skittles", "starburst"];

And we want to print each element of the array to the console. To do this without using an iterator, we would have to type out each log to the console with each element in our array like so:

console.log("sour patch");
console.log("twizzlers");
console.log("skittles");
console.log("starburst");

//////console/////
sour patch
twizzlers
skittles
starburst

This can become very time consuming, imagine having an array with hundreds or thousands of elements in it. As you can see this is not a very efficient way of accessing and acting on elements in an array. A better way to do this is by using Javascript's built in array iteration methods. There are four array iteration methods that I have found to be the most useful for me so far. They are forEach, find, filter and map.

We use these methods by taking the name of the array we want to iterate over and typing a period, followed by the method we would like to use on that array.
For example:

ourArray.find()
ourArray.map()
ourArray.forEach()

forEach:
Using the same candy array example as before, we can use Javascript's forEach method to accomplish the same task much more efficiently.

const candy = ["sour patch", "twizzlers", "skittles", "starburst"];

candy.forEach((element) => {
    console.log(element)
});

//////console//////
sour patch
twizzlers
skittles
starburst

As you can see, we were able to log each element in our candy array with just a couple lines of code rather than typing each log out manually. First we chain .forEach onto our array. Then we pass in an anonymous callback function as our argument of forEach. Next we pass in a variable name as an argument to our callback function. This variable name represents each element in our array which are being passed into the callback function. The first time through, element represents our first element in the array which is "sour patch." The second time through, it represents "twizzlers" and so on. Finally, we write what we want our function to do within the curly brackets. forEach iterates over the array that it is called on, and it executes that callback function for each element of the array.

find:

Say we have an array of numbers and we want to find out if our numbers array contains a number less than 10.

const numbersArray = [12, 17, 7, 3, 20, 94];

const firstNumLessThanTen = numbersArray.find(number => number < 10);

console.log(firstNumLessThanTen);

///////console//////
7

The find method iterates over an array and returns the first element in the array that satisfies the condition that we write in our function. First we chain .find onto our array. Then we pass in an anonymous callback function as our argument of find. Next we pass in a variable name as an argument to our callback function. Just like forEach, this variable name represents each element in our array which are being passed into the callback function. Finally we write the condition that we want to test our array with which in this example is, is there a number in our array that is less than 10. The find method will then pass in each element in our array to our function and test if it is less than 10. Once an element satisfies the condition, it will return that element. If there are no elements in our array that satisfy the condition, it will return undefined.

filter:

The filter method is similar to the find method in that it tests elements to see if they satisfy the condition that we write. The main difference is that it returns ALL elements in the array that satisfy the condition. Say we use the same example above but instead of finding the first element in our array that is less than 10, we want to find all elements in our array that are less than 10. We can use .filter to do this.

const numbersArray = [12, 17, 7, 3, 20, 94];

const allNumsLessThanTen = numbersArray.filter((element) => element < 8)

console.log(allNumsLessThanTen);

///////console//////
[7, 3]

As you can see, .filter returns all elements that satisfy the condition and they are returned in a new array. Our original numbersArray is left unchanged. The way we use the filter method is first we chain .filter onto our array. It works the same as .forEach and .find. We pass in an anonymous callback function as our argument and we pass in a variable name as an argument to our callback function; this variable name represents each element in our array which are being passed into the callback function. Finally we write the condition that we want to test our array with which is are there any numbers in our array that are less than 10. The filter method will then pass in each element in our array to our function and test if it is less than 10. If no elements in the array satisfy the condition, the filter method will return a new empty array.

map:

The map method is useful in that it allows us to act on each element of an array, return a new array with the updated elements, all while leaving the original array unchanged.
Say we have our numbersArray and we wanted to add 10 to each element in the array. Map would allow us to easily accomplish this task.

const numbersArray = [12, 17, 7, 3, 20, 94];

const updatedNumbersArray = numbersArray.map((element) => element + 10);

console.log(updatedNumbersArray);

///////console//////
[22, 27, 17, 13, 30, 104]

Map returns a brand new array with 10 added to all of the elements from our original numbersArray. If we were to console.log numbersArray it would be completely unchanged. The map method works the same as the methods above, in that we chain .map onto our array. We pass in an anonymous callback function as our argument and we pass in a variable name as an argument to our callback function; this variable name represents each element in our array which are being passed into the callback function. Lastly we write the action we would like to invoke on each element of the array. Map will then perform that action on each element and return a new array with those updated elements inside.