1 00:00:00,000 --> 00:00:15,585 [MUSIC PLAYING] 2 00:00:15,585 --> 00:00:16,460 SPEAKER 1: All right. 3 00:00:16,460 --> 00:00:16,959 Hello. 4 00:00:16,959 --> 00:00:18,530 Welcome back for Lecture One. 5 00:00:18,530 --> 00:00:21,029 And this week, we're going to be diving into more JavaScript 6 00:00:21,029 --> 00:00:23,150 and talking about ES6. 7 00:00:23,150 --> 00:00:26,480 So previous lecture, we talked about a few different topics, types being one. 8 00:00:26,480 --> 00:00:30,540 Who can name some types that we talked about last week? 9 00:00:30,540 --> 00:00:31,040 Anyone? 10 00:00:31,040 --> 00:00:31,748 AUDIENCE: String. 11 00:00:31,748 --> 00:00:33,439 SPEAKER 1: A string. 12 00:00:33,439 --> 00:00:34,230 AUDIENCE: A number. 13 00:00:34,230 --> 00:00:36,116 SPEAKER 1: A number. 14 00:00:36,116 --> 00:00:36,875 AUDIENCE: Null. 15 00:00:36,875 --> 00:00:39,712 SPEAKER 1: Null. 16 00:00:39,712 --> 00:00:40,545 AUDIENCE: Undefined. 17 00:00:40,545 --> 00:00:43,225 SPEAKER 1: Undefined. 18 00:00:43,225 --> 00:00:44,030 AUDIENCE: Object. 19 00:00:44,030 --> 00:00:44,780 SPEAKER 1: Object. 20 00:00:44,780 --> 00:00:45,996 And--- 21 00:00:45,996 --> 00:00:46,932 AUDIENCE: A symbol. 22 00:00:46,932 --> 00:00:47,765 SPEAKER 1: A symbol. 23 00:00:47,765 --> 00:00:51,230 And-- true or false. 24 00:00:51,230 --> 00:00:51,810 A boolean. 25 00:00:51,810 --> 00:00:52,460 Yeah. 26 00:00:52,460 --> 00:00:55,490 We talked about coercion, which was the process by which we 27 00:00:55,490 --> 00:00:57,500 change one type to other. 28 00:00:57,500 --> 00:01:00,920 Objects, of course, the non primitive type. 29 00:01:00,920 --> 00:01:02,100 Prototypal inheritance. 30 00:01:02,100 --> 00:01:06,680 Who can remember what prototype inheritance was? 31 00:01:06,680 --> 00:01:10,895 This was one of the complex topics from last week. 32 00:01:10,895 --> 00:01:11,395 Yeah. 33 00:01:11,395 --> 00:01:21,255 AUDIENCE: [INAUDIBLE] 34 00:01:21,255 --> 00:01:22,650 SPEAKER 1; Yeah, exactly. 35 00:01:22,650 --> 00:01:28,340 It's the process by which a more complex object can have methods and properties. 36 00:01:28,340 --> 00:01:33,080 We talked about scope which is basically how long a variable lives. 37 00:01:33,080 --> 00:01:35,900 How JavaScript gets executed. 38 00:01:35,900 --> 00:01:39,635 The global object, and I left you on a cliffhanger about closures. 39 00:01:39,635 --> 00:01:41,510 But before we dive into closures, I just want 40 00:01:41,510 --> 00:01:43,468 to give a little bit of more background on what 41 00:01:43,468 --> 00:01:49,012 these ES5, ES6, 2016, 2017, ESNext, what are those? 42 00:01:49,012 --> 00:01:51,470 So we talked a little bit last week on what ECMAScript was. 43 00:01:51,470 --> 00:01:55,090 ECMAScript is basically the spec for this language. 44 00:01:55,090 --> 00:01:58,640 It defines exactly what this language should do 45 00:01:58,640 --> 00:02:02,390 and how much of these functions behave. 46 00:02:02,390 --> 00:02:08,120 And JavaScript is actually an implementation of ECMAScript spec. 47 00:02:08,120 --> 00:02:10,759 And so which of these versions do environments support? 48 00:02:10,759 --> 00:02:14,225 Because every year, roughly, a new version comes out. 49 00:02:14,225 --> 00:02:16,100 So this is a little bit of a tricky question. 50 00:02:16,100 --> 00:02:19,700 It's kind of the bane of all JavaScript programmer's existence. 51 00:02:19,700 --> 00:02:22,909 Because we really don't know exactly what environment 52 00:02:22,909 --> 00:02:24,200 our code is going to be run in. 53 00:02:24,200 --> 00:02:27,860 And therefore, we don't really know exactly what is supported. 54 00:02:27,860 --> 00:02:30,710 And so, generally, what we do is the convention 55 00:02:30,710 --> 00:02:35,360 is to assume that the environment supports all of ES5. 56 00:02:35,360 --> 00:02:40,790 And so what are we supposed to do about these future language things 57 00:02:40,790 --> 00:02:42,740 that we can use? 58 00:02:42,740 --> 00:02:45,890 A big thing in JavaScript right now is what's called a transpiler. 59 00:02:45,890 --> 00:02:52,040 A transpiler is basically some code that goes from newer language features 60 00:02:52,040 --> 00:02:56,720 and actually makes it backwards compatible with the ES5 spec. 61 00:02:56,720 --> 00:03:00,710 So, basically, it takes all of your new language, any functions you 62 00:03:00,710 --> 00:03:04,360 are using that is defined by ES6, ES2016 and beyond, 63 00:03:04,360 --> 00:03:08,900 and actually turns them into code that's basically ES5 code. 64 00:03:08,900 --> 00:03:11,570 So some of these, the most popular one is probably Babble. 65 00:03:11,570 --> 00:03:16,290 But other ones you may have heard of are TypeScript, or CopyScript, etc. 66 00:03:16,290 --> 00:03:19,400 So which syntax should we use? 67 00:03:19,400 --> 00:03:22,490 Generally, what people do is they use the future syntax 68 00:03:22,490 --> 00:03:26,090 because either the language and the environments will catch up, 69 00:03:26,090 --> 00:03:29,570 or we just transpile things back to ES5. 70 00:03:29,570 --> 00:03:31,890 Does that makes sense to everybody? 71 00:03:31,890 --> 00:03:36,320 So in course, we will be using a lot of ES6 and beyond features. 72 00:03:36,320 --> 00:03:36,950 Cool. 73 00:03:36,950 --> 00:03:40,627 So going back to last week, we talked a bit about closures. 74 00:03:40,627 --> 00:03:43,460 At least I showed you exactly what the problem behind closures were. 75 00:03:43,460 --> 00:03:48,290 But to explain exactly what they are it's functions basically 76 00:03:48,290 --> 00:03:51,800 have access to variables that are around when functions are defined. 77 00:03:51,800 --> 00:03:56,630 And these functions actually retain the ability 78 00:03:56,630 --> 00:03:59,390 to use variables declared by a parent function 79 00:03:59,390 --> 00:04:04,785 even after that parent function has returned and possibly disappeared. 80 00:04:04,785 --> 00:04:06,910 And this is possible because of JavaScript scoping. 81 00:04:06,910 --> 00:04:09,890 And so let's see an example of how this works in action. 82 00:04:09,890 --> 00:04:16,649 83 00:04:16,649 --> 00:04:20,279 So last week I talked about a possible bug with using closures. 84 00:04:20,279 --> 00:04:22,220 And let me just type that out really quick. 85 00:04:22,220 --> 00:04:23,095 So we had a function. 86 00:04:23,095 --> 00:04:27,040 87 00:04:27,040 --> 00:04:31,964 And basically what it does is it creates a new array 88 00:04:31,964 --> 00:04:33,880 and pushes a bunch of functions to that array. 89 00:04:33,880 --> 00:04:34,620 And so let's do-- 90 00:04:34,620 --> 00:05:04,359 91 00:05:04,359 --> 00:05:06,650 So does everybody following along what's going on here? 92 00:05:06,650 --> 00:05:09,670 So, basically, I'm creating a new empty array. 93 00:05:09,670 --> 00:05:12,940 I'm iterating through the numbers 0 through 5 and pushing on to a function 94 00:05:12,940 --> 00:05:17,160 to that array, which will cancel that log i. 95 00:05:17,160 --> 00:05:20,050 And then I'm going ahead and invoking that and storing the return 96 00:05:20,050 --> 00:05:21,610 as function array. 97 00:05:21,610 --> 00:05:34,600 And I'm going in and invoking the first one. 98 00:05:34,600 --> 00:05:40,290 And as we saw last week, even though we expected this to console.log0, 99 00:05:40,290 --> 00:05:41,730 it actually console logs 5. 100 00:05:41,730 --> 00:05:43,938 And so this week, we're going to go ahead and explain 101 00:05:43,938 --> 00:05:45,170 exactly why that happens. 102 00:05:45,170 --> 00:05:48,690 So before we do that, let's actually explore closures a little more deeply. 103 00:05:48,690 --> 00:05:54,839 104 00:05:54,839 --> 00:05:56,380 And so what did we say a closure was? 105 00:05:56,380 --> 00:06:02,920 A closure is basically a function that has access to some variables that 106 00:06:02,920 --> 00:06:04,900 might have already left scope. 107 00:06:04,900 --> 00:06:07,337 So, basically, let's create a function-- 108 00:06:07,337 --> 00:06:48,920 109 00:06:48,920 --> 00:06:49,420 OK. 110 00:06:49,420 --> 00:06:51,520 So what I just did here is I wrote a function that 111 00:06:51,520 --> 00:06:53,950 declares a variable called message. 112 00:06:53,950 --> 00:06:56,410 This message is just set to the string called hello. 113 00:06:56,410 --> 00:07:00,580 And then we create a new function that console logs a variable called message. 114 00:07:00,580 --> 00:07:02,350 And then return that function. 115 00:07:02,350 --> 00:07:04,670 And so at line 11, we invoke that. 116 00:07:04,670 --> 00:07:08,020 And so at line 12, what is the value of message here? 117 00:07:08,020 --> 00:07:15,790 118 00:07:15,790 --> 00:07:17,325 Can anybody tell me? 119 00:07:17,325 --> 00:07:18,200 AUDIENCE: [INAUDIBLE] 120 00:07:18,200 --> 00:07:20,116 SPEAKER 1: Yeah. it's going to actually error. 121 00:07:20,116 --> 00:07:22,490 Because there's no such thing called message. 122 00:07:22,490 --> 00:07:26,341 Yet so let's just confirm that. 123 00:07:26,341 --> 00:07:28,340 We have an error because message is not defined. 124 00:07:28,340 --> 00:07:30,970 125 00:07:30,970 --> 00:07:35,210 But now let's comment the out and run the code. 126 00:07:35,210 --> 00:07:37,850 127 00:07:37,850 --> 00:07:42,630 And what we see is that say hello will actually console.log that message. 128 00:07:42,630 --> 00:07:47,350 And so let's dive a little bit more deeply into this. 129 00:07:47,350 --> 00:08:07,830 130 00:08:07,830 --> 00:08:11,410 So we see that type of message at that point is undefined. 131 00:08:11,410 --> 00:08:14,910 And if we console.log say hello is is console logging 132 00:08:14,910 --> 00:08:16,440 a variable called message. 133 00:08:16,440 --> 00:08:19,190 And when we invoke that it prints hello. 134 00:08:19,190 --> 00:08:20,940 And so that there is a closure. 135 00:08:20,940 --> 00:08:28,950 Because we can see that the variable called message when say hello 136 00:08:28,950 --> 00:08:31,680 is invoked does not actually exist. 137 00:08:31,680 --> 00:08:35,730 Yet say hello still has access to this message up here. 138 00:08:35,730 --> 00:08:41,270 Because it was within scope when that function was created. 139 00:08:41,270 --> 00:08:44,130 And so that is what a closure is. 140 00:08:44,130 --> 00:08:46,751 Does that make sense to everybody? 141 00:08:46,751 --> 00:08:47,250 Yeah. 142 00:08:47,250 --> 00:08:50,930 AUDIENCE: [INAUDIBLE] 143 00:08:50,930 --> 00:08:52,260 SPEAKER 1: No. 144 00:08:52,260 --> 00:08:54,600 So the question was, would it make a difference 145 00:08:54,600 --> 00:08:57,730 if rather than having a const here we had a var or a let, 146 00:08:57,730 --> 00:08:58,980 and, no, it does not. 147 00:08:58,980 --> 00:09:02,720 148 00:09:02,720 --> 00:09:05,115 Any other questions about this closure example? 149 00:09:05,115 --> 00:09:09,136 150 00:09:09,136 --> 00:09:09,636 No. 151 00:09:09,636 --> 00:09:17,520 So and now let's go ahead and explore exactly why this bug exists. 152 00:09:17,520 --> 00:09:22,430 And so here what is the value of i? 153 00:09:22,430 --> 00:09:29,890 154 00:09:29,890 --> 00:09:32,480 Can anybody tell me? 155 00:09:32,480 --> 00:09:33,100 Is it 4? 156 00:09:33,100 --> 00:09:35,650 157 00:09:35,650 --> 00:09:39,085 Right here at line 13. 158 00:09:39,085 --> 00:09:40,027 Yeah. 159 00:09:40,027 --> 00:09:40,970 AUDIENCE: [INAUDIBLE] 160 00:09:40,970 --> 00:09:43,095 SPEAKER 1: Yeah, it's going to be undefined, right? 161 00:09:43,095 --> 00:09:48,050 162 00:09:48,050 --> 00:09:53,410 Just because it's not actually within scope at that point. 163 00:09:53,410 --> 00:09:57,650 But as we talked about in the last example, because of closures, 164 00:09:57,650 --> 00:10:02,380 functions that are declared have access to their variables 165 00:10:02,380 --> 00:10:04,160 at the point of declaration. 166 00:10:04,160 --> 00:10:08,570 And so now right here what is the value of i? 167 00:10:08,570 --> 00:10:15,178 168 00:10:15,178 --> 00:10:16,656 Can anybody tell me? 169 00:10:16,656 --> 00:10:17,280 AUDIENCE: Five. 170 00:10:17,280 --> 00:10:18,946 SPEAKER 1: It's going to be five, right? 171 00:10:18,946 --> 00:10:21,070 Because we iterated through the numbers 0 and 5. 172 00:10:21,070 --> 00:10:25,290 And by the time we got to 5, that was where I was left. 173 00:10:25,290 --> 00:10:28,920 And since it was declared with var, a var's lifecycle 174 00:10:28,920 --> 00:10:30,480 is basically until the function ends. 175 00:10:30,480 --> 00:10:35,550 And so line 8 right there, i has a value of 5. 176 00:10:35,550 --> 00:10:38,700 And so that's what gets wrapped up in the closure at line 5. 177 00:10:38,700 --> 00:10:44,070 And so when we invoke line 15, it now prints out 5. 178 00:10:44,070 --> 00:10:47,547 Does that make sense to everybody? 179 00:10:47,547 --> 00:10:48,630 It's a little bit strange. 180 00:10:48,630 --> 00:10:50,088 It's hard to wrap your head around. 181 00:10:50,088 --> 00:10:52,734 But does that kind of makes sense to why that's happening? 182 00:10:52,734 --> 00:10:55,580 183 00:10:55,580 --> 00:11:00,050 So if we instead of using a var here, because var's lifecycle 184 00:11:00,050 --> 00:11:05,000 is from when it's declared until the end of its function, so line 11. 185 00:11:05,000 --> 00:11:06,905 What happens if we instead use a let? 186 00:11:06,905 --> 00:11:10,000 187 00:11:10,000 --> 00:11:14,650 So what is the scope of a variable declared with the let keyword? 188 00:11:14,650 --> 00:11:18,080 189 00:11:18,080 --> 00:11:20,996 Anybody remember from last lecture? 190 00:11:20,996 --> 00:11:21,980 AUDIENCE: [INAUDIBLE] 191 00:11:21,980 --> 00:11:22,490 SPEAKER 1: Yeah, exactly. 192 00:11:22,490 --> 00:11:24,031 It's until the end of the code block. 193 00:11:24,031 --> 00:11:29,240 And so this variable called i, it ends at line 6. 194 00:11:29,240 --> 00:11:36,470 And so if we tried to console.log i here, we get oh, it does not exist. 195 00:11:36,470 --> 00:11:42,930 196 00:11:42,930 --> 00:11:52,180 And so i for each time this four loop runs, its scope is only from line four 197 00:11:52,180 --> 00:11:54,020 to line six. 198 00:11:54,020 --> 00:11:59,360 Therefore, this one, the closure will actually work as expected. 199 00:11:59,360 --> 00:12:05,350 So when we run this, it prints out a 0 as expected. 200 00:12:05,350 --> 00:12:06,888 Does that make sense to everybody? 201 00:12:06,888 --> 00:12:09,409 202 00:12:09,409 --> 00:12:10,450 It is a little bit weird. 203 00:12:10,450 --> 00:12:13,690 And I'm about to show you an alternate way to create closures. 204 00:12:13,690 --> 00:12:18,430 But does this difference in scoping make sense 205 00:12:18,430 --> 00:12:20,650 to why it would print a five versus a zero? 206 00:12:20,650 --> 00:12:24,585 AUDIENCE: [INAUDIBLE] Sorry, can I ask a question. 207 00:12:24,585 --> 00:12:25,460 SPEAKER 1: Of course. 208 00:12:25,460 --> 00:12:32,752 AUDIENCE: [INAUDIBLE] 209 00:12:32,752 --> 00:12:34,650 SPEAKER 1: So the question was, what happens 210 00:12:34,650 --> 00:12:37,500 if we add another variable called i outside the four loop? 211 00:12:37,500 --> 00:12:42,300 Well, if we had one declared with a let or const key word, 212 00:12:42,300 --> 00:12:46,740 line five would error because we cannot create multiple let or const with 213 00:12:46,740 --> 00:12:48,300 the same names. 214 00:12:48,300 --> 00:12:50,910 If it were a var then it would get shadowed by this one 215 00:12:50,910 --> 00:12:52,657 and basically be overwritten. 216 00:12:52,657 --> 00:12:55,677 217 00:12:55,677 --> 00:12:57,260 Any other questions with this example? 218 00:12:57,260 --> 00:13:02,854 219 00:13:02,854 --> 00:13:09,146 AUDIENCE: [INAUDIBLE] 220 00:13:09,146 --> 00:13:11,120 SPEAKER 1: Ah, the question is what happens 221 00:13:11,120 --> 00:13:17,900 if we create a i variable [? outside. ?] So if we did let i equals sub number. 222 00:13:17,900 --> 00:13:21,010 Basically, the closure would wrap up the most specific variable. 223 00:13:21,010 --> 00:13:26,240 So since this variable is more specifically declared than the i 224 00:13:26,240 --> 00:13:30,240 outside, it would bind with this one. 225 00:13:30,240 --> 00:13:33,320 So if we ran this, it prints a 0. 226 00:13:33,320 --> 00:13:37,060 227 00:13:37,060 --> 00:13:37,890 Cool. 228 00:13:37,890 --> 00:13:40,790 So let's look at another way to create a closure. 229 00:13:40,790 --> 00:13:49,290 230 00:13:49,290 --> 00:13:53,370 So has anybody heard of immediately invoked function expression? 231 00:13:53,370 --> 00:13:54,830 Or the term iife? 232 00:13:54,830 --> 00:13:56,970 I-I-F-E, for short. 233 00:13:56,970 --> 00:14:00,080 So, basically, what an iife is is a function expression that gets 234 00:14:00,080 --> 00:14:02,880 invoked immediately. 235 00:14:02,880 --> 00:14:06,410 And so this also creates a closure. 236 00:14:06,410 --> 00:14:09,020 Has anybody seen this before or heard of it? 237 00:14:09,020 --> 00:14:11,984 AUDIENCE: [INAUDIBLE] 238 00:14:11,984 --> 00:14:15,320 SPEAKER 1: So the question was, is it like a nameless function? 239 00:14:15,320 --> 00:14:16,220 In a way, yes. 240 00:14:16,220 --> 00:14:18,400 It's a nameless function oftentimes. 241 00:14:18,400 --> 00:14:23,840 But it's a nameless function that gets invoked immediately. 242 00:14:23,840 --> 00:14:26,990 I'll show you what that looks like. 243 00:14:26,990 --> 00:14:29,630 And a benefit of using an iife is that it doesn't add or modify 244 00:14:29,630 --> 00:14:30,680 the global object. 245 00:14:30,680 --> 00:14:33,590 So we talked about last week how when you create variables or create 246 00:14:33,590 --> 00:14:38,480 functions, those functions are actually attached to the global object. 247 00:14:38,480 --> 00:14:41,180 But with iifes since they're just statements 248 00:14:41,180 --> 00:14:44,465 that are immediately invoked, they do not add to the global object. 249 00:14:44,465 --> 00:14:46,340 So let's take a look at what those look like. 250 00:14:46,340 --> 00:14:52,250 251 00:14:52,250 --> 00:14:53,630 So say we had something like-- 252 00:14:53,630 --> 00:14:59,790 253 00:14:59,790 --> 00:15:02,090 so we in the previous closure example, we 254 00:15:02,090 --> 00:15:04,620 defined this thing called a hello function, which 255 00:15:04,620 --> 00:15:08,950 was basically a function-- actually let's just copy that directly. 256 00:15:08,950 --> 00:15:16,160 257 00:15:16,160 --> 00:15:20,410 So we defined a make hello function which had a message called hello 258 00:15:20,410 --> 00:15:23,350 which got wrapped in a closure by the say hello function. 259 00:15:23,350 --> 00:15:25,980 And we returned that function. 260 00:15:25,980 --> 00:15:28,900 And so as part of a global object we have 261 00:15:28,900 --> 00:15:30,790 this thing called make hello function. 262 00:15:30,790 --> 00:15:35,830 Which might not be ideal if we are running low on like names of functions 263 00:15:35,830 --> 00:15:36,630 that we can use. 264 00:15:36,630 --> 00:15:40,900 It's a way to basically create the same closure without actually creating 265 00:15:40,900 --> 00:15:46,190 a globally scoped function is an iife. 266 00:15:46,190 --> 00:15:48,530 So let's see what that looks like. 267 00:15:48,530 --> 00:15:55,180 So the goal is to have a say hello function which basically gets created 268 00:15:55,180 --> 00:15:58,090 by this make hello function with a variable called 269 00:15:58,090 --> 00:15:59,830 message that gets wrapped in a closure. 270 00:15:59,830 --> 00:16:02,580 And so another way to do that would be just saying const 271 00:16:02,580 --> 00:16:07,182 say hello is equal to this function. 272 00:16:07,182 --> 00:16:08,890 And we can make it an anonymous function. 273 00:16:08,890 --> 00:16:13,610 274 00:16:13,610 --> 00:16:15,690 That's actually immediately invoke it. 275 00:16:15,690 --> 00:16:20,590 276 00:16:20,590 --> 00:16:22,370 So does everybody see what happened here? 277 00:16:22,370 --> 00:16:25,929 So we went from this where it's make hello function. 278 00:16:25,929 --> 00:16:28,970 Which is declared as a function, which you can use anywhere in your code, 279 00:16:28,970 --> 00:16:31,540 and then at line 11, we go ahead and invoke that function 280 00:16:31,540 --> 00:16:35,080 which returns that function defined at line four 281 00:16:35,080 --> 00:16:41,100 which is a say hello function that wraps that var message in a closure. 282 00:16:41,100 --> 00:16:44,350 But here instead we don't create a function 283 00:16:44,350 --> 00:16:48,370 called make hello function, instead we declare an anonymous function, which 284 00:16:48,370 --> 00:16:52,020 just gets invoked immediately at line 9. 285 00:16:52,020 --> 00:16:57,070 And so we're left with that same exact function which is defined on line four. 286 00:16:57,070 --> 00:17:00,460 Where it's a function that console.log as a message which 287 00:17:00,460 --> 00:17:02,720 is defined by its parent function. 288 00:17:02,720 --> 00:17:05,960 But we don't actually have to create that global function name. 289 00:17:05,960 --> 00:17:08,849 290 00:17:08,849 --> 00:17:11,859 Does that make sense to everybody? 291 00:17:11,859 --> 00:17:17,440 And so if we ran this we see the same exact thing. 292 00:17:17,440 --> 00:17:22,380 293 00:17:22,380 --> 00:17:25,084 So why might an iife be useful? 294 00:17:25,084 --> 00:17:30,200 295 00:17:30,200 --> 00:17:32,810 I'll just delete these. 296 00:17:32,810 --> 00:17:36,750 So say we want to have some class or something called a counter. 297 00:17:36,750 --> 00:17:41,460 And we want to keep track of some number that we can just keep incrementing, 298 00:17:41,460 --> 00:17:42,900 and we can get that number. 299 00:17:42,900 --> 00:17:48,570 But say we also did not want that number to be accessible to other people. 300 00:17:48,570 --> 00:17:51,207 How might we go about doing that? 301 00:17:51,207 --> 00:17:52,540 One way would be to use an iife. 302 00:17:52,540 --> 00:17:56,940 And so we can actually create that variable within a very limited function 303 00:17:56,940 --> 00:17:59,820 scope that is non-accessible globally. 304 00:17:59,820 --> 00:18:04,050 And so doing that real quick, we can create this thing 305 00:18:04,050 --> 00:18:12,750 called a counter which is a function where within here we 306 00:18:12,750 --> 00:18:15,030 create this variable called account. 307 00:18:15,030 --> 00:18:17,460 And we set it equal to zero. 308 00:18:17,460 --> 00:18:22,590 And then we can do something like return an object 309 00:18:22,590 --> 00:18:25,650 where if we do something like increment, it's 310 00:18:25,650 --> 00:18:34,800 actually a function which does count equals count plus 1. 311 00:18:34,800 --> 00:18:37,625 So it just increments that count. 312 00:18:37,625 --> 00:18:45,260 Or we can have a function called get which just returns. 313 00:18:45,260 --> 00:18:49,350 314 00:18:49,350 --> 00:18:52,850 Or let's just console log the count. 315 00:18:52,850 --> 00:18:58,819 316 00:18:58,819 --> 00:19:01,860 So this creates a function but instead we actually want that object back. 317 00:19:01,860 --> 00:19:07,640 So we can actually wrap that function in parentheses and immediately invoke it. 318 00:19:07,640 --> 00:19:12,859 And now we have an object that has an ink and a get function. 319 00:19:12,859 --> 00:19:14,400 And we can go ahead and invoke those. 320 00:19:14,400 --> 00:19:23,170 So we can do counter dot get, counter dot ink, counter dot get. 321 00:19:23,170 --> 00:19:26,480 And if we run that, we can see it gets the zero, 322 00:19:26,480 --> 00:19:29,000 increments it, and then prints out the one. 323 00:19:29,000 --> 00:19:33,410 But nowhere does any body have access to that variable at line 12. 324 00:19:33,410 --> 00:19:36,230 Because it's wrapped in that function that nobody can access. 325 00:19:36,230 --> 00:19:41,210 Because its scope is limited to lines 11 through 18. 326 00:19:41,210 --> 00:19:45,380 And the only things that have access to that variable are the return functions. 327 00:19:45,380 --> 00:19:48,110 328 00:19:48,110 --> 00:19:52,510 And so that that count variable is not accessible in the global scope. 329 00:19:52,510 --> 00:19:55,750 330 00:19:55,750 --> 00:19:59,700 Does that make sense to everybody? 331 00:19:59,700 --> 00:20:01,510 Do we see how that could be useful? 332 00:20:01,510 --> 00:20:04,750 333 00:20:04,750 --> 00:20:08,020 Any questions? 334 00:20:08,020 --> 00:20:12,170 So how might we be able to use iifes to solve that closure 335 00:20:12,170 --> 00:20:13,130 problem from earlier? 336 00:20:13,130 --> 00:20:19,410 337 00:20:19,410 --> 00:20:21,875 So let's copy that closure bug too. 338 00:20:21,875 --> 00:20:28,650 339 00:20:28,650 --> 00:20:34,050 So we have this from earlier which is buggy. 340 00:20:34,050 --> 00:20:38,560 How might we use an iife to solve this problem? 341 00:20:38,560 --> 00:20:42,570 The goal is now to print 0. 342 00:20:42,570 --> 00:20:43,750 Any thoughts? 343 00:20:43,750 --> 00:20:50,260 344 00:20:50,260 --> 00:20:54,110 So what if instead of pushing a function that consoles.logs i, 345 00:20:54,110 --> 00:20:57,520 we create a function that returns a function that console that logs i 346 00:20:57,520 --> 00:21:00,049 and pass in i. 347 00:21:00,049 --> 00:21:00,840 A little bit weird. 348 00:21:00,840 --> 00:21:11,130 349 00:21:11,130 --> 00:21:13,380 So now we have a function that returns a function that 350 00:21:13,380 --> 00:21:15,670 console that log something called i. 351 00:21:15,670 --> 00:21:23,140 Now what we can do is we can immediately invoke that function with i. 352 00:21:23,140 --> 00:21:35,440 353 00:21:35,440 --> 00:21:41,150 Do people see how that creates a closure by using an iife? 354 00:21:41,150 --> 00:21:44,560 So let's change a couple of these variable names 355 00:21:44,560 --> 00:21:47,420 so that it's easier to see. 356 00:21:47,420 --> 00:21:50,740 So we're pushing onto that array. 357 00:21:50,740 --> 00:21:55,990 The result of a function that returns a function that console.logs x. 358 00:21:55,990 --> 00:21:57,940 And what do we pass in as x, we pass in i. 359 00:21:57,940 --> 00:22:00,580 And so that creates a closure around that value 360 00:22:00,580 --> 00:22:05,930 of x Which is then accessible later on in the code. 361 00:22:05,930 --> 00:22:11,210 So if we go ahead and run this, we get that 0 as expected. 362 00:22:11,210 --> 00:22:20,590 363 00:22:20,590 --> 00:22:23,460 Any questions on that? 364 00:22:23,460 --> 00:22:26,260 Is that a question? 365 00:22:26,260 --> 00:22:28,075 It is a little bit crazy. 366 00:22:28,075 --> 00:22:29,950 This is not something that you use every day. 367 00:22:29,950 --> 00:22:32,050 But this is something that it helps to know. 368 00:22:32,050 --> 00:22:34,900 Because you might see things like libraries 369 00:22:34,900 --> 00:22:37,560 get imported by using an iife. 370 00:22:37,560 --> 00:22:41,019 So that a lot of variables that they declare while creating a library 371 00:22:41,019 --> 00:22:42,310 don't pollute the global scope. 372 00:22:42,310 --> 00:22:53,820 373 00:22:53,820 --> 00:22:54,820 All right. 374 00:22:54,820 --> 00:22:55,320 Moving on. 375 00:22:55,320 --> 00:22:56,400 So first class functions. 376 00:22:56,400 --> 00:22:59,922 So who knows what a first class function is? 377 00:22:59,922 --> 00:23:01,380 Has anybody heard this term before? 378 00:23:01,380 --> 00:23:05,130 379 00:23:05,130 --> 00:23:09,200 So first class functions basically describes the way 380 00:23:09,200 --> 00:23:11,840 that language handles functions. 381 00:23:11,840 --> 00:23:16,470 And so in JavaScript, classes are first class citizens, people like to say. 382 00:23:16,470 --> 00:23:20,100 Or in other words, functions are treated the same way as any other value. 383 00:23:20,100 --> 00:23:23,690 And so as we learned last week that functions are really just objects. 384 00:23:23,690 --> 00:23:25,910 Everything that isn't a primitive is just an object. 385 00:23:25,910 --> 00:23:29,800 So it really makes sense that functions can be treated as other values. 386 00:23:29,800 --> 00:23:31,550 So functions can be assigned to variables. 387 00:23:31,550 --> 00:23:33,740 We've seen that when we do something like const 388 00:23:33,740 --> 00:23:37,010 say hello equals some anonymous function. 389 00:23:37,010 --> 00:23:41,030 They can be signed into array values, which we saw with this previous example 390 00:23:41,030 --> 00:23:44,330 where we're pushing onto the array anonymous functions. 391 00:23:44,330 --> 00:23:48,140 And they can be set as an object values, which we saw in our iife example 392 00:23:48,140 --> 00:23:52,390 when we returned an object that had an inc and a get function. 393 00:23:52,390 --> 00:23:55,400 394 00:23:55,400 --> 00:23:58,280 They can also be passed as arguments to other functions. 395 00:23:58,280 --> 00:24:00,920 There's nothing stopping us from declaring a function which 396 00:24:00,920 --> 00:24:04,440 expects a function as an argument. 397 00:24:04,440 --> 00:24:06,280 And what that does is it allows-- 398 00:24:06,280 --> 00:24:10,790 oh, they can also be returned from functions as we saw earlier. 399 00:24:10,790 --> 00:24:12,740 In the previous example, we saw a function 400 00:24:12,740 --> 00:24:15,570 that returned another function. 401 00:24:15,570 --> 00:24:18,380 And so it allows the creation of higher order functions. 402 00:24:18,380 --> 00:24:20,990 So higher order function is basically any function 403 00:24:20,990 --> 00:24:25,950 that takes one or more functions as arguments or returns a function. 404 00:24:25,950 --> 00:24:30,620 And so some big examples of those are map, filter, and reduce. 405 00:24:30,620 --> 00:24:33,890 So does anybody have any questions on what a first class citizen means 406 00:24:33,890 --> 00:24:37,220 or a first class function? 407 00:24:37,220 --> 00:24:40,630 We have seen almost all of these bullets as examples in the past couple days. 408 00:24:40,630 --> 00:24:43,240 409 00:24:43,240 --> 00:24:43,740 Cool. 410 00:24:43,740 --> 00:24:46,405 So has everybody heard of map, filter, and reduce? 411 00:24:46,405 --> 00:24:49,160 412 00:24:49,160 --> 00:24:50,820 Has anybody not? 413 00:24:50,820 --> 00:24:51,320 OK. 414 00:24:51,320 --> 00:24:56,810 So basically these are three of the most famous higher order functions. 415 00:24:56,810 --> 00:25:00,030 What map does is it's an operation that can be done to an array. 416 00:25:00,030 --> 00:25:03,420 And what it does is it maps a particular function, 417 00:25:03,420 --> 00:25:06,340 any function to every single value in the array 418 00:25:06,340 --> 00:25:10,670 and then you get back an array where the values in the array 419 00:25:10,670 --> 00:25:15,410 are the result of passing the original values into some given function. 420 00:25:15,410 --> 00:25:16,710 What the heck does that mean? 421 00:25:16,710 --> 00:25:21,820 Well, it just happens to be that map is already built into the array class. 422 00:25:21,820 --> 00:25:28,070 So if we create an array like const x equals an array with 0, 1, 2, 3. 423 00:25:28,070 --> 00:25:31,700 424 00:25:31,700 --> 00:25:38,610 And say we create some function called add 1. 425 00:25:38,610 --> 00:25:42,370 And takes in a number, let's actually do this in node. 426 00:25:42,370 --> 00:25:46,940 427 00:25:46,940 --> 00:25:53,960 So say we had an array with 0, 1, 2, 3. 428 00:25:53,960 --> 00:26:00,780 And we had a function called add 1 which takes some number, 429 00:26:00,780 --> 00:26:05,550 and it returns the number plus 1. 430 00:26:05,550 --> 00:26:11,242 And so if we do add 1 to 1, what do we expect to be returned? 431 00:26:11,242 --> 00:26:13,980 432 00:26:13,980 --> 00:26:15,240 Two. 433 00:26:15,240 --> 00:26:16,950 And how about if we did zero? 434 00:26:16,950 --> 00:26:19,920 435 00:26:19,920 --> 00:26:21,240 We expect 1. 436 00:26:21,240 --> 00:26:22,030 1 returns 2. 437 00:26:22,030 --> 00:26:22,960 2 returns 3. 438 00:26:22,960 --> 00:26:24,070 3 returns 4. 439 00:26:24,070 --> 00:26:28,270 And so if we were to map that function to each of the values in that array, 440 00:26:28,270 --> 00:26:31,860 we should expect to have an array that has 1, 2, 3, and 4. 441 00:26:31,860 --> 00:26:39,220 And so if we do x dot map, which is built into the array, 442 00:26:39,220 --> 00:26:42,310 if we passed in that function called add 1, 443 00:26:42,310 --> 00:26:46,330 it basically maps that function to each value in that array 444 00:26:46,330 --> 00:26:48,730 and returns the new one, the new value. 445 00:26:48,730 --> 00:26:54,210 And so as we expected 0, 1, 2, 3 returns 1, 2, 3, 4. 446 00:26:54,210 --> 00:26:55,300 Any questions on map? 447 00:26:55,300 --> 00:26:57,370 448 00:26:57,370 --> 00:26:58,660 So what were the other two? 449 00:26:58,660 --> 00:26:59,190 Filter. 450 00:26:59,190 --> 00:27:01,960 So filter is basically another high order function 451 00:27:01,960 --> 00:27:05,080 where it expects a function and this function 452 00:27:05,080 --> 00:27:07,660 that you pass in can either return true or false. 453 00:27:07,660 --> 00:27:09,550 And basically what filter does is it retains 454 00:27:09,550 --> 00:27:14,960 the values that return true and gets rid of the values that return false. 455 00:27:14,960 --> 00:27:22,150 And say we have a function called is greater than 1. 456 00:27:22,150 --> 00:27:27,670 It takes a number, and it returns whether that number is greater than 1. 457 00:27:27,670 --> 00:27:33,355 458 00:27:33,355 --> 00:27:35,680 It returns whether that number is greater than 1. 459 00:27:35,680 --> 00:27:40,810 So say we pass in is greater than 1, a number like 100, 460 00:27:40,810 --> 00:27:42,390 we expect it to be true. 461 00:27:42,390 --> 00:27:45,340 If we pass in a number like 1, we expect it to be false. 462 00:27:45,340 --> 00:27:53,890 And say we were to filter that original array 0, 1, 2, 3 by the function 463 00:27:53,890 --> 00:28:00,360 is greater than 1, what do we expect to get back? 464 00:28:00,360 --> 00:28:03,070 Is 0 greater than 1? 465 00:28:03,070 --> 00:28:04,420 No, so it shouldn't be included. 466 00:28:04,420 --> 00:28:05,465 Nor is 1. 467 00:28:05,465 --> 00:28:07,140 But 2, and 3 are. 468 00:28:07,140 --> 00:28:10,644 And so if we filter is by is greater than 1, we get 2 and 3 back. 469 00:28:10,644 --> 00:28:13,370 470 00:28:13,370 --> 00:28:16,880 And the last high order function that we'll talk about it is called reduce. 471 00:28:16,880 --> 00:28:20,730 And basically what reduce does is it takes an array of multiple values 472 00:28:20,730 --> 00:28:23,077 and reduces it into a single value. 473 00:28:23,077 --> 00:28:25,410 And basically what that does is it takes a function that 474 00:28:25,410 --> 00:28:29,100 expects two arguments where the first argument is some accumulator basically. 475 00:28:29,100 --> 00:28:33,330 It marches down each value and returns that accumulator to the next value. 476 00:28:33,330 --> 00:28:36,750 And the second argument is whatever's next in that array. 477 00:28:36,750 --> 00:28:39,120 And so basically if we were to define a function called 478 00:28:39,120 --> 00:28:48,630 add which takes in two values and returns x plus y, 479 00:28:48,630 --> 00:28:53,700 we expect add 1 and 2 to return what? 480 00:28:53,700 --> 00:28:55,080 3. 481 00:28:55,080 --> 00:28:59,130 And what would we expect 0, 1, 2, 3 to return? 482 00:28:59,130 --> 00:29:01,938 483 00:29:01,938 --> 00:29:02,559 AUDIENCE: 6. 484 00:29:02,559 --> 00:29:03,100 SPEAKER 1: 6. 485 00:29:03,100 --> 00:29:09,460 So if we do x dot reduce and pass in add, we get back 6. 486 00:29:09,460 --> 00:29:10,180 Why is that? 487 00:29:10,180 --> 00:29:11,820 Because first it starts with zero. 488 00:29:11,820 --> 00:29:14,500 489 00:29:14,500 --> 00:29:18,372 And basically it starts by invoking the first two arguments. 490 00:29:18,372 --> 00:29:19,330 So it has zero and one. 491 00:29:19,330 --> 00:29:20,420 It invokes add. 492 00:29:20,420 --> 00:29:22,510 So 0 plus 1 is 1. 493 00:29:22,510 --> 00:29:26,710 It passes 1 on as the first argument. 494 00:29:26,710 --> 00:29:30,880 And y is the next value in the array, so 2. 495 00:29:30,880 --> 00:29:33,570 So we have 1 plus 2 is 3. 496 00:29:33,570 --> 00:29:38,150 And so for the next iteration, x is 3, y's is this next value called 3. 497 00:29:38,150 --> 00:29:39,190 It returns 6. 498 00:29:39,190 --> 00:29:42,880 And since that's every value in the array, it returns 6. 499 00:29:42,880 --> 00:29:45,386 Does that make sense? 500 00:29:45,386 --> 00:29:47,260 So those are the three higher order functions 501 00:29:47,260 --> 00:29:48,430 that we're going to talk about. 502 00:29:48,430 --> 00:29:49,888 And let's actually implement those. 503 00:29:49,888 --> 00:29:54,100 504 00:29:54,100 --> 00:30:01,210 So in four higher order functions, let's go ahead and declare some higher order 505 00:30:01,210 --> 00:30:04,040 functions of ourselves. 506 00:30:04,040 --> 00:30:09,175 So let's do-- does anybody have a preference if they want to do map, 507 00:30:09,175 --> 00:30:09,925 filter, or reduce? 508 00:30:09,925 --> 00:30:13,770 509 00:30:13,770 --> 00:30:14,440 Let's do map. 510 00:30:14,440 --> 00:30:14,940 All right. 511 00:30:14,940 --> 00:30:18,690 So let's declare a function called map. 512 00:30:18,690 --> 00:30:21,200 And let's take two arguments. 513 00:30:21,200 --> 00:30:23,760 First, is the array that we want to map over, 514 00:30:23,760 --> 00:30:26,100 and the second is some function that we want 515 00:30:26,100 --> 00:30:28,530 to invoke to every value on the array. 516 00:30:28,530 --> 00:30:32,310 So can anybody give me a strategy on how we might go about implementing this? 517 00:30:32,310 --> 00:30:36,625 518 00:30:36,625 --> 00:30:39,000 So first we're going to want to create a brand new array. 519 00:30:39,000 --> 00:30:44,109 520 00:30:44,109 --> 00:30:46,650 And then at the very end, we're going to want to return that. 521 00:30:46,650 --> 00:30:50,220 522 00:30:50,220 --> 00:30:53,663 Now what do we want to do before we return? 523 00:30:53,663 --> 00:30:56,549 AUDIENCE: [INAUDIBLE] 524 00:30:56,549 --> 00:30:57,220 SPEAKER 1: Yeah. 525 00:30:57,220 --> 00:30:59,970 So the comment was first, we should check if the array is an array 526 00:30:59,970 --> 00:31:01,140 and the function is a function. 527 00:31:01,140 --> 00:31:01,980 I completely agree. 528 00:31:01,980 --> 00:31:03,890 But let's just assume that for now. 529 00:31:03,890 --> 00:31:09,280 530 00:31:09,280 --> 00:31:11,210 So what does map do? 531 00:31:11,210 --> 00:31:16,210 It takes every value in an array runs through some function, 532 00:31:16,210 --> 00:31:21,400 and returns another array with the return values. 533 00:31:21,400 --> 00:31:24,320 So who wants to give me a strategy? 534 00:31:24,320 --> 00:31:24,820 Yeah. 535 00:31:24,820 --> 00:31:29,404 AUDIENCE: [INAUDIBLE] 536 00:31:29,404 --> 00:31:30,070 SPEAKER 1: Yeah. 537 00:31:30,070 --> 00:31:34,510 So some sort of four loop that will grab that value in the array and apply that 538 00:31:34,510 --> 00:31:35,370 function. 539 00:31:35,370 --> 00:31:35,870 Cool. 540 00:31:35,870 --> 00:31:42,040 So we can do four let's use let i equal zero. 541 00:31:42,040 --> 00:31:44,840 i is less than however many values that are in the array. 542 00:31:44,840 --> 00:31:50,050 543 00:31:50,050 --> 00:31:57,020 And that's do that the value just be array i. 544 00:31:57,020 --> 00:32:05,100 And then what we want to do is new array push a value onto that new array. 545 00:32:05,100 --> 00:32:07,430 And what do we want to push on it? 546 00:32:07,430 --> 00:32:13,155 The result of running that function on that value. 547 00:32:13,155 --> 00:32:14,030 Does that make sense? 548 00:32:14,030 --> 00:32:18,950 549 00:32:18,950 --> 00:32:20,140 Cool. 550 00:32:20,140 --> 00:32:21,890 So this would be absolutely correct. 551 00:32:21,890 --> 00:32:24,082 Unless somebody sees a bug. 552 00:32:24,082 --> 00:32:24,790 Shall we test it? 553 00:32:24,790 --> 00:32:43,070 554 00:32:43,070 --> 00:32:51,980 So we want to map over x, add 1, and we expect to see 1,2, 3,4. 555 00:32:51,980 --> 00:32:52,520 And we do. 556 00:32:52,520 --> 00:32:56,400 557 00:32:56,400 --> 00:32:59,050 Nice. 558 00:32:59,050 --> 00:33:02,910 And so one handy built in function to all arrays 559 00:33:02,910 --> 00:33:04,750 is this thing called a for each loop. 560 00:33:04,750 --> 00:33:08,590 So we could actually clean up our code by using a for each loop. 561 00:33:08,590 --> 00:33:12,180 And so we could do the original array dot for each. 562 00:33:12,180 --> 00:33:15,480 And what that does is it's a higher order function itself 563 00:33:15,480 --> 00:33:18,220 that allows us to pass it a function. 564 00:33:18,220 --> 00:33:21,010 And it will invoke that function on each of the values. 565 00:33:21,010 --> 00:33:24,420 So it's basically like map but instead of returning a new array 566 00:33:24,420 --> 00:33:28,650 with those values, it just invokes that function on those 567 00:33:28,650 --> 00:33:32,550 values without taking the return function and putting it in an array. 568 00:33:32,550 --> 00:33:47,820 And so we can say for each value here we just push onto that new array the value 569 00:33:47,820 --> 00:33:51,080 after we run it through that function. 570 00:33:51,080 --> 00:33:53,361 Does that make sense? 571 00:33:53,361 --> 00:33:53,860 Cool. 572 00:33:53,860 --> 00:33:58,905 Any questions on the implementation of map? 573 00:33:58,905 --> 00:34:02,550 Any questions on functions as first class citizens? 574 00:34:02,550 --> 00:34:05,940 575 00:34:05,940 --> 00:34:08,750 Do you think it would help if we implemented filter or reduce? 576 00:34:08,750 --> 00:34:09,711 Or are we good here? 577 00:34:09,711 --> 00:34:15,790 578 00:34:15,790 --> 00:34:16,290 No? 579 00:34:16,290 --> 00:34:17,280 OK. 580 00:34:17,280 --> 00:34:19,711 Moving on. 581 00:34:19,711 --> 00:34:20,210 Cool. 582 00:34:20,210 --> 00:34:22,376 So you may have heard these terms thrown around when 583 00:34:22,376 --> 00:34:26,010 dealing with JavaScript, things like synchronous, asynchronous, single 584 00:34:26,010 --> 00:34:27,630 threaded. 585 00:34:27,630 --> 00:34:29,429 So what is JavaScript? 586 00:34:29,429 --> 00:34:33,679 JavaScript is actually single threaded synchronous language. 587 00:34:33,679 --> 00:34:36,989 And so since a synchronous is a function that takes a really long time to run 588 00:34:36,989 --> 00:34:39,989 will cause a page to become unresponsive. 589 00:34:39,989 --> 00:34:42,940 And we can actually demonstrate this. 590 00:34:42,940 --> 00:34:47,265 We can do this right now by opening up our dev tools. 591 00:34:47,265 --> 00:34:51,770 592 00:34:51,770 --> 00:34:54,835 And I'm going to actually cause this website to stall out. 593 00:34:54,835 --> 00:34:56,460 So we can write a function called hang. 594 00:34:56,460 --> 00:34:59,620 595 00:34:59,620 --> 00:35:01,645 And let's say for some amount of seconds. 596 00:35:01,645 --> 00:35:09,280 597 00:35:09,280 --> 00:35:13,260 And basically what this hang does-- oops. 598 00:35:13,260 --> 00:35:15,760 Let's override that function called hang. 599 00:35:15,760 --> 00:35:25,250 And what it does is we can say const done at is some time in the future. 600 00:35:25,250 --> 00:35:33,250 So date dot now which gets us to the current time plus however many seconds 601 00:35:33,250 --> 00:35:36,310 we want times 1,000. 602 00:35:36,310 --> 00:35:39,160 Because date dot now returns milliseconds. 603 00:35:39,160 --> 00:35:42,370 And so now we have some value called done at which is the time 604 00:35:42,370 --> 00:35:43,760 that we're going to be done. 605 00:35:43,760 --> 00:35:55,090 We can do while date dot now is less than the time that we're done. 606 00:35:55,090 --> 00:35:57,960 Just do nothing. 607 00:35:57,960 --> 00:36:00,040 And so now everything is good. 608 00:36:00,040 --> 00:36:03,150 As you can see, we can move back and forth in the slide. 609 00:36:03,150 --> 00:36:13,230 But if I did hang for 10 seconds, we're stuck for another 10 seconds 610 00:36:13,230 --> 00:36:19,820 until the page is done with that [? what ?] loop. 611 00:36:19,820 --> 00:36:22,060 Well. 612 00:36:22,060 --> 00:36:24,540 Does that make sense? 613 00:36:24,540 --> 00:36:27,960 And this is because JavaScript is single threaded and synchronous. 614 00:36:27,960 --> 00:36:31,230 And so since this while loop was running for 10 seconds, 615 00:36:31,230 --> 00:36:33,535 it was just doing while this is true don't do anything. 616 00:36:33,535 --> 00:36:36,410 It's just going through that while loop, it locks up the entire page. 617 00:36:36,410 --> 00:36:36,910 Yeah. 618 00:36:36,910 --> 00:36:43,087 AUDIENCE: [INAUDIBLE] 619 00:36:43,087 --> 00:36:44,340 SPEAKER 1: I believe so. 620 00:36:44,340 --> 00:36:46,980 So the question is if we did something like while true, 621 00:36:46,980 --> 00:36:49,620 would it just lock up the page permanently? 622 00:36:49,620 --> 00:36:50,702 I believe so. 623 00:36:50,702 --> 00:36:52,410 Unless the browser protects against that. 624 00:36:52,410 --> 00:36:57,030 And I don't want to try because it will take down the presentation. 625 00:36:57,030 --> 00:37:00,670 But as we just demonstrated, since JavaScript is single threaded 626 00:37:00,670 --> 00:37:03,090 and synchronous, while that while loop was happening, 627 00:37:03,090 --> 00:37:05,298 we couldn't do anything at all on that whole website. 628 00:37:05,298 --> 00:37:07,500 629 00:37:07,500 --> 00:37:11,140 Which you could take advantage of if you wanted to like 630 00:37:11,140 --> 00:37:14,220 have some malicious web site which just does some while loop 631 00:37:14,220 --> 00:37:17,890 and locks up somebody's computer. 632 00:37:17,890 --> 00:37:22,940 But JavaScript also has some functions that act asynchronously. 633 00:37:22,940 --> 00:37:25,300 And so let's take a look at some of those functions. 634 00:37:25,300 --> 00:37:32,020 635 00:37:32,020 --> 00:37:34,410 So one of those functions is called set time out. 636 00:37:34,410 --> 00:37:36,760 And we'll look into it a little bit more in detail. 637 00:37:36,760 --> 00:37:39,000 But let me just show you how that works. 638 00:37:39,000 --> 00:37:48,646 So let's do a function call a print 3 or print 1. 639 00:37:48,646 --> 00:37:50,490 And what that does is it consoles logs 1. 640 00:37:50,490 --> 00:37:59,550 641 00:37:59,550 --> 00:38:01,110 And let's it have a print 2. 642 00:38:01,110 --> 00:38:08,400 643 00:38:08,400 --> 00:38:09,300 And a print 3. 644 00:38:09,300 --> 00:38:13,290 645 00:38:13,290 --> 00:38:25,340 And then if we invoked print 1, print 2, print 3, what would we expect to see? 646 00:38:25,340 --> 00:38:28,990 647 00:38:28,990 --> 00:38:30,280 1,2, 3. 648 00:38:30,280 --> 00:38:34,810 But say we use this thing called set timeout which 649 00:38:34,810 --> 00:38:37,710 is basically an asynchronous function. 650 00:38:37,710 --> 00:38:43,900 So say rather than printing 1, we did set time out on print 1 651 00:38:43,900 --> 00:38:54,790 to be a second, a 1,000 milliseconds, or did set time out on print 2 652 00:38:54,790 --> 00:38:57,400 with a time out of zero seconds. 653 00:38:57,400 --> 00:39:01,930 And then print 3 knowing nothing about set time 654 00:39:01,930 --> 00:39:05,870 out other than it set some time out before running a function. 655 00:39:05,870 --> 00:39:08,720 What do we expect to be console logged? 656 00:39:08,720 --> 00:39:12,850 So what order do we expect these to print? 657 00:39:12,850 --> 00:39:15,900 Anybody care to guess? 658 00:39:15,900 --> 00:39:17,320 3, 2, 1. 659 00:39:17,320 --> 00:39:18,325 Why do you say that? 660 00:39:18,325 --> 00:39:34,165 AUDIENCE: [INAUDIBLE] 661 00:39:34,165 --> 00:39:36,190 SPEAKER 1: OK, so 2, 3, 1 is the other guess. 662 00:39:36,190 --> 00:39:41,000 So let's actually just run this. 663 00:39:41,000 --> 00:39:50,580 And we see 3,2,1 even though set time out for print 2 is zero. 664 00:39:50,580 --> 00:39:54,210 So let's dive a little bit more into how this works. 665 00:39:54,210 --> 00:39:57,690 We we'll dive a little more into this how this works in a couple more slides. 666 00:39:57,690 --> 00:40:02,840 But that's just a teaser at asynchronous functions. 667 00:40:02,840 --> 00:40:07,660 So how exactly can a language be both synchronous and asynchronous. 668 00:40:07,660 --> 00:40:10,270 In order to explain that, we have to explain 669 00:40:10,270 --> 00:40:12,610 these concepts called executions stack, browser 670 00:40:12,610 --> 00:40:14,980 API's, function queue, and event loop. 671 00:40:14,980 --> 00:40:18,430 So let's dive deeply into what an execution stack is. 672 00:40:18,430 --> 00:40:22,700 Has anybody heard the term stack or execution stack? 673 00:40:22,700 --> 00:40:28,640 674 00:40:28,640 --> 00:40:31,580 So functions that get invoked by other functions get 675 00:40:31,580 --> 00:40:35,650 added to this thing called a call stack. 676 00:40:35,650 --> 00:40:39,280 And we'll discuss a little bit about more what that is in a second. 677 00:40:39,280 --> 00:40:41,501 678 00:40:41,501 --> 00:40:44,000 And when functions complete, they are removed from the stack 679 00:40:44,000 --> 00:40:48,750 and frames below continue executing. 680 00:40:48,750 --> 00:40:54,920 So does anybody or everybody know what a stack is? 681 00:40:54,920 --> 00:40:56,810 So a stack is one of those data structures 682 00:40:56,810 --> 00:40:59,990 that you may have seen in CS 50. 683 00:40:59,990 --> 00:41:03,500 And the example that we give for a stack is something like a deck of cards 684 00:41:03,500 --> 00:41:08,390 or a stack of lunch trays where when you add things to the stack, 685 00:41:08,390 --> 00:41:09,650 they appear on the top. 686 00:41:09,650 --> 00:41:12,650 And so when you want to grab the next thing, whatever you grab first 687 00:41:12,650 --> 00:41:15,570 is the most recent thing that you've put onto the stack. 688 00:41:15,570 --> 00:41:20,210 So if you imagine a deck of cards, say you have cards called 5, 4, 3, 2, 1, 689 00:41:20,210 --> 00:41:24,050 and you place 5, 4, 3, 2, and 1 on the stack, the first thing that you 690 00:41:24,050 --> 00:41:27,410 get back is 1 and then 2, 3, 4, 5. 691 00:41:27,410 --> 00:41:31,560 As opposed to something like a queue where it's like a line of people 692 00:41:31,560 --> 00:41:36,300 where the first person in line is the first person who comes out. 693 00:41:36,300 --> 00:41:40,650 And so let's explore what stacks are. 694 00:41:40,650 --> 00:41:43,150 Actually I'll show you in code first, and then I'll draw it. 695 00:41:43,150 --> 00:41:48,680 696 00:41:48,680 --> 00:41:52,320 So say we had a function called a. 697 00:41:52,320 --> 00:41:56,425 That just does console that log. 698 00:41:56,425 --> 00:42:02,715 i, a function called b, that just calls a, 699 00:42:02,715 --> 00:42:07,350 and a function called c that just calls b. 700 00:42:07,350 --> 00:42:13,570 701 00:42:13,570 --> 00:42:16,260 And then we invoked c. 702 00:42:16,260 --> 00:42:20,128 So can everybody imagine in their head exactly what's going to happen? 703 00:42:20,128 --> 00:42:22,870 704 00:42:22,870 --> 00:42:25,974 So c is going to get invoked which calls b. 705 00:42:25,974 --> 00:42:27,890 b is going to get invoked [INAUDIBLE] a, and a 706 00:42:27,890 --> 00:42:34,570 is going to console.log [? high. ?] And so as you can imagine, 707 00:42:34,570 --> 00:42:41,137 the JavaScript interpreter knows exactly where which function gets added next. 708 00:42:41,137 --> 00:42:42,970 Actually a better example would be something 709 00:42:42,970 --> 00:42:55,340 like we can use or add 1 function from above from earlier. 710 00:42:55,340 --> 00:43:23,480 711 00:43:23,480 --> 00:43:26,660 All right here's a little bit of a better example. 712 00:43:26,660 --> 00:43:31,760 So when we invoke c, c is going to console log, get numb plus get numb. 713 00:43:31,760 --> 00:43:34,040 And so what is the value of get numb? 714 00:43:34,040 --> 00:43:39,930 So when you invoke the first get numb, it returns add 1 of 10. 715 00:43:39,930 --> 00:43:45,020 And so it calls add 1, passes in 10, add 1 returns that original number plus 1. 716 00:43:45,020 --> 00:43:46,490 So it returns 11. 717 00:43:46,490 --> 00:43:49,340 Which returns to here, which gets returned to here. 718 00:43:49,340 --> 00:43:59,150 And so somehow JavaScript has to know that 11 is what get numb evaluates to. 719 00:43:59,150 --> 00:44:01,070 And then it does it again. 720 00:44:01,070 --> 00:44:04,070 And so as you expect, this would return a number [INAUDIBLE] 721 00:44:04,070 --> 00:44:06,400 console that log a number called 22. 722 00:44:06,400 --> 00:44:09,530 But let's actually go through exactly how that works in drawing. 723 00:44:09,530 --> 00:44:13,110 724 00:44:13,110 --> 00:44:15,420 So we have a function called add numb or add 1. 725 00:44:15,420 --> 00:44:22,356 726 00:44:22,356 --> 00:44:23,356 Which expects some numb. 727 00:44:23,356 --> 00:44:33,280 728 00:44:33,280 --> 00:44:34,930 We have a function called get numb. 729 00:44:34,930 --> 00:44:37,810 730 00:44:37,810 --> 00:44:39,438 And we have a function called c. 731 00:44:39,438 --> 00:44:43,440 And what c does is it gets two numbs and adds them. 732 00:44:43,440 --> 00:44:45,110 And what add 1 does is-- 733 00:44:45,110 --> 00:44:52,930 or what get numb does is it gets the value of add 1 of 10 and returns it. 734 00:44:52,930 --> 00:44:55,080 So imagine we have this mythical call stack. 735 00:44:55,080 --> 00:44:59,170 736 00:44:59,170 --> 00:45:02,650 Which is basically the way that JavaScript knows what's going on. 737 00:45:02,650 --> 00:45:04,900 And so first, we invoke c. 738 00:45:04,900 --> 00:45:09,400 And so c gets added onto this stack. 739 00:45:09,400 --> 00:45:11,500 And so it's basically JavaScript remembering like, 740 00:45:11,500 --> 00:45:13,390 oh, he called the c function. 741 00:45:13,390 --> 00:45:15,190 And what does the c function does? 742 00:45:15,190 --> 00:45:18,220 Well, it returns get numb plus get numb. 743 00:45:18,220 --> 00:45:21,100 And so in order to find out what get numb is for the first time, 744 00:45:21,100 --> 00:45:23,640 we have to add get numb. 745 00:45:23,640 --> 00:45:27,820 746 00:45:27,820 --> 00:45:29,590 We have to evaluate that. 747 00:45:29,590 --> 00:45:31,250 And so what is the value of get numb? 748 00:45:31,250 --> 00:45:34,690 Well, we have to figure out what add one of ten is. 749 00:45:34,690 --> 00:45:43,730 And so we need to evaluate that. 750 00:45:43,730 --> 00:45:45,860 And so JavaScript now knows and is keeping track 751 00:45:45,860 --> 00:45:50,587 that we have to evaluate this thing called add 1, and once we get it, 752 00:45:50,587 --> 00:45:53,670 it gets passed to this thing called get numb, and once we have that value, 753 00:45:53,670 --> 00:45:55,520 it gets passed to c. 754 00:45:55,520 --> 00:45:58,760 And so this returns 10 or 11. 755 00:45:58,760 --> 00:46:02,420 So it returns 11 to get numb. 756 00:46:02,420 --> 00:46:06,170 11 just returns that to c. 757 00:46:06,170 --> 00:46:07,910 And then what happens in c? 758 00:46:07,910 --> 00:46:10,700 Well, it needs to find get numb plus get numb. 759 00:46:10,700 --> 00:46:13,730 So it has to evaluate get numb again. 760 00:46:13,730 --> 00:46:17,180 So get numb gets added to that stack. 761 00:46:17,180 --> 00:46:18,620 And how does get numb evaluate? 762 00:46:18,620 --> 00:46:22,100 Well, it needs to evaluate get 1 or add 1. 763 00:46:22,100 --> 00:46:24,620 And so that evaluates. 764 00:46:24,620 --> 00:46:28,490 And after it evaluates, it just gets erased from the stack 765 00:46:28,490 --> 00:46:29,780 because it's done. 766 00:46:29,780 --> 00:46:33,410 And then when get numb evaluates, that also gets erased from the stack. 767 00:46:33,410 --> 00:46:39,550 768 00:46:39,550 --> 00:46:43,240 And then c console logs 22. 769 00:46:43,240 --> 00:46:47,110 And then c gets erased from the stack. 770 00:46:47,110 --> 00:46:49,360 Because that has finished executing. 771 00:46:49,360 --> 00:46:51,630 Does that make sense to everyone? 772 00:46:51,630 --> 00:46:52,130 Yeah. 773 00:46:52,130 --> 00:46:54,088 AUDIENCE: [INAUDIBLE] like if one of the stacks 774 00:46:54,088 --> 00:47:01,730 creates a [INAUDIBLE] do those variables [INAUDIBLE]?? 775 00:47:01,730 --> 00:47:04,570 SPEAKER 1: So the question is what happens if one of those functions 776 00:47:04,570 --> 00:47:05,320 creates a closure? 777 00:47:05,320 --> 00:47:06,944 Does it still disappear from the stack? 778 00:47:06,944 --> 00:47:09,580 779 00:47:09,580 --> 00:47:12,160 The answer is yes with an asterisk. 780 00:47:12,160 --> 00:47:14,494 So as long as nothing else needs to remember 781 00:47:14,494 --> 00:47:15,910 all of those variables and stacks. 782 00:47:15,910 --> 00:47:22,540 So if these functions don't create other closures then they'll just be erased. 783 00:47:22,540 --> 00:47:24,790 And you can just think of it as being erased 784 00:47:24,790 --> 00:47:28,360 from memory because that's really something 785 00:47:28,360 --> 00:47:29,960 that the engine itself handles. 786 00:47:29,960 --> 00:47:31,990 And you really don't have to worry about memory and stuff. 787 00:47:31,990 --> 00:47:34,810 But you can just think of it as it just gets erased from the stack 788 00:47:34,810 --> 00:47:38,790 and from memory if no closure is left around. 789 00:47:38,790 --> 00:47:39,830 But great question. 790 00:47:39,830 --> 00:47:41,590 Any other questions? 791 00:47:41,590 --> 00:47:46,480 Does this call stack makes sense to everybody? 792 00:47:46,480 --> 00:47:46,980 Great. 793 00:47:46,980 --> 00:47:51,470 794 00:47:51,470 --> 00:47:57,020 And so a quick demo of just showing that JavaScript does indeed 795 00:47:57,020 --> 00:47:59,930 keep track of this call stack is what happens if an error is found. 796 00:47:59,930 --> 00:48:12,980 797 00:48:12,980 --> 00:48:16,980 So if one of these functions ends up creating an error, in this case add 1, 798 00:48:16,980 --> 00:48:21,240 and we run this, it says, oh, no, an error 799 00:48:21,240 --> 00:48:22,910 which is the error that we created. 800 00:48:22,910 --> 00:48:28,530 And it says add 1 which was called by get numb which was called by c. 801 00:48:28,530 --> 00:48:31,440 And so JavaScript does indeed keep track of this call stack. 802 00:48:31,440 --> 00:48:34,500 And you can see when an error gets thrown, 803 00:48:34,500 --> 00:48:40,920 it basically dumps the call stack to the console. 804 00:48:40,920 --> 00:48:43,880 Does that make sense to everybody? 805 00:48:43,880 --> 00:48:45,960 Any questions on call stack, execution stack? 806 00:48:45,960 --> 00:48:51,330 807 00:48:51,330 --> 00:48:51,830 Great. 808 00:48:51,830 --> 00:48:53,871 And so now going back to asynchronous JavaScript. 809 00:48:53,871 --> 00:48:57,400 So how exactly does this thing called set time out work? 810 00:48:57,400 --> 00:49:01,060 How does it not just immediately get invoked? 811 00:49:01,060 --> 00:49:02,720 How does any asynchronous things work. 812 00:49:02,720 --> 00:49:04,470 And in order to understand that, you first 813 00:49:04,470 --> 00:49:06,739 need to understand execution stack. 814 00:49:06,739 --> 00:49:08,530 And then I can talk you through exactly how 815 00:49:08,530 --> 00:49:14,380 things get handled in terms of browser API's, function queue, and event loop. 816 00:49:14,380 --> 00:49:16,840 Let's go ahead and draw that on the board as well. 817 00:49:16,840 --> 00:49:22,810 818 00:49:22,810 --> 00:49:25,920 So this thing here we can call the stack. 819 00:49:25,920 --> 00:49:31,677 820 00:49:31,677 --> 00:49:33,510 And this is basically exactly the same stack 821 00:49:33,510 --> 00:49:35,400 that we were talking about before. 822 00:49:35,400 --> 00:49:41,010 Over here we can call this API's. 823 00:49:41,010 --> 00:49:44,301 824 00:49:44,301 --> 00:49:46,050 Basically these are functions that you can 825 00:49:46,050 --> 00:49:49,680 call that are not directly built into JavaScript 826 00:49:49,680 --> 00:49:53,400 but might get run in the browser. 827 00:49:53,400 --> 00:49:59,040 We have this thing we can draw down here called the function queue. 828 00:49:59,040 --> 00:50:06,215 829 00:50:06,215 --> 00:50:08,090 And we have this thing called the event loop. 830 00:50:08,090 --> 00:50:17,680 831 00:50:17,680 --> 00:50:21,490 So basically we talked in depth about how that stack worked. 832 00:50:21,490 --> 00:50:24,640 But we have not mentioned API's, event loop, or function queue. 833 00:50:24,640 --> 00:50:28,270 So basically what API's are these things like set time out 834 00:50:28,270 --> 00:50:30,490 or fetch or any of these other asynchronous 835 00:50:30,490 --> 00:50:33,370 functions which get run and handled by the browser 836 00:50:33,370 --> 00:50:36,360 but not necessarily by JavaScript itself. 837 00:50:36,360 --> 00:50:39,400 And so say we had something-- does everybody remember the example 838 00:50:39,400 --> 00:50:43,232 from before with print 1, 2, and 3? 839 00:50:43,232 --> 00:50:44,940 Let me remind you of the code real quick. 840 00:50:44,940 --> 00:50:52,372 841 00:50:52,372 --> 00:50:55,080 So we have print 1, print 2, and print 3, are our three functions 842 00:50:55,080 --> 00:50:56,280 that we defined. 843 00:50:56,280 --> 00:51:01,650 And we set time out print 1 to 1 second, set time out print 2 to zero seconds, 844 00:51:01,650 --> 00:51:04,210 and then print 3 immediately. 845 00:51:04,210 --> 00:51:08,430 And so when this file gets executed, three things happen. 846 00:51:08,430 --> 00:51:13,420 847 00:51:13,420 --> 00:51:15,500 First we call print 1. 848 00:51:15,500 --> 00:51:20,290 849 00:51:20,290 --> 00:51:26,720 But set time out for 1 second. 850 00:51:26,720 --> 00:51:30,060 851 00:51:30,060 --> 00:51:32,660 Then we do the same thing with print 2 for zero seconds, 852 00:51:32,660 --> 00:51:35,510 and then we'd call print 3. 853 00:51:35,510 --> 00:51:41,030 And so basically set time out of print 1 for 1,000 seconds 854 00:51:41,030 --> 00:51:42,984 gets tossed on the stack here. 855 00:51:42,984 --> 00:51:45,650 And set time out is actually one of those asynchronous functions 856 00:51:45,650 --> 00:51:47,450 that gets handled by the browser. 857 00:51:47,450 --> 00:51:50,520 And so that gets tossed over here. 858 00:51:50,520 --> 00:51:58,160 And so that's print 1 in one second. 859 00:51:58,160 --> 00:52:07,716 860 00:52:07,716 --> 00:52:09,590 And so the browser actually is the thing that 861 00:52:09,590 --> 00:52:14,430 handles keeping track of the seconds until print 1 should get executed. 862 00:52:14,430 --> 00:52:18,570 And then the function queue says, OK, I executed that line of code, I'm done. 863 00:52:18,570 --> 00:52:23,842 Next is set time out of print 2 for 0 seconds which 864 00:52:23,842 --> 00:52:25,550 gets thrown on here, that gets evaluated, 865 00:52:25,550 --> 00:52:29,720 and that's handled by the browser as well since it's a set time out call. 866 00:52:29,720 --> 00:52:39,850 So this gets print 2 with a time out of zero seconds. 867 00:52:39,850 --> 00:52:41,600 And then the next line of code in the file 868 00:52:41,600 --> 00:52:47,030 was print 3 which immediately gets tossed on the queue or on the stack, 869 00:52:47,030 --> 00:52:48,920 and it consoles that logs 3. 870 00:52:48,920 --> 00:52:59,700 And so 3 gets consoled out logged. 871 00:52:59,700 --> 00:53:01,950 And then the state of the world is basically this. 872 00:53:01,950 --> 00:53:07,520 Because all of this happened in very, very quickly. 873 00:53:07,520 --> 00:53:10,920 Is everybody with me so far? 874 00:53:10,920 --> 00:53:15,900 And so now the browser says, hey, it's been zero seconds. 875 00:53:15,900 --> 00:53:17,520 It's time to call print 2. 876 00:53:17,520 --> 00:53:21,860 And so this gets put in the function queue. 877 00:53:21,860 --> 00:53:24,810 And so as we alluded to earlier a queue is basically 878 00:53:24,810 --> 00:53:27,582 a line where the first things that get added 879 00:53:27,582 --> 00:53:29,040 are the first things that come out. 880 00:53:29,040 --> 00:53:38,360 And so it says print 2 is ready. 881 00:53:38,360 --> 00:53:39,670 And that gets erased from here. 882 00:53:39,670 --> 00:53:42,640 883 00:53:42,640 --> 00:53:44,700 And so now the state of the world is this. 884 00:53:44,700 --> 00:53:50,180 There is nothing on the stack because that file has finished executing. 885 00:53:50,180 --> 00:53:53,337 It did set time out of print 1 1 second. 886 00:53:53,337 --> 00:53:55,420 It did set time out of print two for zero seconds. 887 00:53:55,420 --> 00:54:00,180 And it did set print 3 which immediately console log 3. 888 00:54:00,180 --> 00:54:01,930 And so now the state of the world is this. 889 00:54:01,930 --> 00:54:03,180 There's nothing on the stack. 890 00:54:03,180 --> 00:54:04,990 There is one thing in the function queue. 891 00:54:04,990 --> 00:54:07,700 And there's one thing over there called print 1, 892 00:54:07,700 --> 00:54:10,331 and the browser is keeping track of the time. 893 00:54:10,331 --> 00:54:13,330 And so there's this thing called the event loop which it just constantly 894 00:54:13,330 --> 00:54:14,440 checking. 895 00:54:14,440 --> 00:54:16,180 First, is there anything on the stack? 896 00:54:16,180 --> 00:54:19,054 If there's something in the stack, just keep doing what you're doing. 897 00:54:19,054 --> 00:54:19,830 Finish the stack. 898 00:54:19,830 --> 00:54:22,700 But once the stack gets emptied, it says hey, 899 00:54:22,700 --> 00:54:26,180 is there anything in the queue that's ready to go onto the stack? 900 00:54:26,180 --> 00:54:27,610 And now there is. 901 00:54:27,610 --> 00:54:28,450 The stack is empty. 902 00:54:28,450 --> 00:54:29,980 And there's something on the queue. 903 00:54:29,980 --> 00:54:34,890 Until the event loop says, hey, let's move this into the stack. 904 00:54:34,890 --> 00:54:45,580 And so the event loop takes care of moving print two onto the stack 905 00:54:45,580 --> 00:54:46,846 and erases it from the queue. 906 00:54:46,846 --> 00:54:53,170 907 00:54:53,170 --> 00:54:55,401 So now the state of the world is this. 908 00:54:55,401 --> 00:54:57,400 There's something on the stack called print two. 909 00:54:57,400 --> 00:54:59,358 Function two is empty, and the browser is still 910 00:54:59,358 --> 00:55:01,450 keeping track of when it should print 1. 911 00:55:01,450 --> 00:55:04,710 And this is basically still 1,000 milliseconds. 912 00:55:04,710 --> 00:55:06,381 So now it's good, what happens? 913 00:55:06,381 --> 00:55:09,130 Since there is something on the stack that always gets the highest 914 00:55:09,130 --> 00:55:12,897 priority, since we know JavaScript is synchronous, 915 00:55:12,897 --> 00:55:14,980 it's just going to execute everything on the stack 916 00:55:14,980 --> 00:55:16,540 before even looking anywhere else. 917 00:55:16,540 --> 00:55:19,804 And so since there's something on the stack called print 2, it executes that. 918 00:55:19,804 --> 00:55:20,470 What does it do? 919 00:55:20,470 --> 00:55:21,220 It prints out 2. 920 00:55:21,220 --> 00:55:24,070 921 00:55:24,070 --> 00:55:27,080 And then says, OK, I'm now done with the stack. 922 00:55:27,080 --> 00:55:32,030 923 00:55:32,030 --> 00:55:34,490 And so now this is the state of the world. 924 00:55:34,490 --> 00:55:37,690 There's something over there being tracked by the browser called print 1. 925 00:55:37,690 --> 00:55:40,562 It still has 1,000 milliseconds or so on the clock. 926 00:55:40,562 --> 00:55:41,770 There's nothing in the stack. 927 00:55:41,770 --> 00:55:43,145 And there's nothing in the queue. 928 00:55:43,145 --> 00:55:47,290 And the event loop is saying, oh, there's nothing for me to do. 929 00:55:47,290 --> 00:55:49,150 So now what happens? 930 00:55:49,150 --> 00:55:51,370 Well, basically nothing for a whole second. 931 00:55:51,370 --> 00:55:53,450 So basically this timer runs down. 932 00:55:53,450 --> 00:55:58,750 And as soon as this hits zero, can somebody tell me what happens? 933 00:55:58,750 --> 00:55:59,730 AUDIENCE: [INAUDIBLE] 934 00:55:59,730 --> 00:56:00,710 SPEAKER 1: Yeah. 935 00:56:00,710 --> 00:56:02,910 So print 1 moves to the queue. 936 00:56:02,910 --> 00:56:06,982 So as soon as this hits 0, this gets moved down to here. 937 00:56:06,982 --> 00:56:07,940 So now we have print 1. 938 00:56:07,940 --> 00:56:14,392 939 00:56:14,392 --> 00:56:15,100 This gets erased. 940 00:56:15,100 --> 00:56:20,745 941 00:56:20,745 --> 00:56:21,620 And now what happens? 942 00:56:21,620 --> 00:56:24,938 943 00:56:24,938 --> 00:56:26,834 AUDIENCE: [INAUDIBLE] 944 00:56:26,834 --> 00:56:28,030 SPEAKER 1: Exactly. 945 00:56:28,030 --> 00:56:30,380 The event loop says, hey, the stack is empty. 946 00:56:30,380 --> 00:56:32,130 But there's something on the queue, so let 947 00:56:32,130 --> 00:56:35,290 me move that up to the queue or the stack I mean. 948 00:56:35,290 --> 00:56:38,240 Move the thing from the queue to the stack. 949 00:56:38,240 --> 00:56:39,610 And so now print 1 is here. 950 00:56:39,610 --> 00:56:44,780 951 00:56:44,780 --> 00:56:46,910 Gets erased from the queue. 952 00:56:46,910 --> 00:56:49,924 953 00:56:49,924 --> 00:56:50,840 And then what happens? 954 00:56:50,840 --> 00:56:54,031 955 00:56:54,031 --> 00:56:54,530 Print 1. 956 00:56:54,530 --> 00:56:58,830 957 00:56:58,830 --> 00:57:02,190 And then the stack is cleared. 958 00:57:02,190 --> 00:57:03,130 And now we're done. 959 00:57:03,130 --> 00:57:05,520 There's nothing left being tracked by the APIs. 960 00:57:05,520 --> 00:57:08,440 There's nothing left in the stack, and there's nothing in the queue. 961 00:57:08,440 --> 00:57:13,300 And so what happens at the very end, well, we print 3,2,1. 962 00:57:13,300 --> 00:57:16,900 Does that make sense to everybody? 963 00:57:16,900 --> 00:57:17,400 Yeah. 964 00:57:17,400 --> 00:57:36,248 AUDIENCE: [INAUDIBLE] whereas everything that is on the [INAUDIBLE] 965 00:57:36,248 --> 00:57:38,232 which it appeared there? 966 00:57:38,232 --> 00:57:39,520 SPEAKER 1: Yes, exactly. 967 00:57:39,520 --> 00:57:43,147 So the question was about ordering, and how is order 968 00:57:43,147 --> 00:57:44,730 affected when things are on the stack? 969 00:57:44,730 --> 00:57:46,920 Queue and the APIs. 970 00:57:46,920 --> 00:57:47,770 Over there. 971 00:57:47,770 --> 00:57:49,440 And the answer is exactly as you said. 972 00:57:49,440 --> 00:57:51,690 Everything in the stack has a definite order. 973 00:57:51,690 --> 00:57:55,402 Things at the top get executed before things on the bottom. 974 00:57:55,402 --> 00:57:56,610 And same things at the queue. 975 00:57:56,610 --> 00:57:57,960 Things get queued up. 976 00:57:57,960 --> 00:58:00,940 And as soon as the stack is empty, whatever's 977 00:58:00,940 --> 00:58:04,577 next in the queue is guaranteed to be in the next thing on the stack. 978 00:58:04,577 --> 00:58:06,660 And if that thing calls other functions, the stack 979 00:58:06,660 --> 00:58:09,210 will grow and shrink before even grabbing 980 00:58:09,210 --> 00:58:10,890 another function from the queue. 981 00:58:10,890 --> 00:58:14,940 And then things in the APIs over here, these 982 00:58:14,940 --> 00:58:17,920 you have no real guarantees on what order they're going to return in. 983 00:58:17,920 --> 00:58:21,990 And so that's what the asynchronous or the concurrency of model of JavaScript 984 00:58:21,990 --> 00:58:22,530 is. 985 00:58:22,530 --> 00:58:25,650 It is basically these APIs are handled by the browser. 986 00:58:25,650 --> 00:58:30,480 And they will basically let the rest of the JavaScript 987 00:58:30,480 --> 00:58:34,937 know when they are done by pushing things onto that function queue. 988 00:58:34,937 --> 00:58:37,020 And then as soon as they're on the function queue, 989 00:58:37,020 --> 00:58:39,000 then you have a guaranteed order when they're 990 00:58:39,000 --> 00:58:42,115 going to get put onto the stack. 991 00:58:42,115 --> 00:58:42,990 Does that make sense? 992 00:58:42,990 --> 00:58:47,870 AUDIENCE: So if you set time out on three different things 993 00:58:47,870 --> 00:58:52,665 for the same amount of time, is there a guaranteed order? 994 00:58:52,665 --> 00:58:55,860 SPEAKER 1: So the question is if you set time out three different things 995 00:58:55,860 --> 00:58:57,660 is there a guarantee in order? 996 00:58:57,660 --> 00:58:59,460 I believe so. 997 00:58:59,460 --> 00:59:06,370 So if you do set time out of print 1, 0, set time out of print 2, 0, 998 00:59:06,370 --> 00:59:13,380 set time out of print 3, 0, I believe you're guaranteed to print out 1,2,3. 999 00:59:13,380 --> 00:59:17,729 But the caveat is that it depends on the implementation of the API. 1000 00:59:17,729 --> 00:59:19,770 So it really depends on the browser you're using. 1001 00:59:19,770 --> 00:59:23,454 But I believe browsers will have that guarantee. 1002 00:59:23,454 --> 00:59:26,240 1003 00:59:26,240 --> 00:59:27,200 Any other questions? 1004 00:59:27,200 --> 00:59:28,180 Yeah. 1005 00:59:28,180 --> 00:59:34,842 AUDIENCE: For the event loop, you said it starts with [INAUDIBLE] So 1006 00:59:34,842 --> 00:59:41,580 like that's just whenever [INAUDIBLE] 1007 00:59:41,580 --> 00:59:42,820 SPEAKER 1: Exactly. 1008 00:59:42,820 --> 00:59:44,960 So what the event loop does is it basically 1009 00:59:44,960 --> 00:59:48,330 checks when the stack is empty. 1010 00:59:48,330 --> 00:59:50,842 It moves something from the queue to the stack. 1011 00:59:50,842 --> 00:59:51,800 And that's all it does. 1012 00:59:51,800 --> 00:59:54,260 Is it's just constantly checking, hey, is the stack empty? 1013 00:59:54,260 --> 00:59:57,099 If not, then I'll wait. 1014 00:59:57,099 --> 00:59:57,890 Is the stack empty? 1015 00:59:57,890 --> 00:59:58,670 Oh, now it is. 1016 00:59:58,670 --> 00:59:59,620 Is there anything on the queue? 1017 00:59:59,620 --> 01:00:00,060 Oh, there is. 1018 01:00:00,060 --> 01:00:01,082 So let me move it to the stack. 1019 01:00:01,082 --> 01:00:01,582 Yeah. 1020 01:00:01,582 --> 01:00:03,622 AUDIENCE: Is there a limit to the queue? 1021 01:00:03,622 --> 01:00:05,330 SPEAKER 1: Is there a limit to the queue? 1022 01:00:05,330 --> 01:00:07,530 AUDIENCE: A realistic limit? 1023 01:00:07,530 --> 01:00:10,490 SPEAKER 1: Is there a realistic limit to the queue? 1024 01:00:10,490 --> 01:00:11,280 No. 1025 01:00:11,280 --> 01:00:14,320 The limit to the queue is basically what can be held in memory. 1026 01:00:14,320 --> 01:00:18,100 1027 01:00:18,100 --> 01:00:21,490 And so what happens if we run out of memory? 1028 01:00:21,490 --> 01:00:23,358 Let's have an example that does that. 1029 01:00:23,358 --> 01:00:33,790 1030 01:00:33,790 --> 01:00:35,540 So this won't actually overflow the queue. 1031 01:00:35,540 --> 01:00:37,970 But this one will overflow the stack. 1032 01:00:37,970 --> 01:00:42,740 So we have a function called recurse. 1033 01:00:42,740 --> 01:00:55,620 And recurse let's console that log, recursion, and then return recurse. 1034 01:00:55,620 --> 01:00:59,011 1035 01:00:59,011 --> 01:01:00,510 So what do we expect to happen here? 1036 01:01:00,510 --> 01:01:03,340 1037 01:01:03,340 --> 01:01:03,970 Yeah. 1038 01:01:03,970 --> 01:01:06,300 So recurse is going to console long recursion. 1039 01:01:06,300 --> 01:01:08,442 And in return, the return value of recurse. 1040 01:01:08,442 --> 01:01:09,900 What's the return value of resurce? 1041 01:01:09,900 --> 01:01:12,629 Well, it's recurse is return value. 1042 01:01:12,629 --> 01:01:14,670 And so we're going to keep going down that rabbit 1043 01:01:14,670 --> 01:01:17,650 hole until we run out of stack. 1044 01:01:17,650 --> 01:01:22,680 So if we run this, oh, maximum call size exceeded. 1045 01:01:22,680 --> 01:01:25,880 Because if we scroll-- 1046 01:01:25,880 --> 01:01:27,840 I'm actually scrolling. 1047 01:01:27,840 --> 01:01:35,350 There are a lot of these, a lot of them. 1048 01:01:35,350 --> 01:01:38,130 So that's what happens when we run out of stack size. 1049 01:01:38,130 --> 01:01:40,750 1050 01:01:40,750 --> 01:01:41,250 Cool. 1051 01:01:41,250 --> 01:01:44,648 Any questions about the asynchronous JavaScript? 1052 01:01:44,648 --> 01:01:49,630 1053 01:01:49,630 --> 01:01:52,650 So what are some examples of asynchronous functions in JavaScript? 1054 01:01:52,650 --> 01:01:54,280 Well, we saw set time out. 1055 01:01:54,280 --> 01:01:56,380 I alluded to this thing called fetch which is 1056 01:01:56,380 --> 01:02:00,400 the way of fetching network requests. 1057 01:02:00,400 --> 01:02:02,530 JQuery, if you've ever used it, it has a lot 1058 01:02:02,530 --> 01:02:05,740 of asynchronous functions for fetching things like Ajax. 1059 01:02:05,740 --> 01:02:08,200 EXML HTTP request which is built into the browsers 1060 01:02:08,200 --> 01:02:11,830 for fetching things, things like database calls. 1061 01:02:11,830 --> 01:02:15,630 Anything really that relies on something other than the JavaScript 1062 01:02:15,630 --> 01:02:19,631 is going to be asynchronous. 1063 01:02:19,631 --> 01:02:20,130 Cool. 1064 01:02:20,130 --> 01:02:24,490 So what happens if we want something, say we have some asynchronous call, 1065 01:02:24,490 --> 01:02:28,830 and we want to do something with the return value of that call. 1066 01:02:28,830 --> 01:02:31,629 How might we do that? 1067 01:02:31,629 --> 01:02:34,920 Well, we could just wait for it to come back, but that wouldn't be really great 1068 01:02:34,920 --> 01:02:35,580 would it? 1069 01:02:35,580 --> 01:02:40,200 If say we have some web site which is what's shown 1070 01:02:40,200 --> 01:02:42,990 is relying on some database call, we don't 1071 01:02:42,990 --> 01:02:46,200 want to like lock up the entire web site until that database call comes back, 1072 01:02:46,200 --> 01:02:47,040 right? 1073 01:02:47,040 --> 01:02:49,050 That wouldn't be very good for the user. 1074 01:02:49,050 --> 01:02:51,390 The analogy there would be say you wanted to hang out with your friend, 1075 01:02:51,390 --> 01:02:54,240 and you call him, and you say, hey, let's hang out, and he says, 1076 01:02:54,240 --> 01:02:56,280 oh, I'm at work, I'll be done in five hours. 1077 01:02:56,280 --> 01:02:59,200 You don't say, OK, and then just sit there for five hours, right? 1078 01:02:59,200 --> 01:03:00,940 You go ahead and do other stuff. 1079 01:03:00,940 --> 01:03:03,930 And then five hours later, you say, oh, my friend is done with work, 1080 01:03:03,930 --> 01:03:06,220 now let's go do something. 1081 01:03:06,220 --> 01:03:10,890 And so that's exactly how JavaScript's concurrency model or asynchronous model 1082 01:03:10,890 --> 01:03:13,190 works, is this thing called callbacks. 1083 01:03:13,190 --> 01:03:16,920 Callbacks are the way that you control flow with asynchronous calls. 1084 01:03:16,920 --> 01:03:19,740 Or in other word, you execute some function 1085 01:03:19,740 --> 01:03:22,460 as soon as some asynchronous call returns a value. 1086 01:03:22,460 --> 01:03:24,210 And what that means is the program doesn't 1087 01:03:24,210 --> 01:03:25,959 have to halt and wait for that values. 1088 01:03:25,959 --> 01:03:28,500 You don't just sit there until your friend is done with work. 1089 01:03:28,500 --> 01:03:30,870 You go do other stuff, and when he's done then 1090 01:03:30,870 --> 01:03:35,370 you say, OK, now let's go hang out or something. 1091 01:03:35,370 --> 01:03:37,390 Does that make sense? 1092 01:03:37,390 --> 01:03:38,910 You want to see this in action? 1093 01:03:38,910 --> 01:03:54,040 1094 01:03:54,040 --> 01:04:04,930 So let's have this function which takes a callback. 1095 01:04:04,930 --> 01:04:08,810 1096 01:04:08,810 --> 01:04:12,470 Well, first let's just do something and then-- 1097 01:04:12,470 --> 01:04:24,490 1098 01:04:24,490 --> 01:04:29,620 so function do something takes a callback and console logs the result 1099 01:04:29,620 --> 01:04:32,680 of invoking that callback on 1. 1100 01:04:32,680 --> 01:04:35,324 So what type is that call back? 1101 01:04:35,324 --> 01:04:38,582 1102 01:04:38,582 --> 01:04:39,790 It must be a function, right? 1103 01:04:39,790 --> 01:04:41,090 If it's getting invoked. 1104 01:04:41,090 --> 01:04:45,140 And so do something is basically a higher order function 1105 01:04:45,140 --> 01:04:49,860 like we discussed earlier, which takes as an argument some function 1106 01:04:49,860 --> 01:04:51,740 and will invoke it with 1. 1107 01:04:51,740 --> 01:05:00,365 And so say we did do something, let's not even console log. 1108 01:05:00,365 --> 01:05:01,240 Let's just invoke it. 1109 01:05:01,240 --> 01:05:05,980 1110 01:05:05,980 --> 01:05:09,490 And we pass it into do something console dot log. 1111 01:05:09,490 --> 01:05:11,880 What would happen? 1112 01:05:11,880 --> 01:05:15,640 Well, we passed in this function called console dot log to do something. 1113 01:05:15,640 --> 01:05:20,560 And then at line 2, we invoke console dot log with 1. 1114 01:05:20,560 --> 01:05:22,220 And so we expect this to console log 1. 1115 01:05:22,220 --> 01:05:27,710 1116 01:05:27,710 --> 01:05:31,200 But say do something was actually an asynchronous call. 1117 01:05:31,200 --> 01:05:34,830 Say rather than invoking the callback on 1 immediately, 1118 01:05:34,830 --> 01:05:41,720 it did set time out for some number of time, one second. 1119 01:05:41,720 --> 01:05:45,030 1120 01:05:45,030 --> 01:05:48,300 And set time out takes a function that immediately invokes. 1121 01:05:48,300 --> 01:05:52,920 So we'll just create an anonymous function that invokes callback on 1 1122 01:05:52,920 --> 01:05:54,027 in one second. 1123 01:05:54,027 --> 01:05:56,610 Now it's not do something, but rather it's do something async. 1124 01:05:56,610 --> 01:06:08,510 1125 01:06:08,510 --> 01:06:10,140 Now what do we expect to happen? 1126 01:06:10,140 --> 01:06:17,370 Well, one second later, it console logs 1. 1127 01:06:17,370 --> 01:06:19,065 And so this is an example of a callback. 1128 01:06:19,065 --> 01:06:21,630 1129 01:06:21,630 --> 01:06:24,840 So we have some function that does something asynchronously. 1130 01:06:24,840 --> 01:06:30,850 In this case, it returns 1 basically a second later. 1131 01:06:30,850 --> 01:06:34,929 I mean how do we control what we are going to do with that value 1132 01:06:34,929 --> 01:06:35,720 soon as it returns? 1133 01:06:35,720 --> 01:06:39,190 Well, we just pass in a function that says, hey, 1134 01:06:39,190 --> 01:06:41,040 we know that this asynchronous function is 1135 01:06:41,040 --> 01:06:43,740 going to return some value eventually. 1136 01:06:43,740 --> 01:06:45,840 And so let's just pass it a function to handle 1137 01:06:45,840 --> 01:06:47,620 what we're going to do with that value. 1138 01:06:47,620 --> 01:06:52,050 And so with do something async, what we're doing 1139 01:06:52,050 --> 01:06:55,680 is we're passing in a function called console dot log, and what we do 1140 01:06:55,680 --> 01:06:59,190 is we console dot log the return value of the async function whenever 1141 01:06:59,190 --> 01:07:00,976 it decides to return. 1142 01:07:00,976 --> 01:07:02,850 And so for things like network requests where 1143 01:07:02,850 --> 01:07:06,870 we don't know exactly how long it's going to return, what we do is we 1144 01:07:06,870 --> 01:07:10,470 pass in a function that handles the eventual return value. 1145 01:07:10,470 --> 01:07:13,240 And so as soon as that network request comes back, 1146 01:07:13,240 --> 01:07:15,500 then we have the function that will say, oh, I 1147 01:07:15,500 --> 01:07:19,380 know what I'm supposed to do with that network request let me do it. 1148 01:07:19,380 --> 01:07:21,197 Does that pattern make sense? 1149 01:07:21,197 --> 01:07:24,780 1150 01:07:24,780 --> 01:07:26,470 Any questions on callbacks? 1151 01:07:26,470 --> 01:07:33,260 1152 01:07:33,260 --> 01:07:34,400 Great. 1153 01:07:34,400 --> 01:07:37,940 Let's look at an example with callbacks. 1154 01:07:37,940 --> 01:07:42,440 A real life example taken from some code that I've actually written. 1155 01:07:42,440 --> 01:07:45,770 So from personal project of mine, I have this function called log in. 1156 01:07:45,770 --> 01:07:49,160 And what log in does is it has a whole bunch of asynchronous functions. 1157 01:07:49,160 --> 01:07:54,740 So log in takes a request and a result and some callback. 1158 01:07:54,740 --> 01:07:58,670 And so what we're doing basically is we're looking for the user 1159 01:07:58,670 --> 01:08:00,530 by their email. 1160 01:08:00,530 --> 01:08:03,050 This is an asynchronous function. 1161 01:08:03,050 --> 01:08:04,850 And we're passing in a callback with it. 1162 01:08:04,850 --> 01:08:08,720 And this callback takes in an error, if an error occurs, 1163 01:08:08,720 --> 01:08:11,570 and the user, if the user exists. 1164 01:08:11,570 --> 01:08:14,505 And if there's an error, we return this original callback. 1165 01:08:14,505 --> 01:08:16,260 It says, hey, there's an error. 1166 01:08:16,260 --> 01:08:17,962 Let me handle like that. 1167 01:08:17,962 --> 01:08:19,670 Otherwise, there's a user that came back. 1168 01:08:19,670 --> 01:08:22,850 And so let's do this user dot compare password which is asynchronous. 1169 01:08:22,850 --> 01:08:26,090 And so we need to pass in a callback function with that. 1170 01:08:26,090 --> 01:08:29,029 And that callback function is here. 1171 01:08:29,029 --> 01:08:32,930 And so either there is an error or it matches. 1172 01:08:32,930 --> 01:08:35,899 If there's an error, handle that error. 1173 01:08:35,899 --> 01:08:38,760 If there's not a match, say, oh, incorrect password. 1174 01:08:38,760 --> 01:08:42,810 Otherwise, create this token and then sign that token 1175 01:08:42,810 --> 01:08:45,000 which is another asynchronous function. 1176 01:08:45,000 --> 01:08:48,200 It takes a callback which expects and error and a token. 1177 01:08:48,200 --> 01:08:50,240 If there's an error we handle the error. 1178 01:08:50,240 --> 01:08:54,920 Otherwise, we handle that token, save that user, 1179 01:08:54,920 --> 01:08:57,500 which is another asynchronous function. 1180 01:08:57,500 --> 01:08:59,778 And so the callback takes the error. 1181 01:08:59,778 --> 01:09:01,069 If there's an error, handle it. 1182 01:09:01,069 --> 01:09:02,630 Otherwise, return. 1183 01:09:02,630 --> 01:09:08,800 And now we're waiting nested into this what is known as a technical term 1184 01:09:08,800 --> 01:09:09,770 callback hell. 1185 01:09:09,770 --> 01:09:13,850 Basically callback with a callback with a callback 1186 01:09:13,850 --> 01:09:17,180 with a callback and another callback. 1187 01:09:17,180 --> 01:09:19,130 And so that there is called callback hell. 1188 01:09:19,130 --> 01:09:22,399 We see this that kind of looks like a Christmas tree. 1189 01:09:22,399 --> 01:09:25,460 If you've ever seen there are some pictures online of callback hell 1190 01:09:25,460 --> 01:09:28,069 where it's like 10 20 iterations deep. 1191 01:09:28,069 --> 01:09:31,770 And you see basically this Christmas tree of code. 1192 01:09:31,770 --> 01:09:34,550 And that there is the downside of callbacks within callbacks. 1193 01:09:34,550 --> 01:09:36,300 And we're going to take a short break now. 1194 01:09:36,300 --> 01:09:41,149 And after the break, we'll look at some ways of combating this callback hell. 1195 01:09:41,149 --> 01:09:42,390 All right, welcome back. 1196 01:09:42,390 --> 01:09:45,020 Before the break, we were showing this function 1197 01:09:45,020 --> 01:09:47,120 that I wrote on a personal project of mine 1198 01:09:47,120 --> 01:09:49,850 demonstrating this thing that we called call back hell. 1199 01:09:49,850 --> 01:09:55,400 That is callbacks within callbacks within callbacks recursively. 1200 01:09:55,400 --> 01:09:57,410 Which gets a little bit messy and hard to read. 1201 01:09:57,410 --> 01:09:59,540 And I alluded to this thing that we could 1202 01:09:59,540 --> 01:10:03,450 use to alleviate callback hell which is promises. 1203 01:10:03,450 --> 01:10:05,590 So who here has heard of a promise before? 1204 01:10:05,590 --> 01:10:08,140 1205 01:10:08,140 --> 01:10:10,475 Who here has heard of a promise in real life before? 1206 01:10:10,475 --> 01:10:11,350 Hopefully, everybody. 1207 01:10:11,350 --> 01:10:13,330 So what's a promise in real life? 1208 01:10:13,330 --> 01:10:16,840 It's basically you telling somebody that you're 1209 01:10:16,840 --> 01:10:19,180 going to do something eventually, and they can just 1210 01:10:19,180 --> 01:10:21,721 have your word that you are going to do it eventually, right? 1211 01:10:21,721 --> 01:10:24,640 And so that kind of seems like the asynchronous model of JavaScript. 1212 01:10:24,640 --> 01:10:28,540 Whereby you basically get some sort of promise 1213 01:10:28,540 --> 01:10:30,610 that something is eventually going to happen. 1214 01:10:30,610 --> 01:10:36,190 And so JavaScript also has this object called a Promise, capital P, 1215 01:10:36,190 --> 01:10:39,790 whereby you can alleviate callback hell by writing 1216 01:10:39,790 --> 01:10:43,660 code that assumes that a value is going to be returned eventually 1217 01:10:43,660 --> 01:10:45,680 with the access function. 1218 01:10:45,680 --> 01:10:50,590 And a big upside about Promises is that you only need a single error handler. 1219 01:10:50,590 --> 01:10:53,320 And so we saw with the callbacks' example over here, 1220 01:10:53,320 --> 01:10:56,230 we see line 15, if there's an error return this. 1221 01:10:56,230 --> 01:11:00,070 If line 8, if there's an error handle it, line 5, if there's an error 1222 01:11:00,070 --> 01:11:00,710 handle it. 1223 01:11:00,710 --> 01:11:03,450 Like 19, if there's an error, handle it. 1224 01:11:03,450 --> 01:11:05,380 And with Promises what we have-- 1225 01:11:05,380 --> 01:11:07,510 a big advantage of promises is that we don't 1226 01:11:07,510 --> 01:11:10,360 have to handle the error within every single callback. 1227 01:11:10,360 --> 01:11:12,340 We can just do it once and be done. 1228 01:11:12,340 --> 01:11:16,970 So let's go ahead, and let me show you how Promises work. 1229 01:11:16,970 --> 01:11:22,750 1230 01:11:22,750 --> 01:11:25,240 So say we have some function that returns a Promise. 1231 01:11:25,240 --> 01:11:28,360 One of those functions is called fetch. 1232 01:11:28,360 --> 01:11:32,070 And we'll talk about fetch in depth in a few weeks. 1233 01:11:32,070 --> 01:11:35,080 But just take my word for now that fetch returns a Promise. 1234 01:11:35,080 --> 01:11:41,290 So we could do something like fetch some URL. 1235 01:11:41,290 --> 01:11:51,704 1236 01:11:51,704 --> 01:11:53,620 And then we know that fetch returns a Promise. 1237 01:11:53,620 --> 01:11:55,810 And eventually it's going to return to us this URL. 1238 01:11:55,810 --> 01:11:58,600 So we can start to do is write a function that 1239 01:11:58,600 --> 01:12:04,057 expects the response to come back and start handling it already. 1240 01:12:04,057 --> 01:12:05,890 And the way you would do this with a promise 1241 01:12:05,890 --> 01:12:10,300 is this thing called dot then which takes a callback itself. 1242 01:12:10,300 --> 01:12:15,820 So we could have a callback that takes the response 1243 01:12:15,820 --> 01:12:18,080 and does something with it. 1244 01:12:18,080 --> 01:12:21,460 If we want it to then handle that later, we can chain a dot then 1245 01:12:21,460 --> 01:12:30,414 that takes whatever, some JSON maybe, and does something with that. 1246 01:12:30,414 --> 01:12:33,080 And maybe if we wanted to do something with that JSON dot later, 1247 01:12:33,080 --> 01:12:34,230 we can do dot then again. 1248 01:12:34,230 --> 01:12:39,160 1249 01:12:39,160 --> 01:12:41,450 Do something with that. 1250 01:12:41,450 --> 01:12:41,950 So on. 1251 01:12:41,950 --> 01:12:44,540 And we can just keep chaining these thens as long as we want. 1252 01:12:44,540 --> 01:12:47,620 And so this is basically the same as putting a callback 1253 01:12:47,620 --> 01:12:49,300 within a callback within a callback. 1254 01:12:49,300 --> 01:12:54,610 But as you see, we don't keep creating this Christmas tree of callbacks. 1255 01:12:54,610 --> 01:12:57,560 Rather we just chain a new dot then. 1256 01:12:57,560 --> 01:13:00,670 And we don't actually have to worry about handling an error here. 1257 01:13:00,670 --> 01:13:04,700 1258 01:13:04,700 --> 01:13:06,545 Instead, what we can do is a dot catch. 1259 01:13:06,545 --> 01:13:12,940 1260 01:13:12,940 --> 01:13:15,310 And this catch function down here will actually 1261 01:13:15,310 --> 01:13:20,537 handle any errors that get thrown in any of the preceding then statements. 1262 01:13:20,537 --> 01:13:22,120 And so we could handle the error here. 1263 01:13:22,120 --> 01:13:25,000 1264 01:13:25,000 --> 01:13:27,190 And we would not actually have to do it in any 1265 01:13:27,190 --> 01:13:31,437 of the then statements over here. 1266 01:13:31,437 --> 01:13:34,520 And so something that you might see, we'll discuss this in later lectures. 1267 01:13:34,520 --> 01:13:38,470 But you might see something like return res dot JSON. 1268 01:13:38,470 --> 01:13:44,710 Which is basically saying extract the JSON out of this result. 1269 01:13:44,710 --> 01:13:54,190 And here you might be doing something like return only the important parts 1270 01:13:54,190 --> 01:13:55,070 of the data maybe. 1271 01:13:55,070 --> 01:14:02,372 We could do like important data is JSON dot important. 1272 01:14:02,372 --> 01:14:07,430 1273 01:14:07,430 --> 01:14:08,341 And so on. 1274 01:14:08,341 --> 01:14:11,090 And maybe down here we eventually want to just console dot log it. 1275 01:14:11,090 --> 01:14:13,960 1276 01:14:13,960 --> 01:14:17,810 And so this would be an example of using a Promise 1277 01:14:17,810 --> 01:14:23,180 rather than using callbacks within callbacks within callbacks. 1278 01:14:23,180 --> 01:14:25,550 And so let's actually refactor my old authentication 1279 01:14:25,550 --> 01:14:27,290 code to use these Promises. 1280 01:14:27,290 --> 01:14:43,220 1281 01:14:43,220 --> 01:14:46,334 So here we have a bunch of callbacks. 1282 01:14:46,334 --> 01:14:48,500 And one thing that we know is that we don't actually 1283 01:14:48,500 --> 01:14:50,170 have to handle any of the errors. 1284 01:14:50,170 --> 01:14:53,455 So first thing that we do is we're going to do user dot find 1. 1285 01:14:53,455 --> 01:14:57,550 1286 01:14:57,550 --> 01:14:58,450 So basically this. 1287 01:14:58,450 --> 01:15:02,330 1288 01:15:02,330 --> 01:15:05,620 And so before let me show you a before and after. 1289 01:15:05,620 --> 01:15:09,760 1290 01:15:09,760 --> 01:15:11,580 Before we had this function called user dot 1291 01:15:11,580 --> 01:15:15,830 find 1 which takes in basically the query that we're looking for 1292 01:15:15,830 --> 01:15:17,780 as well as the callback function. 1293 01:15:17,780 --> 01:15:20,060 But rather than passing in a callback function, 1294 01:15:20,060 --> 01:15:22,520 we can actually, since this does return a Promise, 1295 01:15:22,520 --> 01:15:32,120 we can do a dot then that has a callback function which expects a user. 1296 01:15:32,120 --> 01:15:35,180 And so we've started to start refactor line 5 here. 1297 01:15:35,180 --> 01:15:37,360 So rather than passing a callback function 1298 01:15:37,360 --> 01:15:42,319 that takes an error in the user, we just do a dot then that handles the user. 1299 01:15:42,319 --> 01:15:43,610 And how do we handle the error? 1300 01:15:43,610 --> 01:15:47,851 Well, we just have a dot catch dot error. 1301 01:15:47,851 --> 01:15:51,027 1302 01:15:51,027 --> 01:15:52,610 And what have we been doing with that? 1303 01:15:52,610 --> 01:15:54,985 Well, if there's an error, we just return callback error. 1304 01:15:54,985 --> 01:15:58,700 1305 01:15:58,700 --> 01:16:00,700 So we can do that in the [? catch lock ?] there. 1306 01:16:00,700 --> 01:16:03,770 And now we're done handling errors for the rest of the Promise. 1307 01:16:03,770 --> 01:16:05,700 And so we can get rid of line 11. 1308 01:16:05,700 --> 01:16:07,120 You can get rid of line 17. 1309 01:16:07,120 --> 01:16:08,370 And we can get rid of line 20. 1310 01:16:08,370 --> 01:16:11,220 1311 01:16:11,220 --> 01:16:15,340 Now we can get rid of 10 since we already refactored it out. 1312 01:16:15,340 --> 01:16:16,870 Then what do we do with that user? 1313 01:16:16,870 --> 01:16:20,992 Well, you can cut and paste that into there. 1314 01:16:20,992 --> 01:16:22,450 So we want to compare the password. 1315 01:16:22,450 --> 01:16:25,770 And compare password takes in a password as well as a callback. 1316 01:16:25,770 --> 01:16:28,210 And so let's go ahead and return that. 1317 01:16:28,210 --> 01:16:32,850 And then handle that callback with another then instead. 1318 01:16:32,850 --> 01:16:38,490 And so rather than having a callback that expects an error and is a match, 1319 01:16:38,490 --> 01:16:41,770 we can just only handle that is match case. 1320 01:16:41,770 --> 01:16:49,510 1321 01:16:49,510 --> 01:16:52,610 And so what do we do if there's not a match? 1322 01:16:52,610 --> 01:16:55,510 Then we want to tell them there's an incorrect password in return. 1323 01:16:55,510 --> 01:16:59,003 1324 01:16:59,003 --> 01:17:11,940 Otherwise, we want to take what the payload is 1325 01:17:11,940 --> 01:17:17,960 and return this new [? jot ?] sign Promise. 1326 01:17:17,960 --> 01:17:19,530 So let's do this. 1327 01:17:19,530 --> 01:17:20,430 Copy and paste this. 1328 01:17:20,430 --> 01:17:25,220 1329 01:17:25,220 --> 01:17:28,220 Get rid of that callback which expects an error and a token. 1330 01:17:28,220 --> 01:17:33,260 And, instead, return that, and handle that in another then. 1331 01:17:33,260 --> 01:17:41,580 1332 01:17:41,580 --> 01:17:43,407 What did we expect? 1333 01:17:43,407 --> 01:17:44,240 We expected a token. 1334 01:17:44,240 --> 01:17:50,590 1335 01:17:50,590 --> 01:17:51,660 And what do we do? 1336 01:17:51,660 --> 01:17:52,560 We do this. 1337 01:17:52,560 --> 01:17:57,850 1338 01:17:57,850 --> 01:18:00,670 And user dot save, it looks like it takes another callback which 1339 01:18:00,670 --> 01:18:02,350 is only looking for the error. 1340 01:18:02,350 --> 01:18:04,675 So we could return user dot save. 1341 01:18:04,675 --> 01:18:08,900 1342 01:18:08,900 --> 01:18:25,270 And then, finally, do that. 1343 01:18:25,270 --> 01:18:27,925 And then we get to get rid of all these closing curly brackets. 1344 01:18:27,925 --> 01:18:30,920 1345 01:18:30,920 --> 01:18:38,620 And that there is our new login function with Promises rather than callbacks. 1346 01:18:38,620 --> 01:18:44,620 1347 01:18:44,620 --> 01:18:48,480 Did that refactor make sense to everybody? 1348 01:18:48,480 --> 01:18:56,540 And does this Promise structure look nicer than the callback structure? 1349 01:18:56,540 --> 01:18:59,720 This is something we're going to go into a lot more depth in when 1350 01:18:59,720 --> 01:19:02,480 we talk about data in a few weeks. 1351 01:19:02,480 --> 01:19:05,071 But do Promises in general make sense to people? 1352 01:19:05,071 --> 01:19:07,440 1353 01:19:07,440 --> 01:19:07,940 Yeah. 1354 01:19:07,940 --> 01:19:21,660 AUDIENCE: [INAUDIBLE] 1355 01:19:21,660 --> 01:19:24,540 SPEAKER 1: So, yeah the question is how does the catch function 1356 01:19:24,540 --> 01:19:27,460 know when to get invoked basically? 1357 01:19:27,460 --> 01:19:30,480 And basically this is all so user dot find 1358 01:19:30,480 --> 01:19:37,650 1 dot then dot then dot catch is all one big basically Promise handling chain. 1359 01:19:37,650 --> 01:19:40,620 And promises, which are built in, know exactly what 1360 01:19:40,620 --> 01:19:41,829 to do when an error is found. 1361 01:19:41,829 --> 01:19:44,203 So if an error is found, it'll just march down that chain 1362 01:19:44,203 --> 01:19:46,000 until it finds a catch statement. 1363 01:19:46,000 --> 01:19:50,820 And then it will invoke that callback with that error object. 1364 01:19:50,820 --> 01:19:52,668 AUDIENCE: But that's not [INAUDIBLE] 1365 01:19:52,668 --> 01:19:55,552 SPEAKER 1: And it stops future thens from happening. 1366 01:19:55,552 --> 01:20:01,940 1367 01:20:01,940 --> 01:20:03,740 Any questions on promises? 1368 01:20:03,740 --> 01:20:06,700 Again, we'll dive more deeply into them in coming weeks. 1369 01:20:06,700 --> 01:20:07,200 Yeah. 1370 01:20:07,200 --> 01:20:09,152 AUDIENCE: So a Promise is a good solution 1371 01:20:09,152 --> 01:20:12,568 for all the bad stuff what comes with callbacks where what is the trade off? 1372 01:20:12,568 --> 01:20:17,413 What can you do with this that [INAUDIBLE] you still have 1373 01:20:17,413 --> 01:20:18,912 to go back to callbacks [INAUDIBLE]? 1374 01:20:18,912 --> 01:20:20,995 SPEAKER 1: So the question is what's the trade off 1375 01:20:20,995 --> 01:20:22,310 between callbacks and Promises? 1376 01:20:22,310 --> 01:20:27,350 And what, if anything, do we lose when using Promises over callbacks? 1377 01:20:27,350 --> 01:20:30,260 The answer is not really much. 1378 01:20:30,260 --> 01:20:34,891 Most things are migrating from the callbacks of the past to now Promises. 1379 01:20:34,891 --> 01:20:36,890 But Promises were something that were introduced 1380 01:20:36,890 --> 01:20:38,990 fairly recently to JavaScript. 1381 01:20:38,990 --> 01:20:42,820 Which is the reason that callbacks still exist a lot in legacy code. 1382 01:20:42,820 --> 01:20:45,870 1383 01:20:45,870 --> 01:20:47,960 And so what is the future? 1384 01:20:47,960 --> 01:20:53,170 So right now, Promises are very popular. 1385 01:20:53,170 --> 01:20:55,840 But there's a new way of handling asynchronous things that's 1386 01:20:55,840 --> 01:20:57,560 coming in the future. 1387 01:20:57,560 --> 01:21:01,420 So there's this thing called AsyncAwait which is actually introduced in ES 2017 1388 01:21:01,420 --> 01:21:05,380 which is the next, next maybe. 1389 01:21:05,380 --> 01:21:08,690 So ES 2017 has been finalized. 1390 01:21:08,690 --> 01:21:11,770 But it's still not adopted by everything. 1391 01:21:11,770 --> 01:21:15,460 But AsyncAwait is included in that ES 2017 spec. 1392 01:21:15,460 --> 01:21:20,194 And it allows people to write async code as if it were actually synchronous. 1393 01:21:20,194 --> 01:21:22,360 And so we're not going to dive too deeply into this. 1394 01:21:22,360 --> 01:21:25,035 But I thought I could just show you quickly a refactor 1395 01:21:25,035 --> 01:21:29,692 of what we've done so far to use this AsyncAwait rather than the Promise 1396 01:21:29,692 --> 01:21:30,192 syntax. 1397 01:21:30,192 --> 01:21:48,070 1398 01:21:48,070 --> 01:21:53,300 So right now log in is a big Promise chain. 1399 01:21:53,300 --> 01:21:57,050 And if we refactored it using this new AsyncAwait syntax, 1400 01:21:57,050 --> 01:21:59,990 we can actually make it look very synchronous. 1401 01:21:59,990 --> 01:22:03,350 So first thing that we need to do is add an async keyword 1402 01:22:03,350 --> 01:22:07,100 to the function which is letting the JavaScript interpreter know, hey, 1403 01:22:07,100 --> 01:22:10,850 this function is async which means handle it appropriately. 1404 01:22:10,850 --> 01:22:12,770 Which is basically what it does is allows 1405 01:22:12,770 --> 01:22:17,360 us to use this other key word called await which will functionally just 1406 01:22:17,360 --> 01:22:19,770 wait for a value to come back before continuing the code. 1407 01:22:19,770 --> 01:22:23,240 But it does this asynchronously behind the hood. 1408 01:22:23,240 --> 01:22:28,630 So basically what user dot find 1 dot then function user is doing 1409 01:22:28,630 --> 01:22:32,330 is waiting for a user dot find 1 to return with some value, which 1410 01:22:32,330 --> 01:22:33,640 is going to be that user. 1411 01:22:33,640 --> 01:22:35,510 And so if we were writing synchronous code, 1412 01:22:35,510 --> 01:22:41,930 we might do something like const user equals the value of user dot find 1. 1413 01:22:41,930 --> 01:22:44,560 1414 01:22:44,560 --> 01:22:46,460 And if we were using AsyncAwait syntax, we 1415 01:22:46,460 --> 01:22:49,904 could basically do that by saying const user is user dot find 1. 1416 01:22:49,904 --> 01:22:52,820 But we know that user dot find 1 is actually an asynchronous function. 1417 01:22:52,820 --> 01:22:56,630 So we actually have to just wait for that response to come back. 1418 01:22:56,630 --> 01:22:59,360 And so if we use that await keyword, it's 1419 01:22:59,360 --> 01:23:03,510 basically saying, hey, wait for that result to come back. 1420 01:23:03,510 --> 01:23:07,370 But don't actually just like stop and wait, just 1421 01:23:07,370 --> 01:23:10,550 wait behind the scenes asynchronously. 1422 01:23:10,550 --> 01:23:13,550 And so what might we want to do, well, then next 1423 01:23:13,550 --> 01:23:17,990 we want to do user dot compare password which gives us this thing called 1424 01:23:17,990 --> 01:23:20,210 is match, and so if we're doing this synchronously, 1425 01:23:20,210 --> 01:23:23,840 we might do something like const is match 1426 01:23:23,840 --> 01:23:27,275 equals await user dot compare password. 1427 01:23:27,275 --> 01:23:32,826 1428 01:23:32,826 --> 01:23:33,778 body.password. 1429 01:23:33,778 --> 01:23:37,330 1430 01:23:37,330 --> 01:23:39,330 Then this is basically asynchronous code, right? 1431 01:23:39,330 --> 01:23:44,230 We can do if it's a match, do this and return. 1432 01:23:44,230 --> 01:23:46,870 1433 01:23:46,870 --> 01:23:53,905 Otherwise, create this payload. 1434 01:23:53,905 --> 01:23:58,940 1435 01:23:58,940 --> 01:24:02,710 And then sign dot jot which will give us a token back. 1436 01:24:02,710 --> 01:24:07,189 1437 01:24:07,189 --> 01:24:08,980 But since this is an asynchronous function, 1438 01:24:08,980 --> 01:24:11,670 we have to use that await key word. 1439 01:24:11,670 --> 01:24:12,170 Then what? 1440 01:24:12,170 --> 01:24:14,320 Now we have the token, so let's do these things. 1441 01:24:14,320 --> 01:24:17,920 1442 01:24:17,920 --> 01:24:23,000 And rather than returning user dot save, which is what we would do in a Promise, 1443 01:24:23,000 --> 01:24:25,710 well, we just want to make sure that it succeeded. 1444 01:24:25,710 --> 01:24:29,730 So we can do const success equals that. 1445 01:24:29,730 --> 01:24:31,790 And as long as that works, then we can go ahead 1446 01:24:31,790 --> 01:24:34,600 and do res dot JSON with that token. 1447 01:24:34,600 --> 01:24:38,360 1448 01:24:38,360 --> 01:24:40,400 And now we're basically done. 1449 01:24:40,400 --> 01:24:45,590 What's one thing that we haven't handled? 1450 01:24:45,590 --> 01:24:48,569 The case where one of these things errors. 1451 01:24:48,569 --> 01:24:50,360 And so we haven't talked about this before, 1452 01:24:50,360 --> 01:24:54,230 but JavaScript actually has this thing called try catch 1453 01:24:54,230 --> 01:24:56,600 which allows us to try to do some code. 1454 01:24:56,600 --> 01:25:01,580 And if an error happens, intercept that error and handle it in code 1455 01:25:01,580 --> 01:25:04,850 rather than delegating to the browser's error handling. 1456 01:25:04,850 --> 01:25:11,948 And so what we can do is we can actually wrap all of this logic in a tri lock 1457 01:25:11,948 --> 01:25:17,150 and catch any errors and handle those appropriately. 1458 01:25:17,150 --> 01:25:21,200 Which is basically by invoking the callback that's passed into this login 1459 01:25:21,200 --> 01:25:23,720 function with the error. 1460 01:25:23,720 --> 01:25:30,247 We're done with error handling, and we can just style this appropriately. 1461 01:25:30,247 --> 01:25:33,830 1462 01:25:33,830 --> 01:25:37,380 And so now with this new AsyncAwait syntax, 1463 01:25:37,380 --> 01:25:40,730 we can write async functions in a more synchronous manner. 1464 01:25:40,730 --> 01:25:48,154 But everything behind the hoods is still running asynchronously. 1465 01:25:48,154 --> 01:25:50,150 Oops. 1466 01:25:50,150 --> 01:25:53,643 One thing we forgot to do is await this value. 1467 01:25:53,643 --> 01:25:56,150 1468 01:25:56,150 --> 01:25:57,864 Any questions on this syntax? 1469 01:25:57,864 --> 01:26:00,530 Again, this is something that will dive more deeply into as soon 1470 01:26:00,530 --> 01:26:03,527 as we get into actual data handling in the future. 1471 01:26:03,527 --> 01:26:06,940 1472 01:26:06,940 --> 01:26:13,120 As a random poll, who prefers callbacks over everything we've seen today? 1473 01:26:13,120 --> 01:26:16,060 Who prefers Promises? 1474 01:26:16,060 --> 01:26:19,280 And who prefers AsyncAwait? 1475 01:26:19,280 --> 01:26:21,670 About 50-50 actually. 1476 01:26:21,670 --> 01:26:22,170 Cool. 1477 01:26:22,170 --> 01:26:23,530 Noted. 1478 01:26:23,530 --> 01:26:26,460 And people online do just drop something and slack, 1479 01:26:26,460 --> 01:26:28,946 and I will take your votes into account. 1480 01:26:28,946 --> 01:26:31,590 1481 01:26:31,590 --> 01:26:32,090 Cool. 1482 01:26:32,090 --> 01:26:34,298 So let's pivot a little bit from asynchronous actions 1483 01:26:34,298 --> 01:26:36,680 and talk about this. 1484 01:26:36,680 --> 01:26:39,320 And by this, I literally mean this. 1485 01:26:39,320 --> 01:26:44,590 So who here has seen this keyword called this in JavaScript before? 1486 01:26:44,590 --> 01:26:48,330 Who here seen this in other languages? 1487 01:26:48,330 --> 01:26:52,639 So this in JavaScript is slightly different than other languages 1488 01:26:52,639 --> 01:26:53,930 sometimes in confusing manners. 1489 01:26:53,930 --> 01:26:58,200 But, hopefully, by the end of this lecture, it will not be confusing. 1490 01:26:58,200 --> 01:27:00,575 So this basically refers to an object that's is 1491 01:27:00,575 --> 01:27:03,380 set at the creation of a new execution context or in other words 1492 01:27:03,380 --> 01:27:06,680 a function invocation in other words another stack frame on that 1493 01:27:06,680 --> 01:27:10,830 stack that we drew earlier today. 1494 01:27:10,830 --> 01:27:14,450 And in the global execution contests, or basically 1495 01:27:14,450 --> 01:27:21,290 the window console or the node REPL or the function that gets invoked in node, 1496 01:27:21,290 --> 01:27:22,820 it refers to a global object. 1497 01:27:22,820 --> 01:27:26,540 1498 01:27:26,540 --> 01:27:30,590 And if a function is called as a method of an object, or in other words, 1499 01:27:30,590 --> 01:27:36,500 a method is basically a term for a key value pair in an object 1500 01:27:36,500 --> 01:27:39,170 where the value is a function. 1501 01:27:39,170 --> 01:27:41,450 That key is considered a method. 1502 01:27:41,450 --> 01:27:44,270 So if a function is called as a method of an object, 1503 01:27:44,270 --> 01:27:49,937 this is bound to that object that function is called on. 1504 01:27:49,937 --> 01:27:51,270 So what the heck does that mean? 1505 01:27:51,270 --> 01:27:58,360 Well, so let's just demonstrate in node. 1506 01:27:58,360 --> 01:28:03,200 If we just type this, we get back that big global object. 1507 01:28:03,200 --> 01:28:09,580 1508 01:28:09,580 --> 01:28:14,270 In the browser console, if we type this, we get back that window. 1509 01:28:14,270 --> 01:28:17,590 So as we discussed last week, we saw that window was indeed 1510 01:28:17,590 --> 01:28:23,620 the global object in the scope of the browser console. 1511 01:28:23,620 --> 01:28:32,720 And how might we write something such that this gets bound to other objects? 1512 01:28:32,720 --> 01:28:39,663 So let's write 12 this. 1513 01:28:39,663 --> 01:28:42,540 1514 01:28:42,540 --> 01:28:43,340 Cool. 1515 01:28:43,340 --> 01:28:48,660 And so I mentioned that if a function is called as a method of an object, this, 1516 01:28:48,660 --> 01:28:54,290 is the key word this, gets bound to the method that the functions is called on, 1517 01:28:54,290 --> 01:28:56,100 or the object that the method is called on. 1518 01:28:56,100 --> 01:28:57,516 So let's just create some objects. 1519 01:28:57,516 --> 01:29:02,320 So let's do const person is somebody with a name. 1520 01:29:02,320 --> 01:29:05,510 1521 01:29:05,510 --> 01:29:07,220 And let's have a function called greet. 1522 01:29:07,220 --> 01:29:21,240 1523 01:29:21,240 --> 01:29:26,040 So in line 3, I'm using this thing called this dot name. 1524 01:29:26,040 --> 01:29:30,900 And this is part of a function which is defined as a method on this object. 1525 01:29:30,900 --> 01:29:35,680 Remember, a method is just a key where the value is a function. 1526 01:29:35,680 --> 01:29:38,850 And so in this case, person dot greet is considered a method 1527 01:29:38,850 --> 01:29:41,410 because greet is this function. 1528 01:29:41,410 --> 01:29:50,970 And so if we call person dot greet, this gets bound to person. 1529 01:29:50,970 --> 01:29:56,440 And so this dot name becomes the value of person dot name, which in this case 1530 01:29:56,440 --> 01:29:57,520 is Jordan. 1531 01:29:57,520 --> 01:30:06,100 So if you were to run this, we see Jordan [? Gifts. ?] Printed. 1532 01:30:06,100 --> 01:30:08,910 Let's make this more of a greet by doing hello. 1533 01:30:08,910 --> 01:30:14,720 1534 01:30:14,720 --> 01:30:17,845 Then we see hello, Jordan. 1535 01:30:17,845 --> 01:30:22,282 1536 01:30:22,282 --> 01:30:36,780 But what happens if we want to do something like this? 1537 01:30:36,780 --> 01:30:39,470 1538 01:30:39,470 --> 01:30:41,540 What might we expect to happen in this case? 1539 01:30:41,540 --> 01:30:44,360 1540 01:30:44,360 --> 01:30:48,020 So we declare this global const called greet. 1541 01:30:48,020 --> 01:30:53,344 Global meaning it's outside the other object. 1542 01:30:53,344 --> 01:30:55,010 And we set it equal to person dot greet. 1543 01:30:55,010 --> 01:30:58,400 And so, basically, greet right now is a function 1544 01:30:58,400 --> 01:31:02,550 that console dot logs hello this dot name. 1545 01:31:02,550 --> 01:31:04,200 So what is this in that case? 1546 01:31:04,200 --> 01:31:07,490 1547 01:31:07,490 --> 01:31:12,180 So first we have to find where is this function getting invoked? 1548 01:31:12,180 --> 01:31:14,080 That's at line 10, right? 1549 01:31:14,080 --> 01:31:17,813 It gets defined at line 8, but it gets invoked at line 10. 1550 01:31:17,813 --> 01:31:22,240 1551 01:31:22,240 --> 01:31:27,280 And so what is the value of this here? 1552 01:31:27,280 --> 01:31:29,220 AUDIENCE: It's a global object? 1553 01:31:29,220 --> 01:31:29,990 SPEAKER 1: Yeah. 1554 01:31:29,990 --> 01:31:32,280 It's a global object. 1555 01:31:32,280 --> 01:31:34,030 And so what is the value of this dot name? 1556 01:31:34,030 --> 01:31:38,503 AUDIENCE: [INAUDIBLE] 1557 01:31:38,503 --> 01:31:44,970 SPEAKER 1: So yeah, name is not actually a key on that global object. 1558 01:31:44,970 --> 01:31:48,030 And so if we try to de-reference a key that doesn't exist on an object, 1559 01:31:48,030 --> 01:31:49,510 we get undefined. 1560 01:31:49,510 --> 01:31:53,080 And so if we do this, we're going to get hello undefined. 1561 01:31:53,080 --> 01:31:57,526 1562 01:31:57,526 --> 01:31:59,137 Does that make sense? 1563 01:31:59,137 --> 01:32:03,040 1564 01:32:03,040 --> 01:32:10,480 But what if we were to create some other object called student? 1565 01:32:10,480 --> 01:32:14,780 1566 01:32:14,780 --> 01:32:17,669 Let's call it friend. 1567 01:32:17,669 --> 01:32:19,210 I mean a friend has a different name. 1568 01:32:19,210 --> 01:32:25,280 1569 01:32:25,280 --> 01:32:26,280 But their name is David. 1570 01:32:26,280 --> 01:32:29,340 1571 01:32:29,340 --> 01:32:38,260 And how if we did something like friend dot greet equals person dot greet. 1572 01:32:38,260 --> 01:32:44,990 1573 01:32:44,990 --> 01:32:46,970 So now what do you expect to happen? 1574 01:32:46,970 --> 01:32:50,630 So where does greet in this case get invoked? 1575 01:32:50,630 --> 01:32:53,920 1576 01:32:53,920 --> 01:32:55,570 Line 14. 1577 01:32:55,570 --> 01:32:59,410 And what is it getting invoked on? 1578 01:32:59,410 --> 01:33:02,080 Right now it's a method of another object, right? 1579 01:33:02,080 --> 01:33:03,430 And so what I object is that? 1580 01:33:03,430 --> 01:33:05,360 Well, that's friend. 1581 01:33:05,360 --> 01:33:08,930 And so what does this get bound to? 1582 01:33:08,930 --> 01:33:10,360 It gets bound to friend. 1583 01:33:10,360 --> 01:33:13,960 And so what is friend dot name? 1584 01:33:13,960 --> 01:33:15,640 In this case, it should be David. 1585 01:33:15,640 --> 01:33:18,266 So let's try running this. 1586 01:33:18,266 --> 01:33:19,745 And we get hello, David. 1587 01:33:19,745 --> 01:33:25,168 1588 01:33:25,168 --> 01:33:26,647 Does this make sense? 1589 01:33:26,647 --> 01:33:37,000 1590 01:33:37,000 --> 01:33:39,075 So now-- Yeah. 1591 01:33:39,075 --> 01:33:41,175 AUDIENCE: [INAUDIBLE] really explicit and instead 1592 01:33:41,175 --> 01:33:44,796 of saying this you could have just referenced to context 1593 01:33:44,796 --> 01:33:48,282 as you are typing you know what the developing context is. 1594 01:33:48,282 --> 01:33:53,760 So is this should it be thought of just a useful short cut or? 1595 01:33:53,760 --> 01:33:56,220 SPEAKER 1: So the question is for the camera, 1596 01:33:56,220 --> 01:33:59,310 is this should it be thought of as some sort of useful shortcut? 1597 01:33:59,310 --> 01:34:02,940 1598 01:34:02,940 --> 01:34:04,410 In a way, yes. 1599 01:34:04,410 --> 01:34:08,640 It's a way of using a variable. 1600 01:34:08,640 --> 01:34:12,030 And we don't yet know exactly what that variable is going to be bound to. 1601 01:34:12,030 --> 01:34:15,060 Because in the case of person, we know that this dot name 1602 01:34:15,060 --> 01:34:17,350 is going to be equal to that person. 1603 01:34:17,350 --> 01:34:18,960 But that's not always the case, right? 1604 01:34:18,960 --> 01:34:25,110 As we saw if we take this greet method on person and assign it to friend, 1605 01:34:25,110 --> 01:34:27,240 this dot name is not person dot name. 1606 01:34:27,240 --> 01:34:29,930 In that case, it's going to be friend dot name. 1607 01:34:29,930 --> 01:34:35,160 And so it's kind of a way of using a value that we don't yet 1608 01:34:35,160 --> 01:34:38,580 know what it's going to be until we go ahead and invoke that function. 1609 01:34:38,580 --> 01:34:41,590 1610 01:34:41,590 --> 01:34:44,550 And when we start handling events and stuff and react 1611 01:34:44,550 --> 01:34:48,220 and stuff like that, we will see or even react components and stuff like that, 1612 01:34:48,220 --> 01:34:50,850 which is coming in the next lecture, we'll 1613 01:34:50,850 --> 01:34:55,845 start to see exactly why this, a key word called this, is useful. 1614 01:34:55,845 --> 01:35:02,080 1615 01:35:02,080 --> 01:35:02,580 Cool. 1616 01:35:02,580 --> 01:35:04,520 And now let's do a challenge together. 1617 01:35:04,520 --> 01:35:10,087 Let's try to get line 18 to greet somebody. 1618 01:35:10,087 --> 01:35:12,522 How might we go about doing that? 1619 01:35:12,522 --> 01:35:21,300 1620 01:35:21,300 --> 01:35:24,570 So what does this greet function do? 1621 01:35:24,570 --> 01:35:30,940 1622 01:35:30,940 --> 01:35:37,110 This greet function just does console.log hello to this dot name. 1623 01:35:37,110 --> 01:35:39,290 And so we need to figure out some sort of way 1624 01:35:39,290 --> 01:35:44,360 that when line 18 gets invoked, that this dot name is bound to some variable 1625 01:35:44,360 --> 01:35:47,050 that we want. 1626 01:35:47,050 --> 01:35:50,270 So there are a few different ways to do this. 1627 01:35:50,270 --> 01:35:52,700 Let's see if we can figure one out together. 1628 01:35:52,700 --> 01:35:53,200 Yeah. 1629 01:35:53,200 --> 01:35:58,744 AUDIENCE: [INAUDIBLE] 1630 01:35:58,744 --> 01:35:59,610 SPEAKER 1: Yeah. 1631 01:35:59,610 --> 01:36:02,580 One way is we could put the name property on the global object. 1632 01:36:02,580 --> 01:36:06,990 So we could do something like do you think it matters 1633 01:36:06,990 --> 01:36:11,070 whether I do it on line 15,17, line 1? 1634 01:36:11,070 --> 01:36:15,915 Where should I put this? 1635 01:36:15,915 --> 01:36:25,130 AUDIENCE: [INAUDIBLE] global object [INAUDIBLE] 1636 01:36:25,130 --> 01:36:25,990 SPEAKER 1: Yeah. 1637 01:36:25,990 --> 01:36:27,100 So the answer is yeah. 1638 01:36:27,100 --> 01:36:29,260 It doesn't matter where I declare this. 1639 01:36:29,260 --> 01:36:33,400 Because as long as it happens before line 18, this dot name will exist. 1640 01:36:33,400 --> 01:36:40,040 So I could do something like this dot name equals Johan. 1641 01:36:40,040 --> 01:36:43,000 Who is one of our teaching assistants. 1642 01:36:43,000 --> 01:36:48,910 And line 20 would now say hello Johan. 1643 01:36:48,910 --> 01:36:51,040 Actually there's a small caveat here. 1644 01:36:51,040 --> 01:36:57,400 The way that node evaluates files, it actually 1645 01:36:57,400 --> 01:37:01,270 won't work if we just invoke this by doing node 12. 1646 01:37:01,270 --> 01:37:03,130 It's still going to be undefined there. 1647 01:37:03,130 --> 01:37:05,046 That's just I'm going to wave my hand for now. 1648 01:37:05,046 --> 01:37:09,220 It's the way that node handles invoking files under the hood. 1649 01:37:09,220 --> 01:37:13,780 But if we actually did this in the node console right here, 1650 01:37:13,780 --> 01:37:23,010 if we did const person equals name greet is the function. 1651 01:37:23,010 --> 01:37:27,060 1652 01:37:27,060 --> 01:37:28,470 Just console logs hi. 1653 01:37:28,470 --> 01:37:50,560 1654 01:37:50,560 --> 01:37:57,250 So if I did person dot greet here, we see hi, Jordan as expected. 1655 01:37:57,250 --> 01:38:01,810 And now if we did something like const greet equals greet. 1656 01:38:01,810 --> 01:38:07,570 1657 01:38:07,570 --> 01:38:10,740 We call greet there, we see hi undefined as expected. 1658 01:38:10,740 --> 01:38:15,550 And now if we did something like this dot name equals Johann. 1659 01:38:15,550 --> 01:38:18,560 1660 01:38:18,560 --> 01:38:23,780 Now if we did greet, we see hi, Johann as expected. 1661 01:38:23,780 --> 01:38:24,350 Why? 1662 01:38:24,350 --> 01:38:31,550 Well, because if we do this, we see that this has a key called 1663 01:38:31,550 --> 01:38:33,810 name which is equaled to Johann. 1664 01:38:33,810 --> 01:38:36,750 1665 01:38:36,750 --> 01:38:39,480 Does that make sense to everybody? 1666 01:38:39,480 --> 01:38:43,050 Again, I'm going to wave my hand at the why this doesn't work in the node the 1667 01:38:43,050 --> 01:38:50,100 execute a file, but it does indeed work if we try to do it in the node REPL, 1668 01:38:50,100 --> 01:38:54,690 or if we want to do it in the browser console, it would also work. 1669 01:38:54,690 --> 01:38:55,290 m. 1670 01:38:55,290 --> 01:38:59,560 So I mentioned that there are other ways of setting this manually. 1671 01:38:59,560 --> 01:39:01,590 And there actually are. 1672 01:39:01,590 --> 01:39:04,830 So there's these functions called bind, call, and apply. 1673 01:39:04,830 --> 01:39:07,410 And all of these take at least one argument 1674 01:39:07,410 --> 01:39:12,510 where the first argument is explicitly what you want to set this to be. 1675 01:39:12,510 --> 01:39:19,040 And so if we were to go back into that example, 1676 01:39:19,040 --> 01:39:24,380 and here we wanted to do if we deleted this, 1677 01:39:24,380 --> 01:39:32,130 and we did const greet equals person dot greet dot explicitly bind, 1678 01:39:32,130 --> 01:39:35,940 we can define some any object that we want here, 1679 01:39:35,940 --> 01:39:39,790 and that's what we'll get bound to the this in this particular function. 1680 01:39:39,790 --> 01:39:43,080 So if we did bind it to some object where 1681 01:39:43,080 --> 01:39:52,450 the name is this is a bound object then if we ran this, 1682 01:39:52,450 --> 01:39:54,580 we would see hello, this is a bound object. 1683 01:39:54,580 --> 01:39:58,960 Because we are explicitly bound the this in this particular 1684 01:39:58,960 --> 01:40:00,920 function to be this particular object. 1685 01:40:00,920 --> 01:40:05,730 1686 01:40:05,730 --> 01:40:08,300 Does that make sense? 1687 01:40:08,300 --> 01:40:11,270 And the difference between bind and call and apply 1688 01:40:11,270 --> 01:40:15,540 is that call and apply rather than returning a new function because person 1689 01:40:15,540 --> 01:40:19,130 dot greet dot bind returns a new function where 1690 01:40:19,130 --> 01:40:23,810 the this is automatically bound, call and apply 1691 01:40:23,810 --> 01:40:25,890 will immediately invoke that function. 1692 01:40:25,890 --> 01:40:30,170 So rather than doing const greet equals that if we wanted to use call or apply, 1693 01:40:30,170 --> 01:40:37,307 we'd would do just person dot greet dot call and then pass in something there. 1694 01:40:37,307 --> 01:40:38,390 And same thing with apply. 1695 01:40:38,390 --> 01:40:41,672 1696 01:40:41,672 --> 01:40:42,380 That makes sense? 1697 01:40:42,380 --> 01:40:52,550 So say we wanted to do this, we would see all three of those got bound. 1698 01:40:52,550 --> 01:40:57,210 The difference between bind call and apply 1699 01:40:57,210 --> 01:41:01,100 is that bind returns a new function which we store in greet, 1700 01:41:01,100 --> 01:41:07,115 and invoke greet later, and call and apply just immediately invoked that. 1701 01:41:07,115 --> 01:41:07,990 Does that make sense? 1702 01:41:07,990 --> 01:41:11,150 1703 01:41:11,150 --> 01:41:16,070 So one other way to set this manually is by using ES 6 arrow notation. 1704 01:41:16,070 --> 01:41:19,900 So ES6 arrow notation will actually bind this 1705 01:41:19,900 --> 01:41:23,600 to be whatever this is at the time that we declare the function, 1706 01:41:23,600 --> 01:41:25,930 rather than at the time that we invoke the function. 1707 01:41:25,930 --> 01:41:29,794 1708 01:41:29,794 --> 01:41:43,410 And so if we did const person const new person is somebody with a name 1709 01:41:43,410 --> 01:41:47,170 and greet is this new arrow notation, which 1710 01:41:47,170 --> 01:41:52,240 we'll talk about or show many more examples in the days to come, 1711 01:41:52,240 --> 01:41:57,460 and did consol dot log this dot name. 1712 01:41:57,460 --> 01:42:04,060 1713 01:42:04,060 --> 01:42:24,880 If we did new person dot greet here we see what is this dot name at the time 1714 01:42:24,880 --> 01:42:27,437 that we actually write this here. 1715 01:42:27,437 --> 01:42:33,310 1716 01:42:33,310 --> 01:42:34,510 What is the value of this? 1717 01:42:34,510 --> 01:42:37,120 1718 01:42:37,120 --> 01:42:39,340 Again, this is a weird node thing. 1719 01:42:39,340 --> 01:42:48,760 If we did it in the command line, if we did const new person equals name 1720 01:42:48,760 --> 01:43:09,645 new person is undefined. 1721 01:43:09,645 --> 01:43:13,980 And why is it undefined? 1722 01:43:13,980 --> 01:43:16,347 What is this at the time that I was typing this? 1723 01:43:16,347 --> 01:43:20,019 AUDIENCE: [INAUDIBLE] 1724 01:43:20,019 --> 01:43:22,120 SPEAKER 1: It's the global object. 1725 01:43:22,120 --> 01:43:25,910 And what is this dot name is undefined. 1726 01:43:25,910 --> 01:43:27,930 And so ES6 the arrow notation will actually 1727 01:43:27,930 --> 01:43:31,640 bind this to be whatever the value is at the time of writing. 1728 01:43:31,640 --> 01:43:44,015 1729 01:43:44,015 --> 01:43:45,500 Any questions on this? 1730 01:43:45,500 --> 01:43:48,070 1731 01:43:48,070 --> 01:43:48,570 Cool. 1732 01:43:48,570 --> 01:43:54,720 So now let's talk about something that will be important in the assignment. 1733 01:43:54,720 --> 01:43:56,550 So browsers in the DOM. 1734 01:43:56,550 --> 01:44:01,500 So how many people have heard of the DOM before? 1735 01:44:01,500 --> 01:44:02,040 Most people. 1736 01:44:02,040 --> 01:44:04,689 It stands for Document Object Model. 1737 01:44:04,689 --> 01:44:06,480 And it's basically this tree like structure 1738 01:44:06,480 --> 01:44:10,170 that the browser maintains in order to be in sync with what 1739 01:44:10,170 --> 01:44:13,350 the HTML of the page declares. 1740 01:44:13,350 --> 01:44:21,290 And so say we had some very simple HTML file which was just 1741 01:44:21,290 --> 01:44:24,290 something like HTML, it had a head with a title, 1742 01:44:24,290 --> 01:44:28,220 it had a body with H1 and a paragraph. 1743 01:44:28,220 --> 01:44:31,220 This can be expressed in sort of a tree like model, right? 1744 01:44:31,220 --> 01:44:35,030 We have the document, we have inside the document we 1745 01:44:35,030 --> 01:44:38,050 have some HTML, what's inside the HTML? 1746 01:44:38,050 --> 01:44:40,152 Well, we have a head, and we have a body. 1747 01:44:40,152 --> 01:44:41,110 What's inside the head? 1748 01:44:41,110 --> 01:44:42,170 Well, we have a title. 1749 01:44:42,170 --> 01:44:43,169 What's inside the title? 1750 01:44:43,169 --> 01:44:46,027 Well, it's some text called this is a simple page. 1751 01:44:46,027 --> 01:44:46,860 What about the body? 1752 01:44:46,860 --> 01:44:49,011 Well, we have an H1, and we have a paragraph. 1753 01:44:49,011 --> 01:44:50,010 And what's inside those? 1754 01:44:50,010 --> 01:44:51,120 Some text as well. 1755 01:44:51,120 --> 01:44:56,120 And so we can sort of describe that as a tree, right? 1756 01:44:56,120 --> 01:45:03,220 We have at the very top a document, and below that we have some HTML. 1757 01:45:03,220 --> 01:45:06,720 1758 01:45:06,720 --> 01:45:09,537 And what was inside the HTML? 1759 01:45:09,537 --> 01:45:10,870 We had a head and a body, right? 1760 01:45:10,870 --> 01:45:15,190 So had a head and a body. 1761 01:45:15,190 --> 01:45:19,224 1762 01:45:19,224 --> 01:45:20,974 And what was inside the head and the body? 1763 01:45:20,974 --> 01:45:24,840 1764 01:45:24,840 --> 01:45:26,890 Well, the head had a title. 1765 01:45:26,890 --> 01:45:30,340 The body had a couple other tags, H1 and a paragraph. 1766 01:45:30,340 --> 01:45:33,405 And so we can sort of describe those also as part of the tree, right. 1767 01:45:33,405 --> 01:45:34,405 So head there's a title. 1768 01:45:34,405 --> 01:45:39,220 1769 01:45:39,220 --> 01:45:45,320 Body had an H1 and a paragraph. 1770 01:45:45,320 --> 01:45:48,860 And those each had some text. 1771 01:45:48,860 --> 01:45:53,200 And so do you see how that HTML maps onto some tree like structure 1772 01:45:53,200 --> 01:45:55,210 that we can maintain? 1773 01:45:55,210 --> 01:45:59,490 So this tree like structure is called the DOM or the Document Object Model. 1774 01:45:59,490 --> 01:46:02,950 And it's the way of modeling the HTML that is rendered onto a web page. 1775 01:46:02,950 --> 01:46:06,330 1776 01:46:06,330 --> 01:46:09,308 Does that make sense to everybody? 1777 01:46:09,308 --> 01:46:11,236 And so why does that matter? 1778 01:46:11,236 --> 01:46:14,140 1779 01:46:14,140 --> 01:46:18,160 Well, we can actually modify that DOM using some JavaScript. 1780 01:46:18,160 --> 01:46:21,000 And as we'll discuss in section this week, 1781 01:46:21,000 --> 01:46:25,030 we'll discuss exactly how you might do that. 1782 01:46:25,030 --> 01:46:29,470 And that is exactly what the first project is going to be covering. 1783 01:46:29,470 --> 01:46:32,180 1784 01:46:32,180 --> 01:46:35,810 So in the first project which will be released today, 1785 01:46:35,810 --> 01:46:37,680 you will create a to do app. 1786 01:46:37,680 --> 01:46:40,240 And so the to do app will basically be a way 1787 01:46:40,240 --> 01:46:43,540 of tracking some to dos that you'll have to do. 1788 01:46:43,540 --> 01:46:46,630 And you all use JavaScript and DOM manipulation 1789 01:46:46,630 --> 01:46:53,050 in order to create and track however many to do's you need to check off. 1790 01:46:53,050 --> 01:46:56,512 There'll be specifics coming out via email. 1791 01:46:56,512 --> 01:46:58,720 But this assignment will be due in a couple of weeks. 1792 01:46:58,720 --> 01:47:02,040 And sections will also be starting this week. 1793 01:47:02,040 --> 01:47:03,910 You should have gotten email before class 1794 01:47:03,910 --> 01:47:06,970 today with a form about a couple sectioning times 1795 01:47:06,970 --> 01:47:08,384 and if those work for you. 1796 01:47:08,384 --> 01:47:10,300 And those sections will be starting this week. 1797 01:47:10,300 --> 01:47:15,670 And sections are basically 1 and 1/2 hour, 1 to 1 and 1/2 hour 1798 01:47:15,670 --> 01:47:20,595 block where led by one of our TAs, Johann or Raylen, 1799 01:47:20,595 --> 01:47:24,760 will be talking about smaller stuff that we didn't quite cover in lecture. 1800 01:47:24,760 --> 01:47:29,310 One of these topics will be DOM and manipulating the DOM using JavaScript. 1801 01:47:29,310 --> 01:47:32,920 And so this week, they'll be talking to you about that, answering any questions 1802 01:47:32,920 --> 01:47:34,100 that you may have. 1803 01:47:34,100 --> 01:47:36,715 And then preparing you for this first project. 1804 01:47:36,715 --> 01:47:39,160 1805 01:47:39,160 --> 01:47:39,660 All right. 1806 01:47:39,660 --> 01:47:40,743 Let's call it for tonight. 1807 01:47:40,743 --> 01:47:43,670 And I'll stick around for some questions if you have any after. 1808 01:47:43,670 --> 01:47:45,502