DEV Community

loading...
Cover image for JavaScript Made Easy: Part 11

JavaScript Made Easy: Part 11

dtetreau profile image David Tetreau ・2 min read

For Part 11, we will continue learning about loops. In Part 10, we learned about the "for loop". The next loop we will discuss is the "for in loop" a.k.a. for/in loop. This loop's purpose is to loop though the properties of objects. If you need a refresher on objects, look back at Part 9. Then, open up your repl and code along!

The for/in loop can iterate over objects. Since objects are one of the most important parts of JavaScript, that makes for/in loops equally as important. Here's an example of the syntax of a for/in loop:


for(variable in object) {
  //code
}

Enter fullscreen mode Exit fullscreen mode

Another way to write the for/in syntax is:


for (key in object) {
    //code
}

Enter fullscreen mode Exit fullscreen mode

To set up this loop, there needs to be a "for" keyword and an "in" keyword. Also, where "object" appears in the code above needs to be the name of the object that is being looped through. Here's an example to make things more clear:


const banana = { color: "yellow",  group: "fruit", texture: "soft" }

for(const prop in banana) {
  console.log(banana[prop]);//returns all values
}   

Enter fullscreen mode Exit fullscreen mode

As you can see, this loop gave us the ability to access and log every value in the "banana" object. This would have worked the same no matter what we called the variable. For example:


const banana = { color: "yellow",  group: "fruit", texture: "soft" }

for(const anything in banana) {
  console.log(banana[anything]);//returns all values
}   

Enter fullscreen mode Exit fullscreen mode

This loop would return the exact same values even though we called the variable "anything" instead of "prop". However, "prop" is probably a better naming convention because it is easily recognizable by other developers. Here's another example that is slightly more complex. This example was taken from programiz.com:


const salaries = {
    Jack : 24000,
    Paul : 34000,
    Monica : 55000
}

// using for...in
for (let i in salaries) {

    // add a currency symbol
    let salary = "$" + salaries[i];

    // display the values
    console.log(`${i} : ${salary}`);
}

Enter fullscreen mode Exit fullscreen mode

Starting from the top, there is an object named "salaries" which has several names as its keys and has numbers as its values. There is a for/in loop that has "i" as its variable and iterates over the "salaries" object. With every iteration, the variable "salary" is initiated and set to a string which contains a dollar sign and the current value. Then, we log an interpolated string to the console which contains the current key, a colon, and the current value. Take some time to understand what is going on with this example. Why does the variable "i" end up being the current key that the loop is on? Why is salaries[i] the values and not the keys? Write out an object of your own and see if you can get the loop to log all of the "key:value pairs" in the object you make.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.

Discussion (0)

Forem Open with the Forem app