DEV Community

loading...

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

nedyudombat profile image Nedy Udombat Updated on ・3 min read

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:

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

Thank you for reading. 👍

Discussion (10)

pic
Editor guide
Collapse
camicode profile image
CamCode

Nice post!
thanks to you, I started to understand a little about arrays,but there is a point that I don't understand in the last example of your code when you want to add a property to the array using the type method: because as a final result it prints 0 , 1 , 2 ,nedy and not mixed? And in other for loop why don't print mixed? Thanks and continue with your posts!!!

Collapse
nedyudombat profile image
Nedy Udombat Author

Thanks @camicode . Please can you restructure your question, I do not quite understand it yet.

Collapse
camicode profile image
CamCode

Of course !! sorry but English it's not my first language, however I don't understand the final example. Can you explain me better why in both loops doesn't print "mixed"?
I hope it's clearer now :)

Thread Thread
nedyudombat profile image
Nedy Udombat Author

Okay great, in the first solution I used a for ... in loop with loops through the property name of an array. That array has the following property names 0, 1, 2, type.

The second solution I use for ... of which loops through the property values of an array, basically the elements of the array. 1, 2, "nedy";

If I want to print mixed which a property of the items array, I would have to do this console.log(items.type) // "mixed".

so for ... in deals with the property names, for ... of deals with the property values(elements of the array).

Thread Thread
camicode profile image
CamCode

Thanks for this explanation, now I understand better!

Thread Thread
nedyudombat profile image
Collapse
slimzycm profile image
Slimzy.CM

This is what I've been looking for to understand more about this looping system, please don't stop with this series,am enjoying it and I won't stop following up.. By the way can I get more explaining on the array.prototype method?

Collapse
nedyudombat profile image
Nedy Udombat Author

Thanks @slimzycm . Array.prototype basically allows you to add new methods and properties to the Array object.

Collapse
umoren profile image
Umoren Samuel

I've always had issues with understanding for ... in loop cause I think that's what Vuejs uses.

Thanks

Collapse
nedyudombat profile image
Nedy Udombat Author

I am glad you understand it now.