Looping through Object Properties: for...in
There may be times where you need to cycle through the properties in an object as you try to look for something. This is especially useful when an object is set up like a dictionary, among other things. You can't use a regular for loop for this like you can with an array. JavaScript has its own special construct, the for...in loop.
Syntax:
- for (let propertyHolder in object)
- {
- //code block for the loop
- //propertyHolder gives the name of one property each time through the loop.
- //to get the value of the property instead, use array notation: object[propertyHolder]
- }
You start with some object you want to work with. This loop will take the name of each property in the object. It assigns that name to the variable, in this case propertyName. You can get the value of the property using array notation by passing the variable to the object. You'll see this in action in a moment.
Example:
Let's start with a quick object. This one uses string properties because we need some with spaces in them (like
"living room"). Technically, kitchen and office don't need the quotes. I have them here for a consistent look.
- let roomColors =
- {
- "kitchen": "green",
- "office": "blue",
- "living room": "tan"
- };
If I want to display all the colors in the house, I'd want to cycle through all these properties and display the values. Now even though there are three properties, we can't use a standard for loop. It just doesn't work.
This doesn't work:
- for (let i = 0; i < 3; i++) //THIS WON'T WORK!!
- {
- console.log(roomColors[i]);
- }
- //output:
- //undefined
- //undefined
- //undefined
We just get three printings of undefined! Why? Well, remember that objects use array
notation to find their properties. We could use roomColors["kitchen"] to get the kitchen's color. That works fine (go on and try it). However, we
are passing in a number here (0, 1, then 2). What's really happening is, the
object is trying to return roomColors["0"] as if it's
roomColors.0 which isn't a property at all.
If we had a line in our object that said "1": "yellow", then it would give us "yellow" when i =
1.
This is why we need a different kind of loop for objects. Similar, but different. Let's check it out.
This does work:
Using the same roomColors object from above, let's rewrite that last broken loop and try again.
- for (let i in roomColors)
- {
- console.log(i);
- }
- //output:
- //"kitchen"
- //"office"
- //"living room"
Sidenote:
Incidentally, using i may be a coding standard for loops, but why not give a name that means something
to us? Since these properties are the names of rooms, why not use room for the variable instead?
Remember the golden rule of coding: the code should always be readable.
We still need a variable, such as i, to iterate through what we're doing. This goes through the roomColors object and takes each property and passes its name
to i in this case. That's what gets printed to console window.
That's great if you need the names of the properties. But we want the values—the colors—don't we? This is where the array notation of objects really comes in handy. Let's modify our code a little to do this.
- for (let room in roomColors)
- {
- //this is a helper variable to make the code easier to read
- let color = roomColors[room];
- console.log(color); //this line is different
- }
- //this time we get:
- //"green"
- //"blue"
- //"tan"
We could even put the two ideas together:
- for (let room in roomColors)
- {
- let color = roomColors[room];
- console.log(room + ": " + color);
- }
- //and that gives us this:
- //"kitchen: green"
- //"office: blue"
- //"living room: tan"
It all depends on what you need for any given project. You could even use a loop like to this to change values of properties and so on.
A slightly more complex example
You can easily insert an if statement into the loop to check for specific properties. You're not even limited to that.
How about, as we go through the properties, let's change the colors.
- for (let room in roomColors)
- {
- if (room === "office")
- {
- roomColors[room] = "orange";
- }
- else
- {
- roomColors[room] = "yellow";
- }
- let color = roomColors[room];
- console.log(room + ": " + color);
- }
- //totally different!
- //"kitchen: yellow"
- //"office: orange"
- //"living room: yellow"