Let’s get it Loopin’ in JavaScript
Looping or iterating are ways to repeatedly execute blocks of code. This simple yet robust procedure allows you to easily perform an action multiple times on a collection of data.
There’s more than one way to skin a cat… and the same is true for looping and iterating in JavaScript. Even though they all perform similarly, each method has its idiosyncrasies and curlicues. Let’s take a look and explore the various ways we have available to us in JavaScript.
- The For loop
This was the first way I learned to have a block of code repeat when I was studying at New York Code and Design Academy.
After the reserved word “for”, in parenthesis are put three arguments: a declaration of counter value, the condition when met this iteration should stop, and how the counter’s value should change once the code block has been run. After the parenthesis, in curly braces you write the code block for the execution you wish to perform.
2. The Do While Loop
This iteration method executes it’s code block AT LEAST ONCE.
After the the reserved word “do” in curly braces, write the block of code you want to execute. Once the block is close, write the reserved word “while” followed by the condition written in parenthesis. It runs the block first and then checks the condition
3. The While Loop
This iteration method similar to the above Do While, and by similar I mean it does the exact same operations in the opposite order. Since it checks the condition before the block is run, it is not guaranteed to run at all.
With the above 3 methods — For, Do/While, and While — be careful to ensure your iteration counter will meet the condition you have set. Otherwise, the block of code will never stop executing, becoming stuck in an infinite loop.
These next few methods require some data to be iterated over, whether it’s a string, array, or object.
4. The forEach Loop
This works only on arrays. Passing a function as an argument, it executes that function on each element in that array.
forEach works very similarly to the .map(), however map returns a new array with the updated values. Also, according to a quick Google search, map runs alot faster.
5. The For Of
With an array, this will iterate over the entire array, executing the code block on each element.
With a string, it will iterate over the entire string, executing the code on each character.
6 The For In
The For/In loop is used for iteration over an object’s properties (key/values). It will iterate over the key/value pair in the entire object, executing the code block written passing in the key.
For arrays and strings, it iterates over the entire data, passing the position or index (an integer) into the code block you define. Written incorrectly, you’re just going to get numbers back. Simple mnemonic tip: for/in is used for an index.
And again, on a string, it’s passing in the position of the letter, not the character itself.
Loops are great tools to use when you want a block of code to repeat. It is much more efficient to have you code repeat, than to repeat your code. And with the various manners in which JavaScript has the power to loop, there is a perfect way massage your data effectively if the correct manner is chosen. Happy coding, and bang(!)out.
