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. 👍
Top comments (10)
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!!!
Thanks @camicode . Please can you restructure your question, I do not quite understand it yet.
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 :)
Okay great, in the first solution I used a
for ... inloop with loops through the property name of an array. That array has the following property names0, 1, 2, type.The second solution I use
for ... ofwhich 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 ... indeals with the property names,for ... ofdeals with the property values(elements of the array).Thanks for this explanation, now I understand better!
You are welcome @camicode
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?
Thanks @slimzycm .
Array.prototypebasically allows you to add new methods and properties to the Array object.I've always had issues with understanding for ... in loop cause I think that's what Vuejs uses.
Thanks
I am glad you understand it now.