for in in javascript

For loop in Javascript. An alternative to the for loop, for traversals to object properties in Javascript. How to iterate through the properties and property values ​​of an object, generically in Javascript with the for loop……

For loop in Javascript. An alternative to the for loop, for traversals to object properties in Javascript. How to iterate through the properties and property values ​​of an object, generically in Javascript with the for … in loop.

In Javascript there are no associative arrays and as you know, these are always good allies as resources for programming. If we want to use something like an associative array we will have to use object constructs. In any case, with what the language offers us, we are able to do all the things that in other languages ​​you do with associative arrays.

In this article we intend to explain how to perform a generic route to all the properties present in an object, with the for loop in Javascript. Through this control structure we can obtain the names of the properties together with their values. This traversal is “generic”, that is, it is independent of the number of properties found in the object that we are traversing and it is also independent of their property names or their values.

Note: In case you don’t know, associative arrays are those that do not have numerical indices but alphabetical ones. They serve us for many things in programming languages. If you didn’t know, you’ll find out. For now then forget the mention of associative arrays and think only about objects and their properties.

loop for … in

In Javascript there is a special construction of the old for loop, which allows you to iterate through all the properties of an object. It is similar to what we have in other languages ​​in the foreach loop (Javascript also has forEach but it is only for arrays and it is not a loop but an array method, which is used to iterate, but it is not a control structure as such) . Its syntax is the following:

for (var property in object){ // code to be iterated by the loop. // within this code the variable “property” contains the current property // current at each of the iteration steps. }

There is not much more to explain about this structure of the for in loop, just to say that in this way you can access the names of the object’s properties. Thanks to the loop, the code inside the for will be executed once for each of the object’s properties. We’ll look at some code examples later to make it clear enough.

You will have noticed that we have said that this way you can access the properties. Do not worry that to access its values ​​you will have to use a little trick. We will also see it in this article, but we will not get ahead of ourselves.

Loop to access the properties of an object

Let’s see an application of this for in loop with a simple example that sheds some light on us.

We have an object created from an object literal.

var monthdays = { January: 31, February: 28, March: 31, April: 30, May: 31 }

They are the months of the year and the days of that month. It is true that February may have other days and that I am missing months, but for educational purposes it is enough. You will notice that this structure in summary is very similar to what an associative array would be. If we need them in our program we can use it as if it were.

Well, to access the properties of that object (in this case it would be to access the names of each of the months) you would use this loop.

for (var month in monthdays){ console.log(month); }

With this you will get in the console that all the names of the months of the year that we have in that diasMes object appear.

Access property values

A common situation is that you don’t want to access the property names, but rather the values. To do this we can use a little trick that language allows us. This is not something specific to the for loop in Javascript, but to the treatment that this language does to objects. This is that we can access the properties of objects as if they were arrays, indicating a string with the name of the property as the array index.

alert(monthdays);

This will show us in an alert box the value 31, which is the one associated with the “may” property of the “diasMes” object.

You may have noticed that this syntax for accessing property values ​​is exactly the same as the syntax used to access cell values ​​of an associative array.

Well, knowing this you will be able to access the values ​​of the object, one by one, with a for … in loop very similar to the one we had before.

for (var month in monthdays){ console.log(monthdays); }

I’m sure it seems easy now. It really is.

All together, access to property and its value

I’m sure you don’t even need to read this part. I simply want to display a more readable console message by accessing the property and its value in the same loop.

for (var month in monthDays){ console.log(“Month ” + month + ” has ” + monthDays + ” days.”); }

Another example you can see in the code below. We are going to take a tour of this object, which has other objects in its properties, that is, it is an object of objects. It is something like an array, but it is not really an array, but a collection. Each of the objects has an identifier, which is its name, and as a value it has an object with other properties. This construct is very common in Firebase, where we can’t save arrays to the database.

{ “Miguel Angel Alvarez” : { “isFav” : true }, “.com” : { “isFav” : false }, “EscuelaIT” : { “isFav” : true }, }

Now you can see the for loop in Javascript, with which we perform the iteration, checking for each of the objects in the collection if it is a favorite.

for(var user in users) { if(users.isFav) { console.log(‘User with index (we use their name as index) ‘ + user + ‘ is one of your favourites’); } }

That’s it, with this knowledge you can no longer escape the possibilities of object routes and the construction of the useful for loop in Javascript. Also, if you need associative arrays to build your programs, you will know the alternative way to implement and use them, through objects, in Javascript. It will surely help you, even if you don’t know why now.

Video tutorial of tours to object properties

We end this article by recommending this video tutorial, in which you will see a couple of examples of routes to object properties with the for…in loop. I hope you like it and can complement well what you just learned.