1 00:00:01,330 --> 00:00:06,070 Welcome, ladies and gentlemen, today we're going to talk about module that these S6 feature, but 2 00:00:06,070 --> 00:00:11,060 it's very, very useful and modules are not very easy to understand. 3 00:00:11,830 --> 00:00:16,600 So how we did start and how we did how we will end up using modules. 4 00:00:17,080 --> 00:00:19,230 Well, let me just show you something. 5 00:00:20,060 --> 00:00:26,690 Before or since the beginnings of JavaScript, the developers tried to organize their code better, 6 00:00:27,230 --> 00:00:35,080 so that's first we started using inline scripts and the inline scripts were here inside the index file. 7 00:00:35,090 --> 00:00:35,420 Right. 8 00:00:35,810 --> 00:00:36,830 But this is not good. 9 00:00:36,830 --> 00:00:42,920 For even example, if I save this one, create lecture 11, by the way, link it here and go back here. 10 00:00:43,380 --> 00:00:45,210 Oops, there you go. 11 00:00:45,530 --> 00:00:54,470 So the inland script is working and we don't have to use external scripts, but this was not good for 12 00:00:54,470 --> 00:00:55,130 the developers. 13 00:00:55,130 --> 00:01:02,150 So they start to avoid using inline scripts because we want to have a separation of concerns. 14 00:01:02,160 --> 00:01:07,430 We want to have the HTML structure and we want to link this with external files. 15 00:01:07,430 --> 00:01:12,400 So that's why we use external files like I did up until now. 16 00:01:12,470 --> 00:01:12,810 Right. 17 00:01:13,430 --> 00:01:16,190 So I create a lot of lectures here. 18 00:01:16,380 --> 00:01:19,910 If you see each and every lecture, there's a different file. 19 00:01:19,910 --> 00:01:24,950 But I always say liying the last lecture here that I'm going to create the only other ones. 20 00:01:25,930 --> 00:01:31,000 This is happening because I don't want to mess up the coat and I don't want to create something called 21 00:01:31,000 --> 00:01:34,560 dependency resolution, so what is dependency resolution? 22 00:01:35,110 --> 00:01:41,350 So the dependency resolution is when we are polluting the window object with a lot of variables or functions 23 00:01:41,350 --> 00:01:43,960 that will come from the files that we are linking. 24 00:01:44,450 --> 00:01:46,720 And imagine if some of the files are related. 25 00:01:47,170 --> 00:01:50,590 For example, Deselected 11 will not be able to work, for example. 26 00:01:50,590 --> 00:01:57,230 I'm just saying before something else happened in the lecture then, and that is not good. 27 00:01:57,250 --> 00:02:00,880 So we need to organize our tax now. 28 00:02:00,880 --> 00:02:04,270 The next part we did is to use TV. 29 00:02:04,330 --> 00:02:08,650 So I haven't talk about this, but this is immediately invoked function expression. 30 00:02:08,650 --> 00:02:12,880 And we used e.V. just to avoid window object pollution. 31 00:02:12,940 --> 00:02:15,580 Right, because every function has its own scope. 32 00:02:16,500 --> 00:02:26,460 Now, later, we use browser, we find this little little wizard, so browser wi fi allow us to use 33 00:02:26,460 --> 00:02:29,130 common Gere's and to use module's right. 34 00:02:29,370 --> 00:02:30,720 So I haven't talk about module's. 35 00:02:30,720 --> 00:02:31,920 Don't worry, we will get there. 36 00:02:32,890 --> 00:02:39,640 So before we used every now we can use browser Wi-Fi, then we can use something called -- and 37 00:02:39,640 --> 00:02:40,100 Bable. 38 00:02:40,510 --> 00:02:42,160 So what are these two here? 39 00:02:42,370 --> 00:02:43,010 These two? 40 00:02:43,210 --> 00:02:50,520 These three are actually pretty much what is the every one of the developers using. 41 00:02:50,530 --> 00:02:53,430 So everyone in production, you can see all of it. 42 00:02:53,440 --> 00:02:53,810 Right. 43 00:02:54,580 --> 00:03:01,520 So -- is a bundler for JavaScript files, so bundles multiple files into one. 44 00:03:01,930 --> 00:03:10,150 So instead of having 10 files like this, the Web bank will create will take all of this and will create 45 00:03:10,150 --> 00:03:13,010 one bundle that JS file, usually it's called like that. 46 00:03:13,450 --> 00:03:21,010 So now we will have instead of 10 calls to different files, we will have one file and that is great. 47 00:03:21,280 --> 00:03:23,350 Right now, the bable. 48 00:03:23,350 --> 00:03:24,640 What does the bable does? 49 00:03:25,810 --> 00:03:31,990 The Babel job is very simple to convert the code that we have like this one. 50 00:03:33,650 --> 00:03:35,840 Right, to convert this coat. 51 00:03:36,930 --> 00:03:38,920 Back to S5, why? 52 00:03:38,970 --> 00:03:44,170 Because some of the browser don't understand the code before E is five, they're not compatible. 53 00:03:44,430 --> 00:03:47,240 So with Bable, we don't need to worry about all of these things. 54 00:03:47,490 --> 00:03:51,920 So it will convert the six or a later code into years five. 55 00:03:52,290 --> 00:03:52,710 It will. 56 00:03:52,710 --> 00:03:53,160 It is. 57 00:03:53,520 --> 00:03:54,710 You can use it right away. 58 00:03:55,020 --> 00:03:56,880 No need to wait for a browser support. 59 00:03:57,880 --> 00:03:59,380 And why I'm telling you all of this. 60 00:04:00,620 --> 00:04:07,940 Well, because if I wanted to explain how modules are working, I should use -- and Bable, right. 61 00:04:08,180 --> 00:04:09,320 But not now. 62 00:04:09,320 --> 00:04:18,110 Today I can explain how modules are working because Browsr having support for that, or at least Google 63 00:04:18,110 --> 00:04:18,380 Chrome. 64 00:04:18,380 --> 00:04:25,360 So that's why you can go back here and you can just see what is supported. 65 00:04:25,610 --> 00:04:30,980 So I'm going to use Google Chrome and I will tell you about how this is important and how we can use 66 00:04:30,980 --> 00:04:31,140 it. 67 00:04:31,340 --> 00:04:38,910 Right now it's very easy to to do now without Bable and -- or browser Wi-Fi. 68 00:04:39,230 --> 00:04:45,350 So what do we need to do is actually here in this just to act type? 69 00:04:48,630 --> 00:04:54,600 To be able to model now, the browser will know that this file will be a module file. 70 00:04:54,960 --> 00:04:56,700 So we are dealing with modules, right? 71 00:04:57,780 --> 00:05:03,750 Good, so let Treleaven actually will be our import module file. 72 00:05:04,940 --> 00:05:07,290 Now, what else we need here? 73 00:05:07,320 --> 00:05:08,370 Let's talk about module. 74 00:05:08,370 --> 00:05:10,490 So we need to create three lectures here. 75 00:05:10,500 --> 00:05:13,950 I'm going to create new file, not lecture's new files. 76 00:05:14,670 --> 00:05:22,930 So I'm going to say module one that JS and let's create module two to that JS. 77 00:05:23,070 --> 00:05:29,970 So this will be two module files in lecture 11 will be the file that we are importing these modules. 78 00:05:30,720 --> 00:05:31,710 So what is module? 79 00:05:32,680 --> 00:05:34,870 So imagine like this. 80 00:05:35,960 --> 00:05:42,080 Consider a scenario where parts of JavaScript codes need to be reused, so when we want to reuse part 81 00:05:42,080 --> 00:05:46,040 of code, we can put it in a module and we can later on use that module. 82 00:05:46,610 --> 00:05:48,620 Now, modules organize our code. 83 00:05:49,690 --> 00:05:58,570 Very good module can contain here pieces or it can contain variables and function in each module, we 84 00:05:58,570 --> 00:06:01,930 can declare variables and function and we can export them. 85 00:06:02,170 --> 00:06:07,090 But here we need to import them in order to use this module one, for example, module two. 86 00:06:08,050 --> 00:06:08,400 Right. 87 00:06:08,770 --> 00:06:09,980 So that is how it goes. 88 00:06:10,570 --> 00:06:18,370 So the modules are nothing but JavaScript code that needs to be exported from that module and imported 89 00:06:18,370 --> 00:06:19,200 into another one. 90 00:06:19,750 --> 00:06:20,020 Right. 91 00:06:20,590 --> 00:06:24,460 This is very good and reusable and easy for maintaining. 92 00:06:24,700 --> 00:06:32,410 Imagine that we have like this file can be like 500 lines of code, but if we have modules, we can 93 00:06:32,410 --> 00:06:40,000 split that input, 50 here, 150 in this module and 200 in other modules. 94 00:06:40,000 --> 00:06:43,400 And that will leave like 50 or 100 here, only lines of code. 95 00:06:43,690 --> 00:06:48,870 So the modules are very easy to maintain and it's very reusable. 96 00:06:48,880 --> 00:06:49,170 Right. 97 00:06:50,180 --> 00:06:50,570 So. 98 00:06:51,590 --> 00:06:55,580 Let's talk about something now, exporting a module. 99 00:06:55,610 --> 00:06:57,050 How are we going to export module? 100 00:06:57,440 --> 00:07:03,850 The export keyword can be used to export components in a module export a module can be classified in 101 00:07:03,950 --> 00:07:07,130 as a name export and default exports. 102 00:07:07,160 --> 00:07:09,110 Let's start with the name export. 103 00:07:10,520 --> 00:07:13,750 Now, name exports are distinguished by their names. 104 00:07:14,090 --> 00:07:16,630 They can be several name experts in module. 105 00:07:16,640 --> 00:07:18,590 So let's in module one. 106 00:07:20,240 --> 00:07:21,200 Let's name this one 107 00:07:24,260 --> 00:07:25,100 named Exports. 108 00:07:26,530 --> 00:07:33,090 And let's create a variable called full name and let's put it here, Jack Reacher, nice. 109 00:07:34,210 --> 00:07:36,250 Now here I'm going to create a function. 110 00:07:37,510 --> 00:07:37,960 Let. 111 00:07:39,210 --> 00:07:46,110 Get name equal, function nice, and this function will return. 112 00:07:47,580 --> 00:07:48,990 But fullName. 113 00:07:51,260 --> 00:07:52,910 Not to upper. 114 00:07:53,900 --> 00:07:57,960 To upper case, so what it will do, this function will do. 115 00:07:58,250 --> 00:08:02,990 It will take this string and it will make sure that its everything is in upper case. 116 00:08:02,990 --> 00:08:03,280 Right. 117 00:08:03,650 --> 00:08:11,660 And it's going to be returning and let set name so we can set the name function also. 118 00:08:12,800 --> 00:08:15,470 But here it will take one parameter called new name. 119 00:08:15,470 --> 00:08:15,820 Right. 120 00:08:17,530 --> 00:08:24,940 So full name is will be equal to a new name now in names expert, we can. 121 00:08:26,310 --> 00:08:27,780 Export several. 122 00:08:30,360 --> 00:08:32,730 We can export several parameters here, right? 123 00:08:33,060 --> 00:08:38,730 So how we can do this, we can simply do it in a couple of ways. 124 00:08:38,970 --> 00:08:42,160 We can use names, export like this, export. 125 00:08:42,180 --> 00:08:47,710 We need to use the export keyword and we need to use this curly black records and say full name. 126 00:08:48,040 --> 00:08:52,710 Now, iConnect, I'm exporting the full name only, but I can export this. 127 00:08:54,770 --> 00:08:55,130 Name. 128 00:08:56,060 --> 00:08:59,740 Very first, let you use to get name, then to Sydney, OK? 129 00:09:01,770 --> 00:09:07,950 So we can use multiple exports using the name exports, but do you think this is good? 130 00:09:09,680 --> 00:09:10,160 So. 131 00:09:11,240 --> 00:09:18,950 We can use a single line export keyword like this, so this is not my this is not it's not something 132 00:09:18,950 --> 00:09:26,420 that I use, but I used a single export where we can put different variables in files that we want in 133 00:09:26,420 --> 00:09:28,370 functions that we want to be exporting. 134 00:09:28,400 --> 00:09:33,830 For example, export full name, comma, get name. 135 00:09:34,370 --> 00:09:38,870 And certainly this is completely identical with this one. 136 00:09:39,200 --> 00:09:41,630 I just export everything in a single line. 137 00:09:42,080 --> 00:09:45,740 Now back to our lecture 11. 138 00:09:45,770 --> 00:09:46,100 Right. 139 00:09:46,610 --> 00:09:48,410 So how we are going to import. 140 00:09:48,650 --> 00:09:49,760 So importing. 141 00:09:52,740 --> 00:09:57,080 Named exports, right? 142 00:09:57,960 --> 00:10:00,940 This was named export, so we need to import it here. 143 00:10:01,290 --> 00:10:07,680 So for that, we need to use an import keyword now when importing name, export the name corresponding 144 00:10:07,860 --> 00:10:11,280 to the corresponding components from the module one. 145 00:10:11,580 --> 00:10:15,120 This should be a complete match, for example. 146 00:10:15,870 --> 00:10:19,620 Let's start with this and one more thing. 147 00:10:19,920 --> 00:10:22,440 All of the imports, it should happen. 148 00:10:22,440 --> 00:10:26,820 And the top of the file, for example, if you have a piece of code here, we can just put it there. 149 00:10:26,850 --> 00:10:29,370 We need to be on top of the JavaScript file. 150 00:10:29,910 --> 00:10:30,440 Oh, good. 151 00:10:30,750 --> 00:10:32,480 Now so we can use first name. 152 00:10:32,940 --> 00:10:38,700 So it must be first name with capital like this first capital end or full name. 153 00:10:38,700 --> 00:10:39,290 Doesn't matter. 154 00:10:39,690 --> 00:10:40,440 It will not. 155 00:10:40,740 --> 00:10:41,930 Otherwise it will not work. 156 00:10:42,090 --> 00:10:42,380 Right. 157 00:10:42,660 --> 00:10:45,480 So how we can import import. 158 00:10:47,730 --> 00:10:55,980 Full name and get name, for example, right, so I'm importing to these two, the first two doesn't 159 00:10:55,980 --> 00:10:56,290 matter. 160 00:10:56,310 --> 00:10:58,460 We don't need to import third one if we don't want it. 161 00:10:58,770 --> 00:11:02,100 So I'm saying, OK, we use curly brackets. 162 00:11:02,460 --> 00:11:03,300 Remember that? 163 00:11:03,690 --> 00:11:06,720 And full name and get name from. 164 00:11:08,520 --> 00:11:16,500 And we need to specify which coming here, module one that J is now, if we use -- and Bable, 165 00:11:16,800 --> 00:11:20,720 we don't need to specify these dodgiest extension by. 166 00:11:21,860 --> 00:11:27,470 We're using bundlers, we're not using Bable, so we don't we need to use it, we just extension. 167 00:11:27,510 --> 00:11:33,110 OK, now it's like this little bit different color because we are still not using it, so. 168 00:11:34,330 --> 00:11:36,430 Let's call it like. 169 00:11:41,460 --> 00:11:42,990 Full name. 170 00:11:44,970 --> 00:11:47,480 Let's put it full name log. 171 00:11:50,160 --> 00:11:56,530 Get name and let's use to get name, OK, save it. 172 00:11:56,910 --> 00:11:57,960 Go back to your. 173 00:12:00,180 --> 00:12:06,510 Vietnam is a function, OK, now full name is working, but get name is not working because Vietnam 174 00:12:06,510 --> 00:12:07,260 is a function. 175 00:12:07,380 --> 00:12:09,900 OK, I'll get name Jack Reacher. 176 00:12:09,900 --> 00:12:13,060 Now, Jack Reacher is every thing is an uppercase. 177 00:12:13,080 --> 00:12:18,480 Let me just do this one here so we don't think too much right now. 178 00:12:18,720 --> 00:12:19,380 There you go. 179 00:12:19,630 --> 00:12:21,060 Now you know how to import. 180 00:12:22,070 --> 00:12:23,970 Name, name exports, right? 181 00:12:25,220 --> 00:12:27,980 So what is this curly brackets, do you know? 182 00:12:28,670 --> 00:12:30,800 Well, remember the structuring feature? 183 00:12:31,160 --> 00:12:33,730 Well, this is where we can use it here, districting. 184 00:12:34,160 --> 00:12:37,180 So this is how we are getting access. 185 00:12:37,190 --> 00:12:41,240 But as I told you, the full name must have the same here. 186 00:12:42,080 --> 00:12:42,680 Syntax. 187 00:12:42,680 --> 00:12:44,410 I mean, same should be written. 188 00:12:44,450 --> 00:12:45,690 Same as in here. 189 00:12:46,220 --> 00:12:48,890 We can't do a full names, full names here. 190 00:12:49,010 --> 00:12:54,440 And if you tried to save it, the requested module does not provide the expert full names. 191 00:12:54,470 --> 00:12:54,820 Good. 192 00:12:55,070 --> 00:12:57,440 So it's telling you that something is not right. 193 00:12:58,910 --> 00:13:01,160 Now, that is how we can. 194 00:13:02,460 --> 00:13:09,840 Important now we can also import it like this so we can import it line by line, but this is not something 195 00:13:09,840 --> 00:13:10,260 that I do. 196 00:13:10,500 --> 00:13:13,440 So what we can say, we can do it like this. 197 00:13:15,170 --> 00:13:20,390 So we can import a full name, and if I comment out, this one should work. 198 00:13:20,540 --> 00:13:26,950 Yeah, Jack Reacher and this, by the way, we need to get rid of that in line tack. 199 00:13:27,950 --> 00:13:28,170 Right. 200 00:13:29,510 --> 00:13:32,810 This is another what we can do, get name. 201 00:13:33,770 --> 00:13:37,870 And now if I am common, this one, it will work, right. 202 00:13:38,060 --> 00:13:41,000 So we can use a separate instead of one line. 203 00:13:41,000 --> 00:13:43,470 But this is something that I don't really use. 204 00:13:43,760 --> 00:13:46,860 So I'm just going to go back here and I'm going to uncommon this one. 205 00:13:47,480 --> 00:13:50,660 Now, another thing is that we can use aliases. 206 00:13:51,210 --> 00:13:53,990 Remember here I said the full name and get name this. 207 00:13:54,140 --> 00:13:56,150 The naming should be the same as here. 208 00:13:56,450 --> 00:14:01,160 But what if we want to shorten up this one so we can use aliases? 209 00:14:01,160 --> 00:14:08,650 So how we can do this so I can see here full name ask F in get name as G. 210 00:14:08,990 --> 00:14:11,010 Now if I see it they will not work. 211 00:14:11,150 --> 00:14:12,770 Full name is not defined right. 212 00:14:13,190 --> 00:14:14,600 Correctly because here. 213 00:14:16,860 --> 00:14:19,530 Now we need to use F. 214 00:14:21,180 --> 00:14:23,730 Let me just copy the whole thing, comment out. 215 00:14:26,150 --> 00:14:29,570 Now, I need to use your F in here, G, right. 216 00:14:31,230 --> 00:14:31,800 Save it. 217 00:14:31,860 --> 00:14:32,560 There you go. 218 00:14:32,880 --> 00:14:39,480 Now we can use the Eleusis here, so this is a short version of instead of using a full name, you can 219 00:14:39,630 --> 00:14:42,210 use AV instead of using that name you can use. 220 00:14:43,770 --> 00:14:44,460 Very good. 221 00:14:44,850 --> 00:14:52,070 Now, one thing that we need to look at now is so we have done named experts that we need to do now 222 00:14:52,740 --> 00:14:53,910 default expert. 223 00:14:54,990 --> 00:14:58,800 And this is something that we need to work in the module to file default. 224 00:15:00,740 --> 00:15:01,890 The fall export. 225 00:15:01,910 --> 00:15:07,190 And now here we are need to create a couple of things, so let me. 226 00:15:08,770 --> 00:15:13,230 Let's say Chris Evans, Captain America, right? 227 00:15:14,340 --> 00:15:25,920 Let actor name and hearsay get name function, which is going to create function here. 228 00:15:28,770 --> 00:15:32,640 So return Naem and. 229 00:15:35,760 --> 00:15:43,140 Comma here and say set name, the set then will be again a functio will not it will take a parameter, 230 00:15:43,140 --> 00:15:46,660 new name and name. 231 00:15:46,660 --> 00:15:49,120 It will be a new name here. 232 00:15:49,770 --> 00:15:50,300 Very good. 233 00:15:50,850 --> 00:15:51,330 So. 234 00:15:53,040 --> 00:15:59,940 For default export, we can't do it just like this, export to full name, get name, so we the default 235 00:15:59,940 --> 00:16:06,570 export, we can just export this actor name object, we can do only one export. 236 00:16:06,570 --> 00:16:07,770 And how this is done. 237 00:16:07,980 --> 00:16:12,840 Well, let's do it together so we can say export. 238 00:16:14,470 --> 00:16:15,160 Default. 239 00:16:16,310 --> 00:16:22,730 You need to use the default word and actor name, so when we are dealing with default export, we need 240 00:16:22,730 --> 00:16:28,160 to use the default keyword and to what we are going to export. 241 00:16:28,250 --> 00:16:30,950 There can be one default export per module. 242 00:16:31,070 --> 00:16:37,400 So this module can only have one export, not like this, the full name get name set name so we can 243 00:16:37,400 --> 00:16:40,220 export multiple named things. 244 00:16:40,460 --> 00:16:44,330 But here we can export only one thing per module. 245 00:16:44,430 --> 00:16:45,740 OK, that's the difference. 246 00:16:45,980 --> 00:16:47,230 So how are we going to import it. 247 00:16:47,480 --> 00:16:51,740 So here we can say import 248 00:16:54,020 --> 00:16:57,450 default export, know how we can do this. 249 00:16:57,710 --> 00:17:00,620 So what we can say is I want to import. 250 00:17:00,620 --> 00:17:06,980 We need to still use the key import and I will say actor name or we can use it. 251 00:17:07,160 --> 00:17:08,420 Actor name in. 252 00:17:10,140 --> 00:17:17,220 Doesn't matter, it's not going to change from and then we need to provide the path and this is module 253 00:17:17,220 --> 00:17:25,440 to dodgiest member, we need to use the Geass engine and module to Dages does not provide actor name. 254 00:17:28,580 --> 00:17:30,190 What about if we do it like this? 255 00:17:31,060 --> 00:17:33,410 There you go now see it. 256 00:17:33,430 --> 00:17:36,190 Can it be done with the with the brackets, right. 257 00:17:36,280 --> 00:17:38,200 With the structuring thing. 258 00:17:38,230 --> 00:17:42,480 OK, now let's think about that's possible for some reason. 259 00:17:42,790 --> 00:17:44,950 OK, now how are we going to print out this? 260 00:17:45,160 --> 00:17:47,860 So let's do this like this. 261 00:17:48,040 --> 00:17:50,290 Let's say that this is coming from module one. 262 00:17:54,180 --> 00:18:03,010 Or let's cut it from here and say Module one, full name, module one, oops, get name. 263 00:18:03,040 --> 00:18:04,470 OK, there you go. 264 00:18:04,680 --> 00:18:05,910 And you can put here. 265 00:18:07,780 --> 00:18:16,240 So, yeah, now how we are going to cancel that log, so we need to do the module two now, I'm going 266 00:18:16,240 --> 00:18:17,140 to say module. 267 00:18:19,370 --> 00:18:24,020 To an actor named. 268 00:18:25,700 --> 00:18:30,670 And I'm going to use this actor name and look what will happen, comma here, don't forget the comma. 269 00:18:32,090 --> 00:18:34,130 So it will return me a function. 270 00:18:34,130 --> 00:18:34,830 Get me. 271 00:18:34,900 --> 00:18:37,490 OK, now I can say. 272 00:18:39,480 --> 00:18:40,740 That get name. 273 00:18:42,890 --> 00:18:51,950 So the actor name is Chris Evans, let's get rid of this space between before, right, so module two, 274 00:18:51,950 --> 00:18:57,800 the actor name is Chris Evans, and actually we can do it a little bit like this. 275 00:18:58,390 --> 00:19:00,270 OK, so there you go. 276 00:19:00,680 --> 00:19:08,890 So one more thing that I haven't shown you is that we can use X asterisks on our named imports. 277 00:19:09,500 --> 00:19:11,330 No, look at it here. 278 00:19:11,720 --> 00:19:16,100 So I'm using we I've shown you a couple of ways how we can do this. 279 00:19:16,490 --> 00:19:18,260 So I'm just going to comment about this part. 280 00:19:19,570 --> 00:19:21,250 And this is what I usually do. 281 00:19:21,280 --> 00:19:30,550 OK, so this is something that I will do in if you follow me on the other, of course, the bigger course 282 00:19:30,550 --> 00:19:31,300 JavaScript course. 283 00:19:31,310 --> 00:19:31,690 Yep. 284 00:19:31,720 --> 00:19:33,820 There I will use this technique. 285 00:19:33,820 --> 00:19:37,860 So I'm going to say import Asterix design, right. 286 00:19:38,680 --> 00:19:43,570 As now we need to see what as module one. 287 00:19:43,570 --> 00:19:47,370 I usually do that to know from which module is coming in. 288 00:19:47,380 --> 00:19:53,650 I'm going to say from and I'm providing the path here, module one that is OK. 289 00:19:54,880 --> 00:20:02,020 Cool, save it, but now if I say we're going to run a problem because and it's not going to work like 290 00:20:02,020 --> 00:20:02,260 that. 291 00:20:02,740 --> 00:20:11,110 So instead of using the aliases or full name, I can access them through module one. 292 00:20:11,110 --> 00:20:13,330 That fullName. 293 00:20:13,510 --> 00:20:14,290 Very good. 294 00:20:14,620 --> 00:20:18,790 And I can see module one dot get name. 295 00:20:19,880 --> 00:20:20,310 Right. 296 00:20:20,330 --> 00:20:27,170 So I can access the function and I can access the variable using that syntax, very good. 297 00:20:27,200 --> 00:20:30,360 Now I have Jack Reacher and Jack Reacher in capital letters. 298 00:20:30,800 --> 00:20:32,480 How cool is this? 299 00:20:32,630 --> 00:20:41,120 So we can use asterisks on our name imports so it can be imported onto an object by using the esoterics 300 00:20:41,120 --> 00:20:41,890 operator. 301 00:20:42,200 --> 00:20:42,550 Right. 302 00:20:42,860 --> 00:20:43,710 Very cool. 303 00:20:44,420 --> 00:20:45,020 So. 304 00:20:46,470 --> 00:20:52,860 So there you go, you have a different ways how you can import things from module's now named exports, 305 00:20:52,860 --> 00:21:01,320 we can export multiple things and in default export, we can export only one thing per module. 306 00:21:01,680 --> 00:21:07,870 Now, somebody will ask me, what if I want to export these Chris Evans the name? 307 00:21:08,340 --> 00:21:15,080 Well, we can use something like a mix of named and default export. 308 00:21:15,120 --> 00:21:23,220 Well, for that reason, what we can do, I can say export and I can pass the name there. 309 00:21:23,430 --> 00:21:24,820 OK, save it. 310 00:21:24,990 --> 00:21:26,970 You should not throw you any error here. 311 00:21:27,390 --> 00:21:29,280 But how we are going to do it here. 312 00:21:29,430 --> 00:21:34,440 Well, one thing I haven't shown you with the default experts that these name. 313 00:21:36,060 --> 00:21:38,530 And this it's a different convention. 314 00:21:38,550 --> 00:21:44,730 I mean, so here we can use any name that we want, but here we need to use the full name, I mean, 315 00:21:44,730 --> 00:21:46,710 get name as they were here. 316 00:21:47,140 --> 00:21:47,390 Right. 317 00:21:47,410 --> 00:21:49,110 We could not use anything else. 318 00:21:49,380 --> 00:21:54,980 But here, I didn't show you that we can use actor names in actor names there. 319 00:21:55,230 --> 00:21:56,640 Save it now. 320 00:21:56,640 --> 00:21:59,310 It will not have you will not have any problem. 321 00:22:00,170 --> 00:22:09,410 So when you have a mixed here named and default expert, what you can do, so how you can access them 322 00:22:09,410 --> 00:22:11,780 here and how you can import them? 323 00:22:11,930 --> 00:22:15,460 Well, you can import and I'm going to return back to normal here. 324 00:22:15,470 --> 00:22:21,620 I don't like actor names because it's plural, but you can put any on even a it will work. 325 00:22:21,620 --> 00:22:21,900 Right. 326 00:22:22,280 --> 00:22:25,000 So it's not like here where it's sensitive. 327 00:22:25,190 --> 00:22:29,710 We can't change full name with small and here should be full capital. 328 00:22:29,720 --> 00:22:35,060 And right now I'm going to go back again to normal. 329 00:22:35,480 --> 00:22:42,290 Now here, if I want to access the second thing that I export, well, it needs to be here. 330 00:22:43,980 --> 00:22:45,480 And I'm going to say NI. 331 00:22:47,030 --> 00:22:51,350 No, I can cause a lot. 332 00:22:55,810 --> 00:23:01,080 And I'm going to just give it the name here and let's hope that will work. 333 00:23:03,640 --> 00:23:05,890 Name save it. 334 00:23:06,370 --> 00:23:10,360 There you go, module to name Chris Evans. 335 00:23:10,750 --> 00:23:12,430 Well, what about if we. 336 00:23:14,550 --> 00:23:21,180 Want to this the Sedney, how we can do that, what you think, and that is pretty much simple. 337 00:23:21,180 --> 00:23:30,180 So what we need to do is here we can see actor name, that set name, and here we need to pass the new 338 00:23:30,180 --> 00:23:30,510 name. 339 00:23:30,720 --> 00:23:36,150 For example, let's pass Chris Hemsworth. 340 00:23:38,580 --> 00:23:44,820 All right, I hope I spell it correctly now, I'm just going to come along the same line, but because 341 00:23:44,820 --> 00:23:47,160 we change it this we set the new name. 342 00:23:48,690 --> 00:23:50,630 Now, we should have Chris Hemsworth. 343 00:23:51,330 --> 00:23:52,320 Very good. 344 00:23:53,040 --> 00:24:00,270 Now we know all about module's how we can import and export, as I told you when we were starting. 345 00:24:00,450 --> 00:24:06,380 So the modules are nothing more than function declarations or variable, so we export them. 346 00:24:06,690 --> 00:24:09,980 So there are two ways names to export and default export. 347 00:24:10,200 --> 00:24:14,730 Now you need to be careful when using default, but you don't want to mix things like I did here. 348 00:24:14,910 --> 00:24:15,180 Right? 349 00:24:15,570 --> 00:24:22,170 You should export one thing when you're using default export, but the name the convention for importing 350 00:24:22,170 --> 00:24:22,920 can be different. 351 00:24:23,130 --> 00:24:27,480 So here when you have the default export, you can have any name you want. 352 00:24:27,630 --> 00:24:34,500 But in the importing name export, you will not you should not mess up with names if you want to have 353 00:24:34,500 --> 00:24:36,900 a shorter names or you can create aliases. 354 00:24:37,140 --> 00:24:44,010 But what I usually do is I use the esoterics operator and I'm specifying for each module is coming from 355 00:24:44,160 --> 00:24:50,040 and then I access through that modules all the variables or the functions we are exporting because the 356 00:24:50,040 --> 00:24:56,430 asterisks will grab everything from here, set name, get name, full name so I can access them full 357 00:24:56,430 --> 00:24:58,260 name and even set name. 358 00:24:58,260 --> 00:24:58,580 Right. 359 00:24:59,420 --> 00:25:00,240 You want to try it. 360 00:25:00,720 --> 00:25:02,220 OK, let's try this one. 361 00:25:04,130 --> 00:25:04,700 So. 362 00:25:06,220 --> 00:25:10,750 Module one, the set name, and let's say Rick. 363 00:25:13,400 --> 00:25:16,220 Let's put my name in, get. 364 00:25:18,250 --> 00:25:19,210 Get name again. 365 00:25:21,440 --> 00:25:22,170 There you go. 366 00:25:23,060 --> 00:25:31,030 Now I have my name as there, so that is pretty much what I wanted to show you about Module's. 367 00:25:31,250 --> 00:25:36,790 So the module's will not be able we will not be able to achieve these because of the browser compatibility. 368 00:25:36,950 --> 00:25:38,450 So we will have to use. 369 00:25:40,940 --> 00:25:44,940 Bundle Dodgiest and bable, right, web browser, wi fi. 370 00:25:45,190 --> 00:25:52,190 Right, but now, because Chrome actually supports all of it, so we can just play around and show you 371 00:25:52,190 --> 00:25:54,130 how these modules are working. 372 00:25:54,380 --> 00:25:55,470 So very cool. 373 00:25:55,760 --> 00:25:59,830 Now, you see, we can just organize our code a little bit different. 374 00:26:00,050 --> 00:26:01,430 I don't see any function here. 375 00:26:01,430 --> 00:26:01,700 Right. 376 00:26:01,720 --> 00:26:03,560 I just call the function in. 377 00:26:03,860 --> 00:26:04,820 Same goes here. 378 00:26:05,000 --> 00:26:06,660 So that is pretty much it. 379 00:26:06,950 --> 00:26:08,440 I hope you enjoyed this lecture. 380 00:26:08,450 --> 00:26:11,150 It's a little bit complicated, but don't worry. 381 00:26:11,150 --> 00:26:12,410 Don't stress too much. 382 00:26:12,890 --> 00:26:21,290 Can we watch the video and see how I do the named and default expert and how we are importing both of 383 00:26:21,290 --> 00:26:21,440 them? 384 00:26:21,440 --> 00:26:24,800 So they're a little bit different, but yeah, they're not that different. 385 00:26:24,800 --> 00:26:25,140 Right. 386 00:26:25,190 --> 00:26:28,320 So I will see you in the next lecture. 387 00:26:28,550 --> 00:26:29,870 I hope you enjoyed this one. 388 00:26:29,870 --> 00:26:30,950 And stay safe.