Loops | Bondar Academy
Course: JavaScript for Testers
Module: JavaScript Fundamentals
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore loops in JavaScript, a mechanism that allows repeating operations multiple times based on a condition. We will cover the most common types of loops used in programming. Basic Loop Structure The basic syntax for a loop starts with the for keyword, followed by parentheses that define three statements: Initial Statement: This initializes a variable (e.g., i = 0 ). Condition: This determines how long the loop runs (e.g., i < 5 ). Increment Statement: This updates the variable after each iteration (e.g., i++ ). The loop body contains the code to execute, such as printing a message. Example of a For Loop To print "hello world" five times, you can use the following for loop: for (let i = 0; i < 5; i++) { console.log("hello world"); } Iterating Over Arrays To loop through an array, such as a list of cars, we can use the for...of loop: for (let car of cars) { console.log(car); } This will print each car in the array. Breaking Out of Loops To stop a loop early, you can use the break statement. For example: if (car === "Toyota") { break; } Using forEach Method Another way to iterate through arrays is by using the forEach method with fat arrow syntax : cars.forEach(car => { console.log(car); }); Summary The for loop is used for repeating operations. The for...of loop is ideal for iterating through arrays. The forEach method provides a compact way to loop through arrays. Thank you for watching, and see you in the next lesson!
Video Transcript
In this lesson, we will talk about loops. Loop is a mechanism in the programming language when you can repeat a certain operation multiple times based on the condition. There are different types of the loops exist in the JavaScript. We will talk about a few of them that will be used later in the class. So I will show you a few types of loops, how to create the condition for the loops, and we will write first loops together. So let's get into it. For example, we want to type five times the message, hello world, into the console, right? So one way of doing this is just simply repeating our code. Five times, hello world. And if I just copy it five times and run it. We see that this message was printed five times. But this is, of course, not the optimal way to do. And this is why the loops were created. So how to create the loop? Here is the basic syntax for the loop. And we will not talk about all different options for the loops in JavaScript. We will discuss only the main, the most popular one that we will use later on. So the most basic syntax for a loop is this one. It starts with four keywords, and inside of the parentheses, we define the condition. We need to declare a statement. One, divide semicolon, statement. Two, divide by semicolon, and statement three. Okay, and then curly brace. So what those statements? Statement one is our initial statement, what we want to stop the loop with. Statement two will define the condition of how long do we want to run our loop, and when we want to stop our loop. So this is a condition of stopping point for the loop to complete the execution. And statement three will define is what do we need to do after each cycle of the loop. So that's the basic rule. So let's create right now the for loop for the hello world to print it five more times. I'll come at this out. And by the way, this one is called just for loop, or also it's called for i loop. So we start with keyword four, then we need to declare our initial statement. We just create a new variable i and assign the value zero. We will start our loop with zero. Then we need to provide a second statement is how long do we want to run this loop and when we want to stop it. And I will say that I want to run this loop until i is less than five. And the third statement is what we need to do after each cycle is completed. So I want to increase i by one every time the loop is completed. So I can do something like i equals to i plus one. And this is the loop is configured. Also, this statement can be replaced with more simple structure, which will be i plus plus, which will do pretty much the same thing. After each loop cycle, the value for the i variable will be increased by one. And inside of our loop, we simply put the statement that we want to print, which is hello world. And this code will be executed five times. So let me run it and validate that it's actually working. And here we go, it's working exactly the same. So we have printed five times hello world and we have just three lines of code instead of five lines of code, is more optimal way. But how do I know that this loop is actually working? You can easily debug it. So I can use this index and print it out to the console as well. So just using concatenation and I do hello world plus i. And we will see that value for this variable will be printed every time with the loop completed inside of the cycle. Execute it and here we go. We see hello world zero, hello world one, two, three, and four. And we don't see hello world five because our loop stopped. Once the i was five, we reached this condition and we stopped the execution. So this structure is very simple and the most popular and useful when you need to repeat a certain operation several times. So let me show you another example of the loops. Let's say that we have a list of certain items. Let's take our cars from the previous lesson. We have the list of three cars, Volvo, Toyota, and Tesla. And we want to loop through the list of those items and print each of the item one by one to the console. How to do that? For that, we have another for loop structure. It's called for of loop. And here is how to do this. We also use for keyword and inside of the condition, we create new variable and create a new iterator. We can give any name to our iterator and let's say I name it car, right? And car of cars, and this is the loop body and cars, okay? So our variable is cars, cars is our array, and we defined this condition. So one more time, car is a variable that will be our iterator, and this variable will hold for us value from the array during each iteration of the site. First value will be Volvo, then this variable will hold value Toyota, then this variable will hold value Tesla, and then loop will be completed. So, and this is how it works. So I am pretty console log, console.log, and I just simply print out to the console our variable. And if I run this code right now, we see that three values were printed, Volvo, Toyota, and Tesla. And as I mentioned before, you can give any name. Let's say we can call it just C, let C of cars. And if we run this, it's gonna work absolutely the same way. So it's just our iterator, and for our convenience, we can give any name. So I name it as a car, because this variable will hold the value of the car in the array of cars. So let's imagine that we want to interrupt our loop during the execution. So let's say we're looking just the value of Toyota inside the loop. And once we find this value, we don't want to continue the loop. How to do that? Inside of this, we can add a condition that we learned before. Let's say something like, if car equals to Toyota, we want to break the loop. And if I run this code right now, we see that only two values were printed, Volvo and Toyota. Tesla was not printed because we broke the loop, we stopped the loop, technically. And I want to show you one more kind of syntax that's often used in JavaScript for the four loops. So this is considered a more classical ES5 syntax. And this is example with ES6 syntax for each loop. And the structure would be like this. So first, we provide the name of our array, which is cars, then dot. Then we have a method called forEach, then parentheses. Then inside of the forEach, we provide our iterator. And iterator will be a car. Then the syntax is this, fat arrow syntax and curly braces. Here we go. And then the rest works exactly the same as in the loop above. Ctrl-C, Ctrl-V, and we can run this code. And we see that Volvo, Toyota, and Tesla were printed. So this is more compact way of writing the same version of this code. And syntax is just slightly different. And you need to use this forEach method in JavaScript. So that's it. Let's quickly summarize what we did in this lesson. So for loops is the structure in the code that you can use if you want to repeat certain operation several times. The most classical approach is using forILoop, which has three statements. Initial statement condition, how long do we want to run this loop, and what we need to do after each loop cycle. For arrays, the best way to use a forOf loop when you use the iterator and iterating through the list of the array. And another way of looping through the arrays is ES JavaScript syntax, using forEach method and then using a fat arrow syntax, accessing your iterator and working with it. All right, thank you guys and see you in the next lesson.