1 00:00:00,330 --> 00:00:00,780 Beautiful. 2 00:00:01,170 --> 00:00:07,650 And once we understand the main problem with this code where, again, the moment code is technically 3 00:00:07,650 --> 00:00:14,430 still tiny, but as you can see, it is getting bigger and more annoying with every line. 4 00:00:14,850 --> 00:00:17,040 Now, let's talk about the modules. 5 00:00:17,430 --> 00:00:25,500 And I guess let me just give you the main idea first and then we'll talk about the implementations and 6 00:00:25,530 --> 00:00:26,610 all that good stuff. 7 00:00:26,910 --> 00:00:28,640 So first of all, what are the modules? 8 00:00:28,650 --> 00:00:35,820 Again, if you're familiar with S6 modules, you already have the idea, but essentially that is encapsulated 9 00:00:35,820 --> 00:00:36,420 code. 10 00:00:36,810 --> 00:00:44,240 And the key here is that we're only sharing what we want, so we're only sharing minimal. 11 00:00:44,490 --> 00:00:46,260 How will that look like in real life? 12 00:00:46,290 --> 00:00:53,030 Well, you can go here with secret and I can type your super secret. 13 00:00:53,250 --> 00:00:56,700 And so this variable is in this file. 14 00:00:57,620 --> 00:01:02,630 As we can see, can access anywhere, OK, so by mistake can just access it. 15 00:01:02,870 --> 00:01:04,330 I can override it now. 16 00:01:04,459 --> 00:01:09,340 You can make an argument that I mean, it is made with contact, but hopefully you get the gist. 17 00:01:09,740 --> 00:01:13,050 This is available to me everywhere in this file. 18 00:01:13,370 --> 00:01:19,180 So once we set up the module, you'll see what are the differences now? 19 00:01:19,370 --> 00:01:23,330 No use is common, just a library under the hood. 20 00:01:23,780 --> 00:01:25,700 That's what makes it happen. 21 00:01:26,080 --> 00:01:30,080 And every file in node is a module. 22 00:01:30,410 --> 00:01:34,040 Let me repeat, every file in node is a module. 23 00:01:34,370 --> 00:01:40,520 So those super that we will cover in just a few seconds, we have them by default. 24 00:01:40,550 --> 00:01:41,660 We don't need to do anything. 25 00:01:41,660 --> 00:01:44,950 We don't need to go to the store and buy some JavaScript code. 26 00:01:44,960 --> 00:01:49,430 No, we just get them by default the way the modules work. 27 00:01:49,610 --> 00:01:51,500 Well, we simply need to create a new file. 28 00:01:51,500 --> 00:01:51,790 Right. 29 00:01:52,130 --> 00:01:52,700 All right. 30 00:01:52,700 --> 00:01:59,990 Away set up of the names here, because eventually this code will be sitting in the filename by the 31 00:01:59,990 --> 00:02:04,100 three hyphen and then the module BASIX or whatever. 32 00:02:04,400 --> 00:02:09,020 But the names as well as the function, well, it's going to be in a separate file. 33 00:02:09,350 --> 00:02:14,870 So what I'm trying to say is that in a root cause, there's no folders or nothing. 34 00:02:14,870 --> 00:02:15,890 So everything is rote. 35 00:02:16,190 --> 00:02:21,950 I'm going to go with four and I'm doing that because eventually this is going to be three Hafen modules, 36 00:02:21,950 --> 00:02:27,860 something I'm going to go with maybe names or you can type first module, whatever you want. 37 00:02:28,190 --> 00:02:30,140 And I'm just going to go with names. 38 00:02:30,140 --> 00:02:30,770 Jazz. 39 00:02:31,850 --> 00:02:32,240 Awesome. 40 00:02:32,570 --> 00:02:40,610 And then I'll take these three variables from my address and I'll copy and paste in the names. 41 00:02:41,060 --> 00:02:45,680 And then also what I would want is to set up one more file five. 42 00:02:45,930 --> 00:02:48,260 So I'll say here, utils. 43 00:02:49,160 --> 00:02:51,590 Something generic, so we set that up. 44 00:02:52,470 --> 00:03:02,900 What I want is to grab this function from the images and copy and paste in your toes and now 64000 dollar 45 00:03:02,900 --> 00:03:03,410 question. 46 00:03:04,690 --> 00:03:10,600 Is this going to work or is it going to break the answer, is it going to break because we have no access 47 00:03:10,600 --> 00:03:14,730 right now to say hi or to John or Peter. 48 00:03:15,010 --> 00:03:20,140 So why don't we go to the names and console something? 49 00:03:20,440 --> 00:03:25,120 And as a sign of, yes, you can console like this in the abcess, it is a file. 50 00:03:25,450 --> 00:03:27,070 So by default it is in a module. 51 00:03:27,400 --> 00:03:33,400 But since we'll do most of our work in the name of the new troops first, why don't we go to names? 52 00:03:33,400 --> 00:03:39,060 And that way we can also see how we can run of the file just by using node. 53 00:03:39,460 --> 00:03:44,330 And what I would want your console log is the global by the name of module. 54 00:03:44,680 --> 00:03:51,700 So in the names go below or above the variables, it doesn't really matter and go with console log and 55 00:03:51,700 --> 00:03:56,410 then module and remember to run node and then whatever is the filename. 56 00:03:56,680 --> 00:03:59,980 So in my case it is for Dasch and the names. 57 00:04:00,340 --> 00:04:08,080 James, you run this and you'll notice something pretty, pretty cool where we have the object. 58 00:04:08,560 --> 00:04:11,490 And in that object we have quite a few properties. 59 00:04:11,920 --> 00:04:15,370 Not the one that I'm interested in the most is this exports one. 60 00:04:16,089 --> 00:04:19,180 It tells me that this export is an object. 61 00:04:20,019 --> 00:04:28,750 And the way the common syntax works, whatever I'm going to dump in that export, I'm going to be able 62 00:04:28,750 --> 00:04:31,490 to access anywhere in the application. 63 00:04:31,900 --> 00:04:33,220 So that's the key. 64 00:04:33,700 --> 00:04:36,630 Remember, we're only sharing the minimum. 65 00:04:37,000 --> 00:04:43,560 So it's up to us to set those values in that export object. 66 00:04:44,170 --> 00:04:46,770 We decide what goes in there previously. 67 00:04:46,800 --> 00:04:51,060 Remember, secret was accessible everywhere in my address. 68 00:04:51,760 --> 00:04:55,710 Now in names that can be, hey, you know what, John and Peter. 69 00:04:55,720 --> 00:04:55,990 Yeah. 70 00:04:56,750 --> 00:05:01,880 I'm sharing them anywhere, an application with an accident, but the secret variable, no, this is 71 00:05:01,880 --> 00:05:03,070 just going to be local. 72 00:05:03,440 --> 00:05:11,220 So I'm going to add here, I guess, the comment by that I'm local and where at least we understand. 73 00:05:11,240 --> 00:05:17,420 So this is going to be I mean, I'm not going to use global, but I'm just going to say that share. 74 00:05:17,750 --> 00:05:25,370 So we're sharing this with the rest of our application and that if I know that this is a object and 75 00:05:25,580 --> 00:05:28,250 it is sitting in the module, how does that work? 76 00:05:28,280 --> 00:05:30,740 Well, we go with module. 77 00:05:31,630 --> 00:05:39,640 That it is an object, so we go with export and we have multiple ways how we can set this up, but the 78 00:05:39,640 --> 00:05:43,300 most basic one will simply say that, yep, it is an object. 79 00:05:43,480 --> 00:05:48,640 And inside of that object, there's going to be two properties, John and Peter. 80 00:05:49,120 --> 00:05:55,600 And I can probably already guess that we're using a six index, since the key name is exactly the same 81 00:05:55,870 --> 00:05:58,360 as the value, we can simply pass it. 82 00:05:58,360 --> 00:05:58,570 Right. 83 00:05:58,600 --> 00:06:00,160 So we have John and Peter. 84 00:06:00,550 --> 00:06:03,160 So now what happens in the objects? 85 00:06:03,460 --> 00:06:05,940 We can access them so I can go back. 86 00:06:06,190 --> 00:06:11,650 And this is the case where we'll need to run that require a member and a global, as we talked about 87 00:06:11,650 --> 00:06:12,170 this function. 88 00:06:12,700 --> 00:06:20,290 So in order to share them, we need to use a module that exports and essentially I'm setting up the 89 00:06:20,290 --> 00:06:20,730 object. 90 00:06:21,090 --> 00:06:25,340 So when I go with whatever values I would like to share. 91 00:06:25,660 --> 00:06:33,640 Now, in order to access them, I need to go with require and I can assign it to a variable or I can 92 00:06:33,640 --> 00:06:34,440 simply require. 93 00:06:34,720 --> 00:06:40,990 Now, in our case, we will assign it to the variable and I'll use the same type of syntax where I'm 94 00:06:40,990 --> 00:06:43,540 going to go with names just so we can control lugnut. 95 00:06:43,990 --> 00:06:47,200 And this is going to be equal to or require. 96 00:06:47,350 --> 00:06:48,790 So that's my function. 97 00:06:49,120 --> 00:06:54,980 And as a parameter, we need to pass in where the module is located. 98 00:06:55,720 --> 00:06:58,260 So where is this data coming from? 99 00:06:58,690 --> 00:07:03,930 And always, always, always, always you will be setting up your own module. 100 00:07:03,940 --> 00:07:05,180 You have to start with that. 101 00:07:05,500 --> 00:07:10,570 Now, sometimes your modules will be two levels up and three levels up, whatever. 102 00:07:10,760 --> 00:07:17,290 Then of course, you'll start with the other, but you'll always start with this one, not because there's 103 00:07:17,290 --> 00:07:20,980 also going to be a third party modules and there's going to be built in modules and node. 104 00:07:21,280 --> 00:07:26,530 And then we'll use just the quotation marks then super, super important. 105 00:07:26,800 --> 00:07:30,160 Every time you create your module, you'll have to start with that. 106 00:07:30,160 --> 00:07:30,720 And then fourth. 107 00:07:31,270 --> 00:07:34,830 So essentially you're giving about Nonaka is what is the path? 108 00:07:34,840 --> 00:07:37,340 Well, I'm looking for the names, right. 109 00:07:37,600 --> 00:07:39,100 So I set up here the path. 110 00:07:39,310 --> 00:07:47,190 And then if I can Solok the names, I should see something pretty, pretty cool where I go with names. 111 00:07:47,620 --> 00:07:50,590 Now I'm going to run node and then app. 112 00:07:51,400 --> 00:07:53,670 Now keep in mind, we're not running names anymore. 113 00:07:53,680 --> 00:07:56,850 We go with node and objets. 114 00:07:56,860 --> 00:07:59,980 Now of course still complains that we have no access to high. 115 00:08:01,300 --> 00:08:07,150 Let me come on this one out, so let's say Noad and I'm jazz and check it out. 116 00:08:07,390 --> 00:08:16,000 We have the object with John, John and Peter and Peter and we explicitly said what we would want to 117 00:08:16,000 --> 00:08:16,530 export. 118 00:08:16,840 --> 00:08:18,130 So we go with exports. 119 00:08:18,490 --> 00:08:21,490 And that way no one has access to the secret. 120 00:08:21,880 --> 00:08:24,720 So this second one is only for this file. 121 00:08:25,090 --> 00:08:29,320 And of course, we can do the same thing in the utils as well. 122 00:08:29,320 --> 00:08:29,570 Right. 123 00:08:29,800 --> 00:08:34,750 So we have the say hi and we go module and exports. 124 00:08:35,080 --> 00:08:41,169 And I can just simply set it equal to now the reason why we're sending this up as a object, because 125 00:08:41,169 --> 00:08:44,310 I had multiple things that John and Peter and I were in. 126 00:08:44,330 --> 00:08:48,610 Next video, I'll show you alternative syntax, how you can also set this up. 127 00:08:48,850 --> 00:08:53,050 But in this case, I have object and then I'm selling these properties. 128 00:08:53,050 --> 00:08:58,680 And I said, no, this is just my preferred way of actually using the exports. 129 00:08:58,690 --> 00:09:01,600 Again, there's multiple ways how we can do that. 130 00:09:01,600 --> 00:09:05,350 And I will cover the other ways in the next video. 131 00:09:05,590 --> 00:09:07,260 But this is just my preferred method. 132 00:09:07,270 --> 00:09:14,680 That's why right away said my exports equal to an object and then pass these two properties in Utah. 133 00:09:14,800 --> 00:09:20,890 Since I only have one thing which is going to go with say hi, this it I'm saying that I'm going to 134 00:09:20,890 --> 00:09:22,750 be exporting my function. 135 00:09:23,110 --> 00:09:25,480 So say say hi Mexico. 136 00:09:25,750 --> 00:09:33,220 And once I have exported my function, I need to go back to the abcess, import my function, the same 137 00:09:33,220 --> 00:09:33,520 name. 138 00:09:34,760 --> 00:09:42,410 And I'm going to go with say say hi, and that one is going to be coming from the different file, of 139 00:09:42,410 --> 00:09:42,690 course. 140 00:09:42,710 --> 00:09:45,790 So we go with five and then utils. 141 00:09:46,390 --> 00:09:52,820 I notice here how we don't need to pass in the gas if it is addressed, while we just simply omit the 142 00:09:52,820 --> 00:09:58,220 extension as long as the filename of course, matches, and then I can remove it. 143 00:09:58,230 --> 00:09:59,680 Now if you want, you can cancel log. 144 00:09:59,750 --> 00:10:06,140 But I already know that I'm going to have the function of the URL on comment and let me clear the console. 145 00:10:06,140 --> 00:10:13,400 And again, we run the node and the app just now, of course, we have a different letter where it says, 146 00:10:13,400 --> 00:10:15,170 well, John is not defined. 147 00:10:15,530 --> 00:10:16,280 All right. 148 00:10:16,460 --> 00:10:19,520 But I know that John is sitting in a names. 149 00:10:19,550 --> 00:10:19,800 Right. 150 00:10:20,120 --> 00:10:22,700 So here we have multiple flavors. 151 00:10:23,060 --> 00:10:25,910 Either you can restructure it. 152 00:10:26,390 --> 00:10:31,300 So instead of going with names, I can go John and Peter. 153 00:10:31,580 --> 00:10:33,230 That is definitely one option. 154 00:10:33,590 --> 00:10:36,140 Or I can go with property names. 155 00:10:36,140 --> 00:10:36,370 Right. 156 00:10:36,380 --> 00:10:39,320 So I can say names and then John. 157 00:10:40,160 --> 00:10:46,160 And then the second one is names and Peter names and Peter. 158 00:10:46,580 --> 00:10:48,590 And now hopefully everything works. 159 00:10:48,990 --> 00:10:52,610 Otherwise you're probably thinking that I'm just messing with you. 160 00:10:52,940 --> 00:10:53,910 There is no way. 161 00:10:54,050 --> 00:10:55,270 Hello there, Susan. 162 00:10:55,560 --> 00:10:57,080 John and Peter. 163 00:10:57,590 --> 00:11:01,400 And effectively what we did, we separated our concerns. 164 00:11:01,710 --> 00:11:09,170 Then the main idea is that every file by default is a module and that when it comes to a modules, we 165 00:11:09,170 --> 00:11:11,510 are in charge what we are sharing. 166 00:11:11,840 --> 00:11:19,850 And in order to export or make it something available from this module, we go with a module exports 167 00:11:20,330 --> 00:11:27,230 and then we just set up the functionality, whether this is going to be a object that we're exporting 168 00:11:27,500 --> 00:11:30,700 or we're simply exporting as a function. 169 00:11:31,400 --> 00:11:34,580 So we set this equal to to the exports. 170 00:11:34,850 --> 00:11:42,590 And if you're familiar with its six modules, as you can see, this is very familiar to the export. 171 00:11:43,780 --> 00:11:49,240 Default online, whatever you're exporting as default, whether not it's a function, whether that is 172 00:11:49,240 --> 00:11:53,280 a react component or whatever, not as much sporting as default. 173 00:11:53,440 --> 00:12:00,610 So, of course, when I'm importing this in this case, Abcess, well, I already know that this is 174 00:12:00,610 --> 00:12:01,030 a function. 175 00:12:01,270 --> 00:12:03,280 So I could name this whatever I would want. 176 00:12:03,490 --> 00:12:04,720 And the same goes here. 177 00:12:05,200 --> 00:12:12,460 Since I'm exporting this as object, I can call this check and I'll be able to access the property as 178 00:12:12,460 --> 00:12:17,790 long as the name matches to whatever I set up over here. 179 00:12:18,130 --> 00:12:22,900 So let me save this and we can talk about our next topic.