- Overview
- Transcript
4.7 While Loops
JavaScript also supports two additional types of loops: while and do .. while
loops. These loops differ from for loops in that they test a condition evaluating to true or false at each iteration step, rather than iterating a range of numbers or elements in an object. We’ll cover the syntax of both while loop types and look at some considerations of their usage.
Syntax
while
do
1.Introduction2 lessons, 07:42
1.1Introduction02:12
1.2Setup05:30
2.Language Fundamentals8 lessons, 1:00:53
2.1Variables06:33
2.2Data Types11:28
2.3Arithmetic, Assignment, and Comparison Operators10:24
2.4Unary, Logical, Comma, and Spread Operators09:02
2.5Operator Precedence03:50
2.6Reserved Words04:17
2.7Strict Mode04:34
2.8Functions10:45
3.Data Structures5 lessons, 22:52
3.1Arrays04:29
3.2Objects04:30
3.3Sets04:57
3.4Maps04:21
3.5Weak Maps and Weak Sets04:35
4.Controlling Program Execution7 lessons, 37:06
4.1Conditionals07:49
4.2Switch Statements04:41
4.3The For Loop06:39
4.4The `for .. in` Loop05:17
4.5The `for .. of` Loop04:02
4.6Iterators05:03
4.7While Loops03:35
5.Using JavaScript13 lessons, 1:44:36
5.1Working With Strings09:32
5.2Template Literals05:46
5.3Working With Numbers06:57
5.4Working With Arrays12:53
5.5Iterating and Transforming Arrays07:33
5.6Working With the Object Type13:55
5.7Object Literal Extensions06:45
5.8Working With Object Instances06:45
5.9Getters and Setters05:00
5.10Custom Objects11:28
5.11The `Math` API04:54
5.12Working With Dates and Times08:10
5.13The `Array` Constructor04:58
6.Functions8 lessons, 56:07
6.1The `this` Object06:15
6.2Working With Functions10:11
6.3Scope07:37
6.4Arrow Functions06:59
6.5Generator Functions08:13
6.6Closures05:00
6.7Prototypes06:26
6.8Default and Rest Parameters05:26
7.Miscellaneous6 lessons, 52:39
7.1Destructuring Assignments08:09
7.2AJAX08:30
7.3Regular Expressions10:51
7.4More About Regular Expressions08:38
7.5Classes06:48
7.6ES Modules09:43
8.Working With the DOM6 lessons, 37:39
8.1Selecting HTML Elements05:02
8.2Manipulating HTML Elements07:40
8.3DOM Traversal05:25
8.4Adding and Removing Elements04:45
8.5Creating Elements and Other Nodes04:39
8.6DOM Events10:08
9.Web APIs4 lessons, 17:41
9.1The Selector API03:03
9.2Geolocation05:29
9.3Web Storage05:24
9.4Web Workers03:45
10.Asynchronous JavaScript5 lessons, 26:23
10.1Promises09:52
10.2Promise Chaining05:11
10.3The async Keyword03:21
10.4The await Keyword04:04
10.5More About async and await03:55
11.Conclusion1 lesson, 00:43
11.1Conclusion00:43
4.7 While Loops
Hi folks. In this lesson we're going to look at the last remaining looping constructs in JavaScript. The while and do while loops. We'll start out with the while loops. The while loop is used to execute one or more statements for as long as a condition returns true. The syntax is straight forward. We use the while keyword, followed by the condition to evaluate in parentheses, followed by a block of one or more statements to execute. In this very simple example, we first set a variable called limits, which we initialize with the value zero. This is used in the while loop's condition, where we check that limits is less than five. Inside of the body of the loop, we log the current version of the limit variable, while simultaneously incrementing it. When the variable becomes five, the loop will stop. So let's just check the output in a browser. If we need to stop the loop prematurely, we can use the break statement, just like with some of the other types of loop. Let's just go back to the browser now. As we can see from the log statements, the condition is checked before the statements in the body of the loop are executed. So depending on the condition, the statements may never be executed. Now let's take a look at the very similar do while loop. The premise of this loop is the same as the standard while loop. We want to execute one or more statements while a condition evaluates to true. What differs is the syntax and the fact that with the do while loop the statements in the body of the loop will always be executed at least once. Even if the condition evaluates to false to begin with. So let's look at the syntax for this type of loop. This time, we start with the keyword do, followed immediately by a block within curly brackets. The while statement then comes after the block and is followed by the condition to evaluate. What this means is that the block will always be executed at least once. Let's check the output in a browser just to verify that that is indeed the case. And we can see that the statements in the block are executed at least once. So in this lesson, we looked at the two variations of the while loop, the while, and the do while loop. We saw that they both execute one or more statements while a condition is true. The only difference between them other than the syntax, is that the statements in a do while loop will always be executed at least once. But the statements in a while loop may or may not be executed depending on the condition which is being evaluated. We also saw that we can use the break statement to exit a while loop early if necessary. This now brings us to the end of the execution control section. In the next section, section five, we're going to move on to look at using JavaScript in everyday coding situations. Thanks for watching.