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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.3 The For Loop

The most basic way of iterating a data structure is the for loop. Let’s take a look at how it works.

Syntax

  • for

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.3 The For Loop

Hi folks, in this lesson we're going to take a look at the for Loop. In programming a Loop is used to execute a block of statements numerous times, each time with a different value. JavaScript has a number of different types of Loop, the while and do while Loops, and the for, for in, and for of Loops. In this lesson, let's focus on the for loop. The for loop is probably the most frequently used type of loop in JavaScript. This loop is useful for iterating through the items in an array. With the for loop, we use the reserved word for, followed by three expressions inside parentheses, followed by a block of statements within curly braces. So for this example, let's say we have an array containing three elements. We can loop through this array using a for loop, and do something with each of the elements in the array. So let's look at the syntax in more detail. We start out with the for keyword. We then have three expressions within parenthesis. And this is followed by a block containing one or more expressions. Let's look at the three expressions within the parenthesis. The first expression, highlighted here, sets a counter variable through the loop. The second expression checks that the counter variable is less than the length of the array and the last expression increments the counter variable by one, so the first expression will be evaluated the first time the loop is run. But the second and third expressions will be evaluated on each iteration of the loop. In this case, the array has three elements, so the loop will be executed three times. Inside the block for the look we can get each item in the array using square bracket notation in conjunction with the counter variable x. So if we look at this in a browser now, we should see three different log messages containing each element from the array. And I’ve used the wrong identifier in the second expression. Let’s just fix that. And it should now work as expected. So this is the most basic form of loop and it’s been a part of JavaScript for a very long time. We can actually improve on how this loop performs quite easily by adding another variable to the first expression and making a minor change to the second expression. So we've only made a small change here, but what we've done is change the first expression, which is only evaluated once, to include a variable that contains the length of the array. Then in the second expression we can just compare the two variables. Remember that I said the first expression is only evaluated once, the first time the loop runs. So we aren't checking the length of the array on every single iteration now, only on the first iteration of the loop. All three of the conditions in the parenthesis, following the for keyword, are optional. We just need to provide the separators if we want to omit any of them. We can even omit all three if we like. So in this case, we didn't provide any expressions within parenthesis, we just provided the separators. This means that we have to do the check, that we're not going over the length of the array inside the body of the for loop. And it means we need to do the increment ourselves at the end of the loop. This will work in exactly the same way as the first for loop. Once again, I've made a slight mistake, and I've treated an array like a function and used parenthesis instead of square brackets, let me just fix that. So this time we see the same three log messages as the first loop showed. So this is valid JavaScript syntax and you might see for loops that look like this, but generally it's best to stay away from this second format. And the reason for that is because in the first for loop the x variable, which we declared with let, is scoped to the for loop block and is not visible outside of the block. Whereas in the second form, the x variable is defined outside of the for loop. And so it's visible both within the block of the for loop and outside of it. We also have to do this length check ourselves using if statements, and manually break inside the body of the for loop, which will stop the loop from executing. So really we lose the benefits of block scoping in second formats, and there is a bit more code that we have to write ourselves. So generally the first format is preferred. So in this lesson we looked at the for loop, which we learned is specifically for iterating over arrays. Be aware that the bigger and more complex a loop is, the slower it will run. In the next lesson we'll move on to look at the for in loop. Thanks for watching.

Back to the top