Basics of For Loops: To For...in or For...of?

Going into learning Javascript, I knew a little bit from my past about the basics of a For loop. I have learned it briefly in past classes and maybe even have used it before. When I began learning more about for statements, I struggled with for...in and for...of. So now I am here to help you! Learning coding can be scary at first, but it can also be really fun. Let me show you!

What is a For Loop?

First, let’s make sure you understand for loops. To briefly define a for loop, MDN describes: "the for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a block statement) to be executed in the loop [1]". In simpler terms, a for statement gives a beginning point for where the loop should start, a way to loop through, and finally an end so that the loop can stop and not be executed forever. It then executes that loop based on the statement that follows. Here’s a simple example of adding:

let a = '';
for (let i = 0; i < 5; i++) {
  a = a + i;
}
console.log(a);
//=> "01234

A simple for loop made sense to me when I was learning, so when I was introduced for…in and for…of I had a lot of questions. My first though was, why not just use a regular for loop? Later as I kept learning, I was getting confused, what was the difference between a for…in and for…of anyway? Learning at a rapid pace, it can sometimes be easy to get confused or to forget something. So, it took me a bit to realize that a for…in is to iterate through an object and for…of is to iterate through all iterable objects such as arrays.

How Do You Use a For...In?

A for…in as MDN describes is a “statement [that] iterates over all enumerable string properties of an object (ignoring properties keyed by symbols), including inherited enumerable properties [2]”. In other words, the for…in iterates through an object's keys. Let’s say we have an object with seven key value pairs or seven dwarfs each with a number associated with them like this…

let object = { bashful: 1, doc: 2, dopey: 3, grumpy: 4, happy: 5, sleepy: 6, sneezy: 7 }

Now let's create a for…in loop to iterate through each of the seven characters in the object and log a sentence for each!

for (const dwarf in object){
    console.log(`the ${object[dwarf]} dwarf is ${dwarf}`)
}
//=> "dwarf 1 is bashful"
//=> "dwarf 2 is doc"
//=> "dwarf 3 is dopey"
//=> "dwarf 4 is grumpy"
//=> "dwarf 5 is happy"
//=> "dwarf 6 is sleepy"
//=> "dwarf 7 is sneezy"

How Do You Use a For...Of?

The difference of a for…of loop as w3schools describes is a “statement [that] loops through the values of an iterable object. It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more [3]”. For learning sake we're going to be using an array for this example. Here is an array with three names…

const array = ['Robbie', 'Miley', 'Jackson'];

Now we're going to use a for…of loop to iterate through each name in the array and log each name with the last name attached!

for (const name of array) {
   console.log(name + ' Stewart')
};
//=> Robbie Stewart 
//=> Miley Stewart 
//=> Jackson Stewart

Conclusion:

I hope I helped you understand the difference between for…in and for…of loops and when to properly use them. I also hope that through my examples I helped in showing you that coding can be fun!

References:
[1] “For - Javascript: MDN.” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for.
[2] “For...in - Javascript: MDN.” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in.
[3] “The For Of Loop.” JavaScript for Of, https://www.w3schools.com/js/js_loop_forof.asp.