Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • 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.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00: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.

Back to the top
View on GitHub