Understanding Javascript Array Series IV - Array Loops & Iteration Part I

Array Loops & iteration offer a quick and easy way to do repeatedly executes the specified statement on the elements of an array. In these series, I am going to introduce you to the different ways of iterating through an array in JavaScript.

Let us start with the widely known For Loops

1. For ... Loop

A for ... loop repeatedly performs the specified statement until a specified condition evaluates to false.

  // syntax
  for ([Initial expression]; [specified condition]; [increment/decrement expresion]) {
   [specified statement]
  }

Let us get into these expression conditions a little more

[Initial Expression]: This expression is executed once before the specified statement runs. It is usually where the loop counter is initialized. Say you want to print the word nedy 10 times to the console, you would have to initialize the loop counter from 1, so at every point that the counter changes value the word nedy is printed.

[Condition]: This condition runs every time the value of the initial expression changes. If the condition resolves to true, the specified statement in the loop runs else the loop terminates. If this expression is not specified then the condition holds true always, this will break your app of you do not provide a break inside the loop as the loop will never end.

[Increment/decrement expresion]: This expression increases or decreases the value of the loop counter. This runs after the specified statement has been executed.

[Statement]: This is the statement that is executed on each element of the array.

  // Print the word `nedy` to the console 10 times

  //   initial exp  condition   incerement/decrement exp
  for (let i = 0;    i < 10;          i += 1 ) {
    // statement  
    console.log("nedy");
  }

1. For ... of Loop

This creates a loop over any iterable object such as strings, arrays, maps, sets, etc. It iterates over the property values of any given iterable.

  // syntax
  for ([variable] of [iterable object]) {
   [specified statement]
  }

[varaible]: For each iteration a value of the next property is assigned to the variable. variable may be declared with const, let, or var.

[iterable object]: Any object that can be iterated over(i.e it has iterable properties) example: String, Array, Object, Maps, NodeList, TypedArray, Sets, etc.

Think of a For of Loop like this. For every item of this array do x to it, where x is the statement you want to execute on it. If we wanted to print each player's name in this array ["Messi", "Ronaldo", "Kante", "Nedy"] to the console, we would do this: For each player of ["Messi", "Ronaldo", "Kante", "Nedy"], log the name to the console.

  // syntax
  const playersArray = ["Messi", "Ronaldo", "Kante", "Nedy"];
  for (let playerName of playersArray) {
   console.log(playerName)
  }

You can try this out in your browser console or on JS Bin to see the result.

3. For ... in Loop

This creates a loop over the enumerable properties of any iterable object. It iterates over the property names of any given iterable. It follows a similar syntax as the For of loop but with an in keyword instead of the of keyword.

  // syntax
  for ([variable] in [iterable object]) {
   [specified statement]
  }

variable] and [iterable object] have been explained above under the For... of Loop section.

At this point, it may seem like the For ... of and For ... in Loop is not different but there is. For ... of Loop iterates over the property value of any iterable object while For ... in Loop iterates over the property name of any iterable object. Let's take a look at some examples.

  const items = [1, 2, "nedy"];
  // add a property to the array
  items.type = "mixed";


  // For ... in Loop
  for (let item in items) {
   console.log(item) // "0", "1", "2", "type"
  }
  // It logs the property names of the array

  // For ... of Loop
  for (let item of items) {
   console.log(item) // 1, 2, "nedy"
  }
  // It logs the property values of the array

Conclusion

It is more advisable to use the For ... & For ... of methods to loop through an array if you want to work with the actual items in the array. Use For ... in Loop when you want to work with the properties of an array.

That's all for today, tomorrow we will talk about another set of functions used in array Iteration.

Here is the link to the other articles on this Array series written by me:

• What is an Array?
• Alternate ways of Creating an Array.
• Array Properties

Got any question, addition or correction? Please leave a comment.

Thank you for reading. 👍