Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:18Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 Loops

In this lesson, you’ll learn about loops in JavaScript. A loop is a piece of code that executes repeatedly, either a set number of times or until a certain condition is met. Let’s see how we can loop in JavaScript.

2.7 Loops

Hello, and welcome to lesson number eight, where you'll learn about loops in JavaScript. A loop is a piece of code that executes repeatedly either a set number of times or until a certain condition is met. And if you've worked with Sass and you've used the for, each, and while directives, then you already know what loops are all about. Now, when it comes to JavaScript we have three main types of loops. We have the for, we have the do-while and we have the while. Let's begin with the for loop a for loop will repeat until a specified condition evaluates to false. And we go something like this, for we open some parentheses then we'll have an initial expression. Now the initial expression can be or is mostly used to initialize a variable or a counter. So for example I can say var x = 1 then I'm gonna do a semicolon, and then follows the condition. Now the condition is the thing that's gonna be evaluated. And if that value of the condition is true then the loop will execute, or the loop statement. If the value is false, then the loop terminates. So for example, let's say x is gonna be smaller than 10, and I'm going to do a semi colon again. And then third we have the incremental expression. And this is usually used to increment the counter, so I can say for example X++ and then we're going to open some curly braces. And we're gonna have the main statement or the block of code that's going to be executed. So, let's say for example that I'm going to do a console log for X, and that's gonna be printing nine numbers in the console from one to nine. Now, if I say X smaller or equal than ten. It's gonna print ten of them, because the condition evaluates to true when we reach number 10. Now it's running well, what can I use loops for, well you can use them for a bunch of different things. For example, we have that names array a what if we want to print all of the names in that array. Well we can do something very simple. For example for var x, or you can call it whatever you want, y = 0 or starting from 0 because an array's index is 0 based. So we're gonna say y it's smaller than a names.length y++ and then we simply do console log names of y. And that's going to print George, Margaret and Shawn. So what I did here, I started from 0, I'm going up until names the length which in my case is three. So we're going to zero one hundred two or incrementing y as we go along and were out putting those names to the consul. Next let's move on to the do-while statements and the do-while statement will repeat until a specific condition evaluates to false. And do-while statement looks something like this do and will have the statement here while and it will type or condition. So for example let's declare a variable here called x equals. Now, it's actually need to leave the for now we're gonna do. Var x as your so we're going to console log the names of x.. We're gonna do x++ and we're gonna do this while x is smaller than names.length. And this will print George, Margaret, and Shaun. But let me show you another example let's say that we have a do while statement that looks something like this do console log x while x is hard and 0, and it's actually comment this bit, and a refresh it prints 0. Now why is this happening, because x is zero, so this condition here is not met. Well that's what do while does, the statement is executed at least once regardless of how the condition is or to what the condition is evaluated to. Now on the flip side, we have the while statement which is very similar to this. The only difference is, the while statement will execute or the while loop will execute the statement only if the condition is met. So, for example, we have while x higher than 0, we're gonna console log x. And if we're gonna comment this and refresh, we have nothing that statement console log x has not been executed. But if we do while console while x is smaller than five, and we do console log x++, we're going to get this result. That's the difference between do-while and a while. Now have you ever heard of mix ins in C.S.S. preprocessors? Well if you have then, you should know that JavaScript and pretty much every programming language out there has something called functions. And functions are very interesting, very cool. You can do lots of things with them and we'll learn about them in the next lesson.

Back to the top