1 00:00:00,870 --> 00:00:07,300 Welcome back I want to talk to you a bit about javascript looping. 2 00:00:07,430 --> 00:00:13,760 You see I actually left out a few other ways that we can loop in javascript. 3 00:00:13,790 --> 00:00:23,270 We've talked about our four loops are while loops are due while loops and we also talked about for each. 4 00:00:23,510 --> 00:00:31,040 But there's actually two other ways that we can loop in javascript and I'm going to show you how to 5 00:00:31,040 --> 00:00:33,720 do that in this video. 6 00:00:33,730 --> 00:00:43,940 Now let's imagine we have a basket and this basket is an array that well has our grocery list. 7 00:00:44,030 --> 00:00:45,880 Let's say we want to buy apples. 8 00:00:46,010 --> 00:00:52,280 We want to buy oranges and we also want to buy grapes because grapes are nature's candy. 9 00:00:52,280 --> 00:00:53,220 They're delicious. 10 00:00:54,220 --> 00:00:59,590 Now in order for us to loop through this basket we know how to do this right. 11 00:00:59,590 --> 00:01:07,330 We've learned about the four loops where we can just do a lot i equals zero. 12 00:01:07,400 --> 00:01:16,220 Long as I is less than the basket length we anchormen die one by one. 13 00:01:18,520 --> 00:01:26,530 And less just the console log basket to index of. 14 00:01:26,560 --> 00:01:29,550 So that's the first type of loop that we saw. 15 00:01:29,950 --> 00:01:31,540 If you run this in the browser 16 00:01:34,160 --> 00:01:38,850 and hit Enter we see that we get apples oranges and grapes. 17 00:01:38,930 --> 00:01:43,040 All right so that's the first way we already know how to do that. 18 00:01:43,080 --> 00:01:54,110 We could also use the For Each loop that came new and S-5 and there we can just say item will use air 19 00:01:54,130 --> 00:01:56,140 functions which we've learned about. 20 00:01:56,440 --> 00:01:59,530 And in this era function I'll just canceled our blog 21 00:02:03,000 --> 00:02:06,020 and that looks a lot cleaner than it was before. 22 00:02:06,030 --> 00:02:08,280 If I run this function now 23 00:02:11,710 --> 00:02:12,830 I get the same thing. 24 00:02:13,060 --> 00:02:18,970 We're looping over items and I'm not going to show you how to do the while loop and the do while loop 25 00:02:18,970 --> 00:02:25,460 because we've talked about it but there's two other ways that we can loop through things and Javascript. 26 00:02:25,690 --> 00:02:35,000 The first one is called the four of loop and the other one is for in loop. 27 00:02:35,070 --> 00:02:39,210 I know the naming is a little bit confusing but stick with me here. 28 00:02:39,300 --> 00:02:45,480 The first one the for loop works in a way that's very similar to these two. 29 00:02:45,600 --> 00:02:52,780 It's almost as if we're combining these two together and this is a new specification with ESX So this 30 00:02:52,780 --> 00:03:03,380 is a new feature of Javascript the way it works is we start with a for loop and we say item of Baskett 31 00:03:04,660 --> 00:03:07,750 you see that it the syntax cut nicely for me. 32 00:03:07,870 --> 00:03:16,460 It's all blue and in here we simply say cancel the log item. 33 00:03:16,550 --> 00:03:17,620 Not too bad right. 34 00:03:18,770 --> 00:03:22,210 We're using the for keyword here but we're saying of. 35 00:03:22,400 --> 00:03:26,370 And we're just creating a variable we can name this whatever we want. 36 00:03:26,460 --> 00:03:28,660 Of Baskett which is our array. 37 00:03:28,880 --> 00:03:37,970 And that's going to loop through it so that if I copy and paste this here and hit enter I get the exact 38 00:03:38,270 --> 00:03:40,360 same thing. 39 00:03:40,590 --> 00:03:45,630 And as we know in programming there's many way of doing things and these are just some of the ways that 40 00:03:45,630 --> 00:03:47,790 we can loop through this array. 41 00:03:48,780 --> 00:03:51,420 But I want to mention a key term here. 42 00:03:52,370 --> 00:04:00,400 What we're doing here is something called iterating over this array and this wording. 43 00:04:00,410 --> 00:04:02,030 Let's make this a little bit bigger. 44 00:04:04,050 --> 00:04:08,090 This wording is really confusing at first when you first hear it. 45 00:04:08,820 --> 00:04:18,690 But reading simply means we're able to go one by one through an item like let's say a basket which has 46 00:04:18,690 --> 00:04:27,020 an array go one by one and look at these items and iterating is able to be done in javascript on what 47 00:04:27,030 --> 00:04:28,940 we call iterable. 48 00:04:29,250 --> 00:04:38,040 And these variables is something that javascript provides us that says hey you can iterate over this 49 00:04:38,040 --> 00:04:40,600 thing and what is this thing. 50 00:04:40,800 --> 00:04:46,300 Well in Javascript you can iterate over arrays and we've already seen that. 51 00:04:46,470 --> 00:04:49,610 And also strength's instead of Baskett. 52 00:04:49,620 --> 00:04:54,000 If I just turn this into a string and I run the for loop here 53 00:04:57,210 --> 00:05:01,560 I see that I'm iterating over the string one by one. 54 00:05:01,560 --> 00:05:13,050 So both arrays and strings are iterable in javascript because we're able to iterate over individual 55 00:05:13,140 --> 00:05:24,120 items and for all of allows us to iterate over these intervals I know the wording is really really confusing. 56 00:05:24,130 --> 00:05:29,200 But in a lot of tutorials books and even work place you're going to hear this word and you want to know 57 00:05:29,200 --> 00:05:30,890 what it means. 58 00:05:30,970 --> 00:05:39,700 But let's talk about the next thing the for loop the foreign loop looks something like this. 59 00:05:39,770 --> 00:05:42,850 And actually let's bring this back to the way it was. 60 00:05:43,010 --> 00:05:45,680 So not strength's it's theory. 61 00:05:46,700 --> 00:05:52,430 And I'm going to comment out or delete the looping that we are already familiar with. 62 00:05:52,650 --> 00:05:55,650 Just so we have better spacing here. 63 00:05:56,390 --> 00:06:02,270 Now the for in loop works with objects. 64 00:06:02,450 --> 00:06:12,490 So let's create an object here and we'll call this object detailed basket in this detailed basket will 65 00:06:12,500 --> 00:06:15,310 be an object that contains apples. 66 00:06:15,440 --> 00:06:21,680 And actually the quantity of apples that we want we want five apples and we will have oranges as well 67 00:06:22,190 --> 00:06:25,210 and we can just maybe say have 10 oranges. 68 00:06:25,370 --> 00:06:26,760 Lots of vitamin C. 69 00:06:26,960 --> 00:06:29,180 And then finally grapes and they're delicious. 70 00:06:29,180 --> 00:06:31,760 So a thousand grapes for everybody. 71 00:06:32,960 --> 00:06:43,040 Now with this detailed Vaska now I can use a for loop and I can say for item in instead of of this type 72 00:06:44,270 --> 00:06:49,620 detailed basket and I can Konsole dialogue here. 73 00:06:49,830 --> 00:06:50,220 The 74 00:06:53,510 --> 00:06:58,470 so that if I clear this let's copy detailed basket. 75 00:06:58,580 --> 00:07:00,260 So that's our object. 76 00:07:00,560 --> 00:07:04,580 And we run the for loop here. 77 00:07:04,580 --> 00:07:07,770 Notice what happens. 78 00:07:08,020 --> 00:07:21,290 I get apples oranges grapes the for in loop allows us to loop over and see the object properties. 79 00:07:23,120 --> 00:07:29,320 So that I can check what I need to go grocery shopping for apples oranges and grapes. 80 00:07:29,330 --> 00:07:35,420 Now here's the tricky part and you'll hear this ward mentioned a lot when you talk to your programming 81 00:07:35,420 --> 00:07:35,950 friends. 82 00:07:36,260 --> 00:07:43,970 And he can get really really confusing what we're doing here is not iterating because iterating is something 83 00:07:43,970 --> 00:07:49,980 that we can do with arrays and strings with an object in javascript. 84 00:07:50,060 --> 00:07:59,390 We're doing something called enumerating all baseball VERRET because properties of an object are what 85 00:07:59,390 --> 00:08:09,220 we call in numerable and an object in javascript is enumerable if it allows us to see the properties. 86 00:08:09,230 --> 00:08:12,480 So apples oranges and grapes are innumerable. 87 00:08:12,530 --> 00:08:17,910 That is we can use it in a for loop to check them out. 88 00:08:18,020 --> 00:08:20,870 So enumerating is for objects 89 00:08:24,640 --> 00:08:33,799 and numerable and iterable what happens if I switch these around what if I have basket in here. 90 00:08:33,940 --> 00:08:37,750 And the detailed basket in here. 91 00:08:37,840 --> 00:08:42,179 So we're using a for loop with an object. 92 00:08:42,190 --> 00:08:43,860 What do you think will happen. 93 00:08:44,100 --> 00:08:44,870 It. 94 00:08:45,130 --> 00:08:49,890 I'm going to copy and paste this into our console. 95 00:08:49,890 --> 00:08:56,910 Hit Ron and I get an error detailed basket is not iterable. 96 00:08:56,910 --> 00:08:57,980 And why is that. 97 00:08:58,230 --> 00:08:59,550 Well we know that right. 98 00:08:59,580 --> 00:09:06,930 I said that in javascript we have a raise in strings that are iterable and objects in most of the cases 99 00:09:07,590 --> 00:09:10,230 are not iterable. 100 00:09:10,230 --> 00:09:17,790 You see four of loob doesn't work with objects because simply the javascript language needs to provide 101 00:09:18,210 --> 00:09:26,750 this property that is called iterable when this property is only given by arrays and strings and because 102 00:09:26,750 --> 00:09:31,170 four of loops only works with iterable. 103 00:09:32,260 --> 00:09:34,920 It's going to give us this. 104 00:09:35,090 --> 00:09:36,150 But what about here. 105 00:09:36,350 --> 00:09:40,060 What if I do a for in loop on the basket. 106 00:09:40,100 --> 00:09:41,120 Which is the array. 107 00:09:41,330 --> 00:09:49,450 If I copy and paste this and run this code look at that it's working. 108 00:09:49,630 --> 00:10:00,040 I get 0 1 2 and that is because underneath the hood you can think of javascript arrays like objects. 109 00:10:00,040 --> 00:10:00,500 Right. 110 00:10:00,550 --> 00:10:04,530 Because an array has an index of 0 1 and 2. 111 00:10:04,660 --> 00:10:18,090 So we can't think of Baskett as an object that has properties zero equal to apples. 112 00:10:18,280 --> 00:10:25,660 We have oranges that has index of 2 or index of one and then index of two. 113 00:10:25,680 --> 00:10:28,180 We have crêpes. 114 00:10:28,260 --> 00:10:38,820 So the for loop is and Neumar rating over the properties is 0 1 and 2 which lists it out for us. 115 00:10:39,640 --> 00:10:41,180 Let's make this a little smaller. 116 00:10:42,550 --> 00:10:48,400 But I wanted to make this video for you because a lot of people get confused between these two. 117 00:10:48,910 --> 00:10:57,590 And although you can go a long time without ever using for end loops we can use something like object 118 00:10:57,590 --> 00:10:59,860 docked keys that we've seen before. 119 00:11:00,930 --> 00:11:12,160 Or valleys or entries or we can use for each loops or for loops instead of four of it's good to know 120 00:11:12,160 --> 00:11:17,800 these differences because if you see them in a codebase you want to understand what's happening. 121 00:11:18,600 --> 00:11:25,130 And also if you ever hear somebody saying iterable or numerable you kind of have an idea of the difference. 122 00:11:25,130 --> 00:11:35,150 Now to review a for in loop loops over innumerable properties and numerable property names of an object 123 00:11:36,310 --> 00:11:43,210 the for loop doesn't work with objects because they are not iterable. 124 00:11:43,270 --> 00:11:52,210 Now there are small caveats and exceptions to these rules but 99 percent of the time you should consider 125 00:11:52,210 --> 00:11:52,920 this. 126 00:11:53,020 --> 00:12:00,800 You're using the for loop for objects and for loop for arrays and strings. 127 00:12:00,810 --> 00:12:02,270 I'll see you in the next one. 128 00:12:02,620 --> 00:12:02,830 Bob.