In this article, we are going to talk about methods in JavaScript to iterate (perform an action multiple times)! If you haven't read my 'For loops for Newbies' article yet, I highly suggest it as it's a great starting point.
While often the first iteration option that beginners are taught, is the 'for loop', using methods to loop is a lot more common. I appreciated being taught the 'for loop' first, because it really helped me understand what was happening before I moved on to learning other forms of iteration.
Referencing our original for loop where we printed out the names of each Sailor Guardian, we can actually do this several other ways that can save even more time than writing out a traditional 'for loop'.
Let's start with a very common array iteration method, forEach.
To use the forEach method, you will call it upon the array that you are working with, and it will run a function for each item in that array. Some great things about using forEach include shorter syntax, along with having access to both the index and array like you would if you were using a traditional 'for loop'.
Using an arrow function, we can put our entire function into a single line and have it give us the same result! Here you will see exactly what we are having our forEach method do; print out the individual sailor, the index of that sailor, and the array that we are calling the method on. The index and array values are optional, and if you don't specifically need access to them in your function, feel free to leave them out.
Another benefit of using the forEach method is that we can either use an anonymous function to have our forEach directly perform the desired action, or you can pass in an already defined function. Check this out:
This is basically saying "for each sailor in my array, run the transformationSparkles function".
Similar to the forEach method, is the map method. Map takes the same parameters but the difference is that it gives you a new array. This comes in handy if you don't want your function to alter the original array. Here you can see that our newSailors array is now a completely different array, and we didn't change the values in the original sailors array.
Besides those two popular methods, other options are 'for..of' loops and 'for..in' loops. Don't worry if you get confused on which does what, I find myself still Googling when I can't remember for sure! The 'for..of' loop iterates over the values in an iterable object such as an array, string, or NodeList. The 'for..in' loop iterates over the property keys of an object rather than the value itself, so if you were to use it on an array, it would return the index rather than the
value held in that index position. If you're using it on an object it will return the keys in the key-value pair.
Above shows how each would work with an array. The 'for..of' loop is returning the array values, while the 'for..in' is just returning the indexes. For this reason, the 'for..in' is more useful when working with objects. Since 'for..in' loops gives us access to each key, we can access the values in an object by referencing the key.
If you were to try using a 'for..of' loop, you would get the following error "TypeError: sailorsObj is not iterable". This is because objects are not considered iterable, so a 'for..of' loop cannot access each value in an object. Because a 'for..in' loop accesses the key, you are able to access the values in that way.
Thanks for reading! Feel free to fork a copy of the code if you want to test out what else you can do with these iteration methods.
Top comments (0)