WEBVTT 00:01.550 --> 00:06.740 All right, let's discuss another very important thing in JavaScript and also in all programming languages, 00:07.100 --> 00:08.900 it's time to talk about loops. 00:09.500 --> 00:15.170 If you want to run the same code over and over again, each time with a different value, then you have 00:15.170 --> 00:16.160 to use loops. 00:17.090 --> 00:21.200 Looping means repeating a block of code when a condition is through. 00:21.950 --> 00:24.080 So loops check condition. 00:25.490 --> 00:31.310 OK, let's actually see what I'm talking about to demonstrate how powerful tool of the loop is, let's 00:31.640 --> 00:32.780 create an array. 00:34.620 --> 00:44.820 And place inside it some names, John Niek, then Bob Michael. 00:47.830 --> 00:48.760 And Mary. 00:51.710 --> 00:56.820 Now, suppose that we want to output and cancel each item of array at the same time. 00:57.320 --> 00:58.570 So what can we do? 00:58.700 --> 01:03.260 We have to access on each item and then lock them in council separately like this. 01:03.800 --> 01:08.930 Cancel that log array with index number zero. 01:10.370 --> 01:14.510 Let's duplicated four times and change the index numbers. 01:20.380 --> 01:26.370 Revolt and you see that we have the names from Iraq, the result, what we wanted to get. 01:27.100 --> 01:28.870 How do you think is that the best way? 01:29.800 --> 01:32.170 Of course not, because we had to type a lot. 01:32.800 --> 01:36.790 We use specified index number for each item in order to access on that. 01:37.660 --> 01:41.710 Here we had just only five items and was a bit easy to do that. 01:41.710 --> 01:44.970 But imagine that sometimes we may have dozens of them. 01:45.490 --> 01:47.080 Then it will be crazy, right? 01:47.980 --> 01:55.300 So we need something else and it's loop to avoid using such inconvenient way and so much typing. 01:55.690 --> 01:58.540 We can simply use falbe at first. 01:58.540 --> 02:01.270 Let's demonstrate how we had to write it syntactically. 02:01.960 --> 02:04.060 We need to use keyword for. 02:05.320 --> 02:11.590 Followed by parentheses in which we had to write some expressions and conditions, first of all, we 02:11.590 --> 02:16.240 need to create variable which will be initialized or counter. 02:16.900 --> 02:21.700 In most cases, the name of the variable is AI, which stands for initialization. 02:22.930 --> 02:29.110 So if we want to output names from Array, starting with John, then we need to assign to the variable 02:29.120 --> 02:36.190 idea value zero, because as you know, John is the first item of array and its index number is zero 02:36.700 --> 02:43.770 after the end of the first date, but into place semicolon, which is followed by the condition. 02:44.710 --> 02:48.490 So array consists of five items because of that. 02:48.490 --> 02:56.560 The last item Mary has the index number for then we need as a condition to write I is less than five. 02:58.830 --> 03:02.880 And the last statement we need to write I plus plus. 03:04.110 --> 03:12.780 It's actually an arithmetical operator and it's called increment operator, and it's the same as I equals 03:12.780 --> 03:21.510 to I plus one using increment operator, after each step, the value is increased by one. 03:23.140 --> 03:28.810 All right, the last we have to do is to run these in Castle, White Castle, that log. 03:30.770 --> 03:33.590 Array and in square brackets, right? 03:33.830 --> 03:34.700 The variable I. 03:37.090 --> 03:43.430 Reload and you see that we have again, the names from Array for Loop gave us the same results. 03:44.260 --> 03:48.480 So I believe you guessed that it's more powerful, dynamic and flexible way. 03:49.780 --> 03:51.550 OK, let's dig deeper. 03:51.560 --> 03:54.260 What has happened here and how far Loop actually works. 03:54.280 --> 04:00.160 In general, one follow up is on global level, it means that it's not inside the function. 04:00.490 --> 04:03.660 Then JavaScript engine immediately executes the code. 04:04.180 --> 04:07.630 We don't need to call it as it was in case of functions. 04:08.440 --> 04:09.430 Each step in a loop. 04:09.430 --> 04:16.690 I mean, the whole cycle is called as an iteration at first JavaScript engines is that variable, i.e. 04:16.690 --> 04:17.650 equals to zero. 04:18.730 --> 04:20.170 Then it checks the condition. 04:20.770 --> 04:23.370 Because of that, zero is less than five. 04:24.010 --> 04:26.650 The condition is true and it points in console. 04:26.650 --> 04:35.860 First item from a right, John, before the first iteration is and it is updated to one using increment 04:35.860 --> 04:37.090 plus plus operator. 04:37.750 --> 04:44.290 So update of variable i.e. from zero to one happens exactly after the executing of the code block inside 04:44.290 --> 04:44.990 Calabrese. 04:46.390 --> 04:52.420 In this case, JavaScript engine prints the value, John, which has the index number zero after that 04:52.420 --> 04:54.070 starts second iteration. 04:54.550 --> 04:57.760 And as we said, AI is already updated to one. 04:58.480 --> 05:00.010 One is less than five. 05:00.430 --> 05:05.980 The condition is are going through and JavaScript engine prints, the item of array which has the index 05:05.980 --> 05:08.820 number one, and it's Nick. 05:10.000 --> 05:13.780 Then again, it goes back to AI plus plus updates. 05:13.780 --> 05:20.980 I add in credibility to this third iteration and in the same way the third item, Bob, is printed. 05:22.140 --> 05:29.340 So loop is continued while the condition becomes false, so when it becomes five, the condition is 05:29.340 --> 05:36.240 false and the loop stops execution, you may wonder why JavaScript engine doesn't go back to first expression 05:36.240 --> 05:39.690 where variable equal to zero after each iteration. 05:40.080 --> 05:47.640 If it acts like this, then after each iteration I would be zero again and we would get infinitely the 05:47.640 --> 05:51.270 first item of rate, John, and that would crash the browser. 05:53.400 --> 05:59.280 So that's why the engine executes this expression allowance at the beginning of the loop, and also 05:59.280 --> 06:01.740 that's the reason why it's called initialization. 06:03.090 --> 06:09.060 All right, imagine that we don't know how many items the array has and also we want to output all of 06:09.060 --> 06:09.330 them. 06:09.780 --> 06:10.900 So what can we do? 06:11.460 --> 06:18.270 The solution is to use the property of array, which I hope you remember from the previous videos, 06:18.420 --> 06:24.870 and it's called length, which you see here we have five items and therefore length of the array is 06:24.870 --> 06:25.270 five. 06:26.310 --> 06:28.710 So we can use eight instead of five. 06:31.390 --> 06:35.270 Revolt and you see that we have the same output. 06:35.980 --> 06:41.350 It's better to use land property because it will work, whether you know or not, how many items the 06:41.350 --> 06:42.040 area has. 06:43.270 --> 06:43.780 All right. 06:44.320 --> 06:46.510 Let's make our example a bit complex. 06:46.510 --> 06:52.240 And also, I would like to show you some features of the statements that we can use with loops, gets 06:52.240 --> 06:55.120 rid of this line and use if statement. 06:56.080 --> 07:01.300 Suppose that Bob is my brother and I want to find it in the right names using loop and then output it 07:01.900 --> 07:02.280 right. 07:02.290 --> 07:11.300 If statements inside the loop and insert the following condition array I triple equals to Bob. 07:13.270 --> 07:19.420 So this condition will be true when loop, which is the third iteration and when the condition is true, 07:19.420 --> 07:21.040 let's print out the following. 07:21.850 --> 07:22.170 Right. 07:22.180 --> 07:23.620 Cancel that log error. 07:23.800 --> 07:27.550 I plus is my brother. 07:30.940 --> 07:36.730 Reload and we have Bob is my brother in order to output other items as well. 07:36.790 --> 07:43.150 We need to right outside if statement cancel that log array I. 07:45.860 --> 07:52.040 So here we have all existing items now, suppose that we want to stop the loop when the condition is 07:52.040 --> 07:55.820 true inside, if statement four, that we can use the brake statement. 07:57.470 --> 08:02.990 So when JavaScript engines is the brake statement, it stops looping and it doesn't matter whether the 08:02.990 --> 08:10.010 condition is true or false, insightfully reload and you see the first two items of the array, then 08:10.010 --> 08:10.700 the output. 08:10.700 --> 08:14.170 Bob is my brother and after it, the for loop is stopped. 08:14.750 --> 08:18.260 Suppose that we want to output all the items in array except Bob. 08:18.860 --> 08:22.200 For that we can use another statement which is called Continue. 08:22.910 --> 08:23.810 So that's right. 08:23.990 --> 08:26.720 Continue reload. 08:27.500 --> 08:29.930 And we have all the items except Bob. 08:31.640 --> 08:32.120 All right. 08:32.630 --> 08:34.520 Let's see what continue exactly. 08:34.520 --> 08:42.380 Does the continuous statement breaks one iteration in the loop if a specified condition occurs and continues 08:42.380 --> 08:43.880 with the next iteration in the loop. 08:44.690 --> 08:50.930 So in this case, when the condition inside, if statement is true, then it executes this line of code, 08:51.860 --> 08:54.320 then JavaScript engine is going to output, Bob. 08:54.650 --> 09:01.550 But it says the continuous statement, therefore it breaks the current iteration and moves directly 09:01.550 --> 09:02.690 to the next iteration. 09:03.410 --> 09:06.020 And Prince Michael and then Merry. 09:08.340 --> 09:15.000 So this line of code is executed because it's written before continuous statement, if we please continue 09:15.000 --> 09:18.480 before that line, then it won't be executed. 09:19.590 --> 09:22.530 And you see that Bob is my brother no longer appears. 09:24.110 --> 09:28.950 All right, in this lecture, we have learned what up is and how it works. 09:30.110 --> 09:31.580 Let's move on to the next video.