WEBVTT 00:06.430 --> 00:10.340 In this video you're going to learn symbol dot iterator. 00:10.480 --> 00:15.170 So let's start with a simple example to understand what this means. 00:15.190 --> 00:20.800 So I'm going to create an array basket. 00:21.380 --> 00:22.850 I'm going to place a few items 00:25.720 --> 00:26.830 in this array 00:29.610 --> 00:42.290 so you know that you can loop over the array using a form of loop like this. 00:43.440 --> 00:46.210 So this log of the values. 00:46.700 --> 00:50.510 So this is a simple for of loop. 00:50.550 --> 00:57.970 Now there is one way of looping over the array using what we call a symbol. 00:58.050 --> 00:59.250 Those iterator. 00:59.730 --> 01:02.010 So first let's understand what this is. 01:02.010 --> 01:03.060 So if you log it's 01:08.770 --> 01:11.610 you get a symbol and the description is symbol. 01:11.720 --> 01:19.230 Those iterator it's type is obviously a symbol. 01:19.380 --> 01:22.210 Now let's log the array itself 01:25.580 --> 01:34.150 and have a quick look inside so you can see the elements of the array and you can see here the array 01:35.440 --> 01:37.960 prototype all the methods inside. 01:38.170 --> 01:40.810 So all these are array methods. 01:41.050 --> 01:52.420 And right at the end you'll find these symbol does iterator the So it's one of the methods that you 01:52.420 --> 01:54.250 can use with the array 01:56.960 --> 01:57.500 and 02:00.620 --> 02:05.660 you can use it like this. 02:05.820 --> 02:08.020 So symbol or bus kids 02:11.130 --> 02:18.790 then between brackets you use symbol those iterator. 02:19.380 --> 02:23.110 So we're not using the dot notation. 02:23.160 --> 02:27.010 So using the brackets notation here. 02:27.280 --> 02:31.650 So this is that function. 02:31.750 --> 02:33.250 No. 02:33.550 --> 02:34.400 Let's see what we get. 02:34.420 --> 02:38.490 If you look at so it's a function. 02:38.560 --> 02:49.760 Now if you call it you get an array an array iterator and if you remember we created error iterations 02:49.850 --> 02:53.480 before using the entries method. 02:53.480 --> 02:53.840 Remember 03:00.130 --> 03:05.670 So what's the difference between entries and symbol votes iterator. 03:06.700 --> 03:07.870 So let's create 03:12.250 --> 03:19.980 an iterator it's using this one 03:23.380 --> 03:28.470 and let's log the outputs of the next method and see what we get 03:31.330 --> 03:37.750 so we getting a value done object so the value is Apple and then is false. 03:37.750 --> 03:38.480 So if you carry on 03:42.540 --> 03:48.280 and the fourth one will give us then is true. 03:49.010 --> 03:57.840 So symbol those bits for iterator can help us get an iterator out of an array just like we did with 03:57.840 --> 03:58.760 entries. 03:58.920 --> 04:02.940 Now with entries it was slightly different. 04:02.940 --> 04:12.020 So we had to use baskets dot entries and the outputs of the next method was different. 04:12.030 --> 04:21.860 So the value was in array but you could use instead of entries you could use the keys and then we returned 04:21.910 --> 04:24.370 the keys in the value. 04:24.430 --> 04:30.930 You can also use values and you would get only the values. 04:30.970 --> 04:35.200 So basically this is similar to that. 04:35.230 --> 04:41.730 So if you use the values method it will give you an iterator just like you get the same eraser with 04:41.740 --> 04:44.020 symbol those iterator. 04:44.020 --> 04:45.430 So you're getting the same results. 04:46.910 --> 04:48.460 OK. 04:48.820 --> 05:03.320 So now if you want to perform a for of loop or loop over the array using this iterator you can. 05:03.530 --> 05:09.950 So here is a quick challenge for you so instead of using a for off loop and printing the values inside 05:09.950 --> 05:20.960 the array baskets let's write some code using the symbol those iterator and perform the same loop and 05:20.960 --> 05:23.620 log the values in the console. 05:23.850 --> 05:26.630 So I suggest you post the video here and come back once you're done. 05:27.930 --> 05:30.330 All right so hopefully you manage to find the solution. 05:30.410 --> 05:41.220 So the idea here is to use a while loop the loop the loop is going to continue as far as you get in 05:41.310 --> 05:49.740 each of these iterations done still equal to False. 05:49.740 --> 05:52.960 So once done is true then you break the loop. 05:53.460 --> 05:57.210 So literally it's our while loop. 05:57.210 --> 06:03.480 So the condition here is going to be done is false. 06:03.480 --> 06:15.470 So to access done will lead to call the next method of the iterator so this creates a variable iteration 06:16.030 --> 06:28.620 and says it to it dot next and we are checking iteration dot done we check in the opposite over that's 06:29.160 --> 06:33.030 because we want to make sure that the loop carries on. 06:33.120 --> 06:34.920 If that's false. 06:34.920 --> 06:46.200 So every time we are going to write the volume which is iteration volume and then sets iteration again 06:47.190 --> 06:50.190 to the outputs of the next method. 06:50.550 --> 06:51.680 So let's try this. 06:53.520 --> 06:55.050 So nothing is happening. 06:55.050 --> 06:59.790 And the reason why is because we have already called next multiple multiple times there. 07:00.090 --> 07:02.700 And there are no elements left in the iterator. 07:02.700 --> 07:04.620 So we need to comment those lines of code. 07:05.220 --> 07:08.460 So now if you try again it would work. 07:08.460 --> 07:13.610 So you get the same results as if you used the for off loop. 07:13.680 --> 07:13.950 All right. 07:13.950 --> 07:19.500 Now let's see how you can use symbol those iterator with objects. 07:19.920 --> 07:28.640 So the symbol those iterator symbol specifies the default iterator for an object. 07:28.800 --> 07:36.890 So let's create an object and then create a custom iterator for those objects 07:40.340 --> 07:50.050 so it call it s obj and let's have a method inside the object so it is gonna be our custom iterator. 07:50.530 --> 08:01.010 So we gonna use the symbol symbol those iterator we're going to set it to a function which returns an 08:01.010 --> 08:02.030 iterator. 08:02.330 --> 08:06.360 So as you'd expect we're gonna use a generator function. 08:06.500 --> 08:08.300 So the keyword is function start. 08:08.890 --> 08:10.510 All right. 08:11.210 --> 08:21.830 Let's say that this function will just yield one and then two and then three let's make things easy 08:21.850 --> 08:23.250 we're gonna use a loop. 08:23.270 --> 08:29.010 So for let's I. 08:29.030 --> 08:30.170 Equal to 1. 08:31.660 --> 08:32.400 I. 08:32.420 --> 08:33.290 Less than three 08:38.230 --> 08:40.780 and increment i. 08:40.850 --> 08:44.590 Every time we're just yielding. 08:44.870 --> 08:46.610 Right. 08:48.920 --> 08:54.480 So if you remember if you yield something that means that you pause the code right there. 08:54.710 --> 09:04.720 So this value is going to show in the objects that you outputs when you call the next method. 09:04.730 --> 09:05.500 All right. 09:05.570 --> 09:14.800 So now let's create an iterator and use our default 09:22.360 --> 09:24.400 custom iterator symbol. 09:24.400 --> 09:27.500 Those iterator like this. 09:27.820 --> 09:39.900 We're gonna need to call the function and then let's call next multiple times and see what we get. 09:40.730 --> 09:40.950 Right. 09:40.950 --> 09:46.330 So you've got an issue somewhere like 36 mm hmm. 09:46.460 --> 09:47.540 All right. 09:47.810 --> 09:54.570 Here we go so the first value is 1 then the second one is 2. 09:54.900 --> 10:01.000 And then we stop right there and we get done set to true or equal to 2. 10:01.140 --> 10:03.520 So this is another use of the symbol. 10:03.540 --> 10:05.670 Those iterator symbol. 10:05.740 --> 10:08.580 Now there is a simpler syntax for this. 10:08.670 --> 10:15.510 So if you want to use the E6 syntax you can just place a star just before symbol knows what iterator 10:15.800 --> 10:17.430 and just remove all this. 10:17.680 --> 10:20.350 And this was too quick. 10:20.350 --> 10:23.370 Okay now let's try something really interesting. 10:23.580 --> 10:29.070 So we're going to use a for of loop and loop over the object. 10:29.100 --> 10:29.660 All right. 10:29.730 --> 10:36.210 So for const x of objects log X. 10:36.470 --> 10:45.130 So let's find out what we're going to get and he gets one and two also if you try 10:50.660 --> 11:00.470 the objects here and use these pred operator inside an array like this then you get an array with one 11:00.470 --> 11:02.480 and two inside. 11:02.480 --> 11:11.870 So this is what we mean when we say that we are defining a custom iterator of our object. 11:11.920 --> 11:12.280 All right. 11:12.550 --> 11:19.690 So now once you define this custom iterator you can treat the objects as an eatable 11:27.970 --> 11:28.590 right. 11:28.720 --> 11:39.080 And you can use either a for of loop or use these press operator like you would use with any other interval 11:39.110 --> 11:40.730 values like arrays.