1 00:00:01,150 --> 00:00:04,410 As an introduction to this theory section, 2 00:00:04,410 --> 00:00:06,720 I want to start with a very cool 3 00:00:06,720 --> 00:00:11,190 and very high-level overview about the JavaScript language. 4 00:00:11,190 --> 00:00:13,480 Just so you get a first overview 5 00:00:13,480 --> 00:00:16,380 of most of the things that we need to learn 6 00:00:16,380 --> 00:00:19,830 in order to eventually master JavaScript. 7 00:00:19,830 --> 00:00:22,520 And this is gonna be a long lecture, 8 00:00:22,520 --> 00:00:25,303 so get ready for a crazy ride. 9 00:00:27,400 --> 00:00:30,860 And I want to start by coming back to that first definition 10 00:00:30,860 --> 00:00:33,300 that I gave you on JavaScript, 11 00:00:33,300 --> 00:00:35,370 where I told you that JavaScript 12 00:00:35,370 --> 00:00:37,890 is a high-level, object-oriented, 13 00:00:37,890 --> 00:00:40,980 multi-paradigm programming language. 14 00:00:40,980 --> 00:00:44,140 Now this is of course 100% correct, 15 00:00:44,140 --> 00:00:47,170 but it's also really just the surface, 16 00:00:47,170 --> 00:00:49,610 the tip of the iceberg. 17 00:00:49,610 --> 00:00:53,020 So what about this definition? 18 00:00:53,020 --> 00:00:55,700 JavaScript is a high-level, prototype-based, 19 00:00:55,700 --> 00:00:57,710 object-oriented, multi-paradigm, 20 00:00:57,710 --> 00:01:00,740 interpreted or just-in-time compiled, 21 00:01:00,740 --> 00:01:02,120 dynamic, single-threaded, 22 00:01:02,120 --> 00:01:04,090 garbage-collected programming language 23 00:01:04,090 --> 00:01:06,000 with first-class functions 24 00:01:06,000 --> 00:01:10,050 and a non-blocking event loop concurrency model. 25 00:01:10,050 --> 00:01:11,760 Wait, what? 26 00:01:11,760 --> 00:01:14,090 Is this some kind of joke? 27 00:01:14,090 --> 00:01:17,600 Well, yeah, it kind of is actually, 28 00:01:17,600 --> 00:01:20,280 I just packed as much information as possible 29 00:01:20,280 --> 00:01:25,280 about JavaScript into one unreadable sentence, just for fun, 30 00:01:25,970 --> 00:01:27,790 but besides fun, 31 00:01:27,790 --> 00:01:30,600 this also gives us a great opportunity 32 00:01:30,600 --> 00:01:34,960 to unpack all of this in order to get a first peek 33 00:01:34,960 --> 00:01:38,380 into all the stuff that we're gonna learn about JavaScript 34 00:01:38,380 --> 00:01:40,010 throughout the course. 35 00:01:40,010 --> 00:01:44,210 And this is not to intimidate you. It's really not. 36 00:01:44,210 --> 00:01:46,550 I just want you to get the big picture 37 00:01:46,550 --> 00:01:48,960 before really getting started 38 00:01:48,960 --> 00:01:51,170 and also introduce some topics 39 00:01:51,170 --> 00:01:53,420 that are just good to know, 40 00:01:53,420 --> 00:01:56,910 because getting the big picture before diving deep 41 00:01:56,910 --> 00:02:00,920 is in my opinion, an amazing learning technique. 42 00:02:00,920 --> 00:02:05,083 So with that being said, let's unpack this now a little bit. 43 00:02:06,130 --> 00:02:08,390 So these are the nine JavaScript topics 44 00:02:08,390 --> 00:02:11,630 that we're briefly gonna talk about in this lecture, 45 00:02:11,630 --> 00:02:12,933 slightly reordered. 46 00:02:13,820 --> 00:02:16,700 And starting with the high-level part, 47 00:02:16,700 --> 00:02:18,180 as you might already know, 48 00:02:18,180 --> 00:02:20,940 every program that runs on your computer 49 00:02:20,940 --> 00:02:23,530 needs some hardware resources, 50 00:02:23,530 --> 00:02:28,000 such as memory and the CPU to do its work. 51 00:02:28,000 --> 00:02:31,980 Now, there are low-level languages, such as C, 52 00:02:31,980 --> 00:02:35,360 where you have to manually manage these resources. 53 00:02:35,360 --> 00:02:36,210 For example, 54 00:02:36,210 --> 00:02:40,630 asking the computer for memory to create a new variable. 55 00:02:40,630 --> 00:02:41,810 On the other side, 56 00:02:41,810 --> 00:02:46,470 you have high-level languages such as JavaScript and Python, 57 00:02:46,470 --> 00:02:49,880 where we do not have to manage resources at all 58 00:02:49,880 --> 00:02:53,660 because these languages have so-called abstractions 59 00:02:53,660 --> 00:02:56,560 that take all of that work away from us. 60 00:02:56,560 --> 00:02:59,700 This makes the language easier to learn and to use, 61 00:02:59,700 --> 00:03:03,710 but the downside is that programs will never be as fast 62 00:03:03,710 --> 00:03:08,170 or as optimized as for example, C programs. 63 00:03:08,170 --> 00:03:10,170 Now, one of the powerful tools 64 00:03:10,170 --> 00:03:13,530 that takes memory management away from us developers 65 00:03:13,530 --> 00:03:15,690 is garbage-collection, 66 00:03:15,690 --> 00:03:17,700 which is basically an algorithm 67 00:03:17,700 --> 00:03:19,780 inside the JavaScript engine, 68 00:03:19,780 --> 00:03:23,370 which automatically removes old, unused objects 69 00:03:23,370 --> 00:03:24,970 from the computer memory 70 00:03:24,970 --> 00:03:29,430 in order not to clog it up with unnecessary stuff. 71 00:03:29,430 --> 00:03:33,490 So it's a little bit like JavaScript has a cleaning guy 72 00:03:33,490 --> 00:03:36,750 who cleans our memory from time to time 73 00:03:36,750 --> 00:03:40,350 so that we don't have to do it manually in our code. 74 00:03:40,350 --> 00:03:43,440 Next up, JavaScript is an interpreted 75 00:03:43,440 --> 00:03:46,620 or just-in-time compiled language. 76 00:03:46,620 --> 00:03:50,070 And again, we will learn more about this in this section, 77 00:03:50,070 --> 00:03:51,990 but what you need to know for now 78 00:03:51,990 --> 00:03:54,080 is that the computer's processor 79 00:03:54,080 --> 00:03:58,750 only understands zeros and ones, that's right. 80 00:03:58,750 --> 00:04:01,880 Ultimately, every single program needs to be written 81 00:04:01,880 --> 00:04:06,840 in zeros and ones, which is also called machine code. 82 00:04:06,840 --> 00:04:10,860 And since that's not really practical to write, is it? 83 00:04:10,860 --> 00:04:14,630 We simply write human-readable JavaScript code, 84 00:04:14,630 --> 00:04:18,020 which is an abstraction over machine code, 85 00:04:18,020 --> 00:04:21,020 but this code eventually needs to be translated 86 00:04:21,020 --> 00:04:22,590 to machine code. 87 00:04:22,590 --> 00:04:25,330 And that step can be either compiling 88 00:04:25,330 --> 00:04:27,370 or interpreting. 89 00:04:27,370 --> 00:04:31,220 This step is necessary in every single programming language 90 00:04:31,220 --> 00:04:34,700 because no one writes machine code manually. 91 00:04:34,700 --> 00:04:36,360 In the case of JavaScript, 92 00:04:36,360 --> 00:04:39,283 this happens inside the JavaScript engine. 93 00:04:40,500 --> 00:04:44,380 Now, one of the things that makes JavaScript so popular 94 00:04:44,380 --> 00:04:48,150 is the fact that it's a multi-paradigm language. 95 00:04:48,150 --> 00:04:51,400 In programming, a paradigm is an approach 96 00:04:51,400 --> 00:04:55,100 and an overall mindset of structuring our code, 97 00:04:55,100 --> 00:04:59,060 which will ultimately direct the coding style and technique 98 00:04:59,060 --> 00:05:02,920 in a project that uses a certain paradigm. 99 00:05:02,920 --> 00:05:06,450 And this definition still sounds kind of abstract, 100 00:05:06,450 --> 00:05:07,580 but don't worry, 101 00:05:07,580 --> 00:05:10,223 it will become more clear as we move on. 102 00:05:11,100 --> 00:05:13,610 Now, three popular paradigms are; 103 00:05:13,610 --> 00:05:16,090 procedural, object-oriented, 104 00:05:16,090 --> 00:05:18,440 and functional programming. 105 00:05:18,440 --> 00:05:22,400 So procedural programming is what we've been doing so far, 106 00:05:22,400 --> 00:05:25,230 which is basically just organizing the code 107 00:05:25,230 --> 00:05:27,350 in a very linear way, 108 00:05:27,350 --> 00:05:30,320 and then with some functions in between. 109 00:05:30,320 --> 00:05:32,310 Now about object-oriented programming 110 00:05:32,310 --> 00:05:33,970 and functional programming, 111 00:05:33,970 --> 00:05:36,470 I will talk about them in a second. 112 00:05:36,470 --> 00:05:40,440 Also, we can classify paradigms as imperative 113 00:05:40,440 --> 00:05:45,280 or as declarative, but again, more on that later. 114 00:05:45,280 --> 00:05:48,430 Now, many languages are only procedural 115 00:05:48,430 --> 00:05:50,500 or only object-oriented 116 00:05:50,500 --> 00:05:52,280 or only functional, 117 00:05:52,280 --> 00:05:55,020 but JavaScript does all of it. 118 00:05:55,020 --> 00:05:58,190 So it's really flexible and versatile. 119 00:05:58,190 --> 00:06:01,520 And so we can do really whatever we want with it. 120 00:06:01,520 --> 00:06:05,380 It's our choice. We can use whatever paradigm we want. 121 00:06:05,380 --> 00:06:08,703 And in this course, I will show you how to use all of them. 122 00:06:09,810 --> 00:06:13,620 So, about the object-oriented nature of JavaScript, 123 00:06:13,620 --> 00:06:17,840 it is a prototype-based, object-oriented approach. 124 00:06:17,840 --> 00:06:19,670 Now, what does that mean? 125 00:06:19,670 --> 00:06:24,670 Well, first, almost everything in JavaScript is an object, 126 00:06:24,750 --> 00:06:26,900 except for primitive values 127 00:06:26,900 --> 00:06:30,040 such as numbers, strings, et cetera. 128 00:06:30,040 --> 00:06:33,230 But arrays, for example, are just object. 129 00:06:33,230 --> 00:06:36,640 And we already saw that in practice, right? 130 00:06:36,640 --> 00:06:40,760 Now, have you ever wondered why we can create an array 131 00:06:40,760 --> 00:06:44,640 and then use the push method on it, for example? 132 00:06:44,640 --> 00:06:48,840 Well, it's because of prototypal inheritance. 133 00:06:48,840 --> 00:06:53,140 Basically, we create arrays from an array blueprint, 134 00:06:53,140 --> 00:06:57,480 which is like a template and this is called the prototype. 135 00:06:57,480 --> 00:07:01,170 This prototype contains all the array methods 136 00:07:01,170 --> 00:07:03,860 and the arrays that we create in our code 137 00:07:03,860 --> 00:07:07,380 then inherit the methods from the blueprint 138 00:07:07,380 --> 00:07:10,640 so that we can use them on the arrays. 139 00:07:10,640 --> 00:07:12,600 And this, what I just explained to you 140 00:07:12,600 --> 00:07:15,880 is actually a huge oversimplification, 141 00:07:15,880 --> 00:07:18,560 which might still sound confusing. 142 00:07:18,560 --> 00:07:21,540 And that's the reason why there is a whole section 143 00:07:21,540 --> 00:07:24,710 on object-oriented programming with JavaScript 144 00:07:24,710 --> 00:07:26,510 later in the course. 145 00:07:26,510 --> 00:07:29,040 But since this is a big overview lecture, 146 00:07:29,040 --> 00:07:32,623 I wanted to first introduce this topic right here. 147 00:07:33,850 --> 00:07:36,160 Next up, JavaScript is a language 148 00:07:36,160 --> 00:07:38,440 with first-class functions, 149 00:07:38,440 --> 00:07:40,410 which simply means that functions 150 00:07:40,410 --> 00:07:43,600 are treated just as regular variables. 151 00:07:43,600 --> 00:07:47,130 So, we can pass functions into other functions 152 00:07:47,130 --> 00:07:50,870 and we can even return functions from functions. 153 00:07:50,870 --> 00:07:53,240 And this is extremely powerful 154 00:07:53,240 --> 00:07:57,480 because it allows us to use a lot of powerful techniques 155 00:07:57,480 --> 00:08:01,090 and also allows for functional-programming, 156 00:08:01,090 --> 00:08:02,740 which is one of the paradigms 157 00:08:02,740 --> 00:08:05,230 that we just talked about before. 158 00:08:05,230 --> 00:08:06,370 And in fact, 159 00:08:06,370 --> 00:08:10,100 we have already used the power of first-class functions 160 00:08:10,100 --> 00:08:14,440 without knowing that they are called first-class functions. 161 00:08:14,440 --> 00:08:17,850 So remember this piece of code that we wrote 162 00:08:17,850 --> 00:08:21,060 for closing the modal window that we built before. 163 00:08:21,060 --> 00:08:24,320 So right here, we pass the closeModal function 164 00:08:24,320 --> 00:08:26,770 into the addEventListener function 165 00:08:26,770 --> 00:08:30,453 as if it was just a regular variable, right? 166 00:08:31,400 --> 00:08:35,740 And actually not all languages have first-class functions, 167 00:08:35,740 --> 00:08:39,100 but JavaScript has, and it is amazing. 168 00:08:39,100 --> 00:08:41,623 Believe me, it's really, really helpful. 169 00:08:43,130 --> 00:08:47,580 Next, I said that JavaScript is a dynamic language 170 00:08:47,580 --> 00:08:51,170 and dynamic actually means dynamically-typed. 171 00:08:51,170 --> 00:08:53,040 So as we've already seen, 172 00:08:53,040 --> 00:08:57,720 in JavaScript, we don't assign data types to variables. 173 00:08:57,720 --> 00:08:59,980 Instead, they only became known 174 00:08:59,980 --> 00:09:04,130 when the JavaScript engine executes our code. 175 00:09:04,130 --> 00:09:07,650 Also, the type of variables can easily be changed 176 00:09:07,650 --> 00:09:10,100 as we reassign variables. 177 00:09:10,100 --> 00:09:14,300 And this is basically what dynamically-typed means. 178 00:09:14,300 --> 00:09:18,670 Now there is a lot of controversy if this is good or bad, 179 00:09:18,670 --> 00:09:21,340 but this is just how it works. 180 00:09:21,340 --> 00:09:23,050 Now, the same is not true 181 00:09:23,050 --> 00:09:25,540 for most other programming languages, 182 00:09:25,540 --> 00:09:29,450 where we have to manually assign types, to variables. 183 00:09:29,450 --> 00:09:32,970 And this then usually prevents bugs from happening, 184 00:09:32,970 --> 00:09:36,430 which is the reason why many people say that JavaScript 185 00:09:36,430 --> 00:09:39,920 should be a strongly-typed language as well. 186 00:09:39,920 --> 00:09:43,800 And if you yourself want to use JavaScript with types, 187 00:09:43,800 --> 00:09:46,513 then you can always look into TypeScript. 188 00:09:47,420 --> 00:09:51,300 But anyway, let's now finally talk about the single-thread 189 00:09:51,300 --> 00:09:55,270 and the non-blocking event loop concurrency model. 190 00:09:55,270 --> 00:09:57,870 Now this is a really complex topic 191 00:09:57,870 --> 00:10:01,420 and probably the most complex one of the whole course, 192 00:10:01,420 --> 00:10:04,930 which is why it's kind of at the end of the course. 193 00:10:04,930 --> 00:10:05,780 And therefore, 194 00:10:05,780 --> 00:10:09,040 I'm not gonna go into specifics here just yet, 195 00:10:09,040 --> 00:10:12,810 but instead I will just define some things here. 196 00:10:12,810 --> 00:10:16,840 First, what actually is a concurrency model? 197 00:10:16,840 --> 00:10:19,190 Well, it's just a fancy term 198 00:10:19,190 --> 00:10:23,260 that means how the JavaScript engine handles multiple tasks 199 00:10:23,260 --> 00:10:25,540 happening at the same time. 200 00:10:25,540 --> 00:10:27,460 No, okay. That's cool. 201 00:10:27,460 --> 00:10:30,180 But why do we need that? 202 00:10:30,180 --> 00:10:35,180 Well, because JavaScript itself runs in one single-thread, 203 00:10:35,310 --> 00:10:39,040 which means that it can only do one thing at a time 204 00:10:39,040 --> 00:10:41,570 and therefore we need a way of handling 205 00:10:41,570 --> 00:10:44,930 multiple things happening at the same time. 206 00:10:44,930 --> 00:10:47,180 And by the way, in computing, 207 00:10:47,180 --> 00:10:50,280 a thread is like a set of instructions 208 00:10:50,280 --> 00:10:53,800 that is executed in the computer's CPU. 209 00:10:53,800 --> 00:10:56,830 So basically, the thread is where our code 210 00:10:56,830 --> 00:11:00,263 is actually executed in a machine's processor. 211 00:11:01,120 --> 00:11:05,400 All right. But what if there is a long-running task, 212 00:11:05,400 --> 00:11:08,690 like fetching data from a remote server? 213 00:11:08,690 --> 00:11:12,410 Well, it sounds like that would block the single thread 214 00:11:12,410 --> 00:11:15,030 where the code is running, right? 215 00:11:15,030 --> 00:11:17,480 But of course we don't want that. 216 00:11:17,480 --> 00:11:21,410 What we want is so-called non-blocking behavior 217 00:11:21,410 --> 00:11:24,210 and how do we achieve that? 218 00:11:24,210 --> 00:11:27,680 Well, by using a so-called event loop. 219 00:11:27,680 --> 00:11:30,480 The event loop takes long-running tasks, 220 00:11:30,480 --> 00:11:32,440 executes them in the background 221 00:11:32,440 --> 00:11:34,910 and then puts them back in the main thread 222 00:11:34,910 --> 00:11:37,010 once they are finished. 223 00:11:37,010 --> 00:11:38,430 And this is, in a nutshell, 224 00:11:38,430 --> 00:11:42,040 JavaScript's non-blocking event loop concurrency model 225 00:11:42,040 --> 00:11:44,100 with a single thread. 226 00:11:44,100 --> 00:11:46,990 It sounds like a mouthful for sure 227 00:11:46,990 --> 00:11:47,823 but in the end, 228 00:11:47,823 --> 00:11:51,230 it really just compresses to this. 229 00:11:51,230 --> 00:11:53,160 Just keep in mind that, again, 230 00:11:53,160 --> 00:11:57,373 this is a huge oversimplification that we will come back to. 231 00:11:58,340 --> 00:11:59,230 All right. 232 00:11:59,230 --> 00:12:02,710 And this actually rounds up this overview lecture. 233 00:12:02,710 --> 00:12:05,680 I know there was a ton of stuff to take in, 234 00:12:05,680 --> 00:12:08,380 but I hope that you still learned a thing or two here.