@@ -4,14 +4,15 @@ attribution: jQuery Fundamentals
4
4
---
5
5
Loops let you run a block of code a certain number of times.
6
6
7
- <javascript caption =" A for loop " >
8
- // logs 'try 0', 'try 1', ..., 'try 4'
9
- for (var i=0; i<5; i++) {
10
- console.log('try ' + i);
11
- }
12
- </javascript >
13
-
14
- <div class =" note " markdown =" 1 " >
7
+ ``` js
8
+ // A for loop
9
+ // logs 'try 0', 'try 1', ..., 'try 4'
10
+ for (var i= 0 ; i< 5 ; i++ ) {
11
+ console .log (' try ' + i);
12
+ }
13
+ ```
14
+
15
+ <div class =" note " >
15
16
Note that in Loops even though we use the keyword var before
16
17
the variable name i, this does not "scope" the variable i to the loop block.
17
18
We'll discuss scope in depth later in this chapter.
@@ -21,9 +22,11 @@ We'll discuss scope in depth later in this chapter.
21
22
22
23
A ` for ` loop is made up of four statements and has the following structure:
23
24
24
- for ([initialisation]; [conditional]; [iteration]) {
25
- [loopBody]
26
- }
25
+ ``` js
26
+ for ([initialisation]; [conditional]; [iteration]) {
27
+ [loopBody]
28
+ }
29
+ ```
27
30
28
31
The _ initialisation_ statement is executed only once, before the loop starts. It
29
32
gives you an opportunity to prepare or declare any variables.
@@ -43,45 +46,50 @@ and so will wrap them in a block ( {...}).
43
46
44
47
Here's a typical for loop:
45
48
46
- <javascript caption =" A typical for loop " >
47
- for (var i = 0, limit = 100; i < limit; i++) {
48
- // This block will be executed 100 times
49
- console.log('Currently at ' + i);
50
- // Note: the last log will be "Currently at 99"
51
- }
52
- </javascript >
49
+ ``` js
50
+ // A typical for loop
51
+ for (var i = 0 , limit = 100 ; i < limit; i++ ) {
52
+ // This block will be executed 100 times
53
+ console .log (' Currently at ' + i);
54
+ // Note: the last log will be "Currently at 99"
55
+ }
56
+ ```
53
57
54
58
## The ` while ` loop
55
59
56
60
A while loop is similar to an if statement, except that its body will keep
57
61
executing until the condition evaluates to false.
58
62
59
- while ([conditional]) {
60
- [loopBody]
61
- }
63
+ ``` js
64
+ while ([conditional]) {
65
+ [loopBody]
66
+ }
67
+ ```
62
68
63
69
Here's a typical while loop:
64
70
65
- <javascript caption =" A typical while loop " >
66
- var i = 0;
67
- while (i < 100) {
68
- // This block will be executed 100 times
69
- console.log('Currently at ' + i);
71
+ ``` js
72
+ // A typical while loop
73
+ var i = 0 ;
74
+ while (i < 100 ) {
75
+ // This block will be executed 100 times
76
+ console .log (' Currently at ' + i);
70
77
71
- i++; // increment i
72
- }
73
- </ javascript >
78
+ i++ ; // increment i
79
+ }
80
+ ```
74
81
75
82
You'll notice that we're having to increment the counter within the loop's
76
83
body. It is possible to combine the conditional and incrementer, like so:
77
84
78
- <javascript caption =" A while loop with a combined conditional and incrementer " >
79
- var i = -1;
80
- while (++i < 100) {
81
- // This block will be executed 100 times
82
- console.log('Currently at ' + i);
83
- }
84
- </javascript >
85
+ ``` js
86
+ // A while loop with a combined conditional and incrementer
87
+ var i = - 1 ;
88
+ while (++ i < 100 ) {
89
+ // This block will be executed 100 times
90
+ console .log (' Currently at ' + i);
91
+ }
92
+ ```
85
93
86
94
Notice that we're starting at -1 and using the prefix incrementer (++i).
87
95
@@ -90,21 +98,23 @@ Notice that we're starting at -1 and using the prefix incrementer (++i).
90
98
This is almost exactly the same as the while loop, except for the fact that the
91
99
loop's body is executed at least once before the condition is tested.
92
100
93
- do {
94
- [loopBody]
95
- } while ([conditional])
96
-
101
+ ``` js
102
+ do {
103
+ [loopBody]
104
+ } while ([conditional])
105
+ ```
97
106
Here's a do-while loop:
98
107
99
- <javascript caption =" A do-while loop " >
100
- do {
101
- // Even though the condition evaluates to false
102
- // this loop's body will still execute once.
108
+ ``` js
109
+ // A do-while loop
110
+ do {
111
+ // Even though the condition evaluates to false
112
+ // this loop's body will still execute once.
103
113
104
- alert('Hi there!');
114
+ alert (' Hi there!' );
105
115
106
- } while (false);
107
- </ javascript >
116
+ } while (false );
117
+ ```
108
118
109
119
These types of loops are quite rare since only few situations require a loop
110
120
that blindly executes at least once. Regardless, it's good to be aware of it.
@@ -115,26 +125,28 @@ Usually, a loop's termination will result from the conditional statement not
115
125
evaluating to true, but it is possible to stop a loop in its tracks from within
116
126
the loop's body with the break statement.
117
127
118
- <javascript caption =" Stopping a loop " >
119
- for (var i = 0; i < 10; i++) {
120
- if (something) {
121
- break;
122
- }
123
- }
124
- </javascript >
128
+ ``` js
129
+ // Stopping a loop
130
+ for (var i = 0 ; i < 10 ; i++ ) {
131
+ if (something) {
132
+ break ;
133
+ }
134
+ }
135
+ ```
125
136
126
137
You may also want to continue the loop without executing more of the loop's
127
138
body. This is done using the continue statement.
128
139
129
140
130
- <javascript caption =" Skipping to the next iteration of a loop " >
131
- for (var i = 0; i < 10; i++) {
132
- if (something) {
133
- continue;
134
- }
141
+ ``` js
142
+ // Skipping to the next iteration of a loop
143
+ for (var i = 0 ; i < 10 ; i++ ) {
144
+ if (something) {
145
+ continue ;
146
+ }
135
147
136
- // The following statement will only be executed
137
- // if the conditional 'something' has not been met
138
- console.log('I have been reached');
139
- }
140
- </ javascript >
148
+ // The following statement will only be executed
149
+ // if the conditional 'something' has not been met
150
+ console .log (' I have been reached' );
151
+ }
152
+ ```
0 commit comments