Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,120 --> 00:00:03,960 Let's now use modules and practice, 2 2 00:00:03,960 --> 00:00:07,520 to make sure that we really understand how they work, 3 3 00:00:07,520 --> 00:00:10,723 and to import and export values between them. 4 4 00:00:12,580 --> 00:00:15,780 And let's start with the simplest scenario of all, 5 5 00:00:15,780 --> 00:00:18,210 which is to simply import a module, 6 6 00:00:18,210 --> 00:00:20,610 but without importing any value. 7 7 00:00:20,610 --> 00:00:22,220 And so that's also possible, 8 8 00:00:22,220 --> 00:00:25,133 and so let's use that as a starting point here. 9 9 00:00:26,400 --> 00:00:29,173 So let's then create a new module. 10 10 00:00:30,050 --> 00:00:30,883 Okay? 11 11 00:00:30,883 --> 00:00:35,030 So as always, we already start with a script.js, 12 12 00:00:35,030 --> 00:00:37,210 but now as we create a new module, 13 13 00:00:37,210 --> 00:00:39,283 we simply have to create a new file. 14 14 00:00:40,120 --> 00:00:41,910 So new file, 15 15 00:00:41,910 --> 00:00:45,541 and here, I will use the example of a "shopping-cart", 16 16 00:00:45,541 --> 00:00:48,775 and so we're gonna have a module called, 17 17 00:00:48,775 --> 00:00:51,403 shoppingcart.jS, 18 18 00:00:52,430 --> 00:00:53,840 and in module names, 19 19 00:00:53,840 --> 00:00:57,353 it's also a convention to use camelCase names. 20 20 00:00:58,710 --> 00:00:59,543 All right? 21 21 00:01:00,840 --> 00:01:04,140 So this one here will be the importing 22 22 00:01:06,030 --> 00:01:06,903 module, 23 23 00:01:08,600 --> 00:01:11,973 and this will be the exporting module. 24 24 00:01:14,450 --> 00:01:15,630 And to start, 25 25 00:01:15,630 --> 00:01:18,380 let's actually lock this to the console, 26 26 00:01:18,380 --> 00:01:19,920 just, 27 27 00:01:19,920 --> 00:01:21,310 so we can see 28 28 00:01:21,310 --> 00:01:23,633 that the module is actually being imported. 29 29 00:01:24,490 --> 00:01:28,140 So this one here, will lock to the console exporting module, 30 30 00:01:28,140 --> 00:01:31,163 and this one should look to the console importing module. 31 31 00:01:33,780 --> 00:01:34,903 So like this, 32 32 00:01:35,790 --> 00:01:38,080 with the quotes, of course, 33 33 00:01:38,080 --> 00:01:42,100 and now we also have to import, that other module, 34 34 00:01:42,100 --> 00:01:46,140 And let's do that here first, so import 35 35 00:01:46,140 --> 00:01:49,345 and then a string with the location of the module. 36 36 00:01:49,345 --> 00:01:53,690 So ./, which simply means to current location, 37 37 00:01:53,690 --> 00:01:57,590 and then here VS code already gives us these options. 38 38 00:01:57,590 --> 00:02:01,050 So let's choose here shoppingcart.js 39 39 00:02:02,360 --> 00:02:06,760 and you see that VS code automatically omits the js here. 40 40 00:02:08,036 --> 00:02:11,073 So the name is actually this one with the js, 41 41 00:02:11,073 --> 00:02:15,810 but ES modules actually also work without the extension. 42 42 00:02:15,810 --> 00:02:18,830 but for now let's actually leave the extension there, 43 43 00:02:18,830 --> 00:02:20,903 just to make it a little bit more clear. 44 44 00:02:21,830 --> 00:02:25,093 So, let's start this cart here. 45 45 00:02:26,580 --> 00:02:28,930 So as always live server, 46 46 00:02:28,930 --> 00:02:32,453 but then we will see that this is not yet going to work. 47 47 00:02:33,440 --> 00:02:35,490 So let's take a look at the console here. 48 48 00:02:36,379 --> 00:02:39,480 And so what we see cannot use import statement 49 49 00:02:39,480 --> 00:02:41,123 outside a module. 50 50 00:02:42,150 --> 00:02:44,600 So why is that happening? 51 51 00:02:44,600 --> 00:02:46,820 Well, remember from the last lecture, 52 52 00:02:46,820 --> 00:02:50,724 that when we want to connect a module to the HTML file, 53 53 00:02:50,724 --> 00:02:54,863 we actually need to specify the type attribute. 54 54 00:02:56,480 --> 00:03:00,030 So here we have to say 55 55 00:03:00,030 --> 00:03:04,790 that this is off the type module. 56 56 00:03:04,790 --> 00:03:08,143 Okay, and so now it actually worked. 57 57 00:03:10,210 --> 00:03:13,590 So let's go back here and analyze this. 58 58 00:03:13,590 --> 00:03:15,470 And so here in the console, we see 59 59 00:03:15,470 --> 00:03:19,130 that the first log is actually exporting module 60 60 00:03:19,130 --> 00:03:23,220 only then importing model is locked to the console. 61 61 00:03:23,220 --> 00:03:27,510 And so this means that in fact, this cart here is executed 62 62 00:03:27,510 --> 00:03:30,970 before any cart in the importing module. 63 63 00:03:30,970 --> 00:03:34,350 So exactly what I explained to you in the last lecture. 64 64 00:03:34,350 --> 00:03:36,860 So the cart in this module here is passed, 65 65 00:03:36,860 --> 00:03:38,700 and before it is executed, 66 66 00:03:38,700 --> 00:03:40,260 all the cart in the modules 67 67 00:03:40,260 --> 00:03:43,610 that it imports is executed first. 68 68 00:03:43,610 --> 00:03:44,443 Right?, 69 69 00:03:44,443 --> 00:03:47,643 And the same is true if we had this lock here before. 70 70 00:03:48,870 --> 00:03:50,050 Okay? 71 71 00:03:50,050 --> 00:03:52,372 So remember that all the importing statements 72 72 00:03:52,372 --> 00:03:55,220 are basically hoisted to the top. 73 73 00:03:55,220 --> 00:03:58,510 And so usually, this is actually also how we write it. 74 74 00:03:58,510 --> 00:04:02,003 So all the imports statements at the top of the file, 75 75 00:04:02,940 --> 00:04:07,010 and also note how I didn't use strict mode here, 76 76 00:04:07,010 --> 00:04:09,670 and that's because as you learned in the last video, 77 77 00:04:09,670 --> 00:04:13,653 all modules are executed in strict mode by default. 78 78 00:04:14,850 --> 00:04:18,030 But now let's go back here to the "shopping-cart" module 79 79 00:04:18,030 --> 00:04:19,723 and define some variables. 80 80 00:04:21,400 --> 00:04:22,603 So let's just say, 81 81 00:04:24,450 --> 00:04:27,340 shipping cost = 10. 82 82 00:04:27,340 --> 00:04:30,280 And let's also say we have an empty card 83 83 00:04:30,280 --> 00:04:32,693 which is like an array. 84 84 00:04:33,940 --> 00:04:36,160 So an empty array for now. 85 85 00:04:36,160 --> 00:04:39,680 Now variables that are declared inside of a module, 86 86 00:04:39,680 --> 00:04:41,870 So just like these two ones here, 87 87 00:04:41,870 --> 00:04:45,270 are actually sculpt to this module. 88 88 00:04:45,270 --> 00:04:47,540 So basically inside a module, 89 89 00:04:47,540 --> 00:04:51,700 the module itself is like the top level scope. 90 90 00:04:51,700 --> 00:04:55,670 And so by default, this means that all top level variables 91 91 00:04:55,670 --> 00:04:59,500 are private inside of this variable. 92 92 00:04:59,500 --> 00:05:01,600 So unlike traditional scripts, 93 93 00:05:01,600 --> 00:05:04,010 which would put all of these variables here 94 94 00:05:04,010 --> 00:05:05,740 in the global scope, 95 95 00:05:05,740 --> 00:05:07,860 but again, not modules, 96 96 00:05:07,860 --> 00:05:11,253 and so that's why right here, we cannot do this. 97 97 00:05:14,040 --> 00:05:14,873 All right? 98 98 00:05:14,873 --> 00:05:17,093 So "shipping-cost" is not defined. 99 99 00:05:18,840 --> 00:05:19,780 All right? 100 100 00:05:19,780 --> 00:05:21,100 So the "shipping-costs" 101 101 00:05:21,100 --> 00:05:23,400 and cart variables are scoped, 102 102 00:05:23,400 --> 00:05:25,820 to the current module basically, 103 103 00:05:25,820 --> 00:05:28,103 and so we can only use them here. 104 104 00:05:28,103 --> 00:05:32,468 Now, if we wanted to use them in the script.js module 105 105 00:05:32,468 --> 00:05:35,580 then we would have to use exports. 106 106 00:05:35,580 --> 00:05:39,420 And in ES modules, there are two types of exports, 107 107 00:05:39,420 --> 00:05:43,330 Named Exports and Default Exports. 108 108 00:05:43,330 --> 00:05:46,470 And named imports is actually the simplest way 109 109 00:05:46,470 --> 00:05:48,685 of exporting something from a module, 110 110 00:05:48,685 --> 00:05:51,920 because all we have to do is to put export 111 111 00:05:51,920 --> 00:05:56,160 in front of anything, that we might want to export. 112 112 00:05:56,160 --> 00:05:59,781 So let's say that we want to create this method here 113 113 00:05:59,781 --> 00:06:01,583 "add to cart" 114 114 00:06:04,540 --> 00:06:07,563 and it should be a function that takes a product, 115 115 00:06:09,290 --> 00:06:10,393 and the quantity. 116 116 00:06:11,240 --> 00:06:15,570 And then it pushes basically a new object to the cart, 117 117 00:06:15,570 --> 00:06:16,670 so to that cart array, 118 118 00:06:21,494 --> 00:06:24,920 and then let's also lock something to the console, 119 119 00:06:24,920 --> 00:06:26,053 like quantity, 120 120 00:06:28,100 --> 00:06:29,593 and then the product, 121 121 00:06:30,500 --> 00:06:32,463 was added to the cart. 122 122 00:06:33,730 --> 00:06:34,630 Okay? 123 123 00:06:34,630 --> 00:06:36,390 And so again, by now 124 124 00:06:36,390 --> 00:06:39,900 this variable is private inside of this module, 125 125 00:06:39,900 --> 00:06:43,630 but if we wanted to now export it, so that we can import it, 126 126 00:06:43,630 --> 00:06:45,330 in some other module, 127 127 00:06:45,330 --> 00:06:49,390 all we have to do is write export right here. 128 128 00:06:49,390 --> 00:06:53,263 And so this then creates a named export from this module. 129 129 00:06:54,290 --> 00:06:58,260 And so now we can then import that variable right here, 130 130 00:06:58,260 --> 00:07:01,710 we just have to write it with the exact same name. 131 131 00:07:01,710 --> 00:07:05,607 So the variable is called "add to cart", right here. 132 132 00:07:07,460 --> 00:07:10,910 and so, right here in this module, 133 133 00:07:10,910 --> 00:07:14,440 and so therefore we have to call it that here as well. 134 134 00:07:14,440 --> 00:07:16,870 Now what we're missing here is the from, 135 135 00:07:16,870 --> 00:07:19,050 so this is quite easy to understand, 136 136 00:07:19,050 --> 00:07:21,740 it reads just like a normal sentence. 137 137 00:07:21,740 --> 00:07:26,288 So we want to import "add to cart" from this module. 138 138 00:07:26,288 --> 00:07:29,970 And again, "add to cart", this variable name here, 139 139 00:07:29,970 --> 00:07:32,283 has to be exactly the same as this one. 140 140 00:07:33,640 --> 00:07:34,530 okay? 141 141 00:07:34,530 --> 00:07:38,750 Now here we are just missing, actually curly braces 142 142 00:07:38,750 --> 00:07:41,480 around this here, like this, 143 143 00:07:41,480 --> 00:07:44,280 so now it's going to work, 144 144 00:07:44,280 --> 00:07:46,470 and to Syntax without the curly braces. 145 145 00:07:46,470 --> 00:07:48,850 we will see a little bit later. 146 146 00:07:48,850 --> 00:07:50,590 But again with named imports, 147 147 00:07:50,590 --> 00:07:52,540 you have to give them here the same name, 148 148 00:07:52,540 --> 00:07:54,480 and you actually have to put them 149 149 00:07:54,480 --> 00:07:56,850 inside curly braces like this. 150 150 00:07:58,130 --> 00:08:01,460 And so now here we are able to call this function 151 151 00:08:01,460 --> 00:08:05,190 as if it was defined here in this same scope. 152 152 00:08:05,190 --> 00:08:08,370 So let's just say, we want to add five breads 153 153 00:08:08,370 --> 00:08:11,160 to the "shopping-cart", you know, 154 154 00:08:11,160 --> 00:08:12,750 indeed it works. 155 155 00:08:12,750 --> 00:08:14,710 So here we got dad log, 156 156 00:08:14,710 --> 00:08:17,310 now that is coming from the "add to cart" function 157 157 00:08:17,310 --> 00:08:20,433 that is indeed defined in this module here. 158 158 00:08:21,310 --> 00:08:22,650 Now, just keep in mind 159 159 00:08:22,650 --> 00:08:26,273 that exports always need to happen in top level cart, 160 160 00:08:28,440 --> 00:08:31,033 so it wouldn't work like this. 161 161 00:08:32,650 --> 00:08:33,483 All right? 162 162 00:08:33,483 --> 00:08:36,803 So then indeed you get an unexpected token export. 163 163 00:08:39,170 --> 00:08:40,903 So let's put it back of course. 164 164 00:08:42,370 --> 00:08:44,570 And so now here we are back. 165 165 00:08:44,570 --> 00:08:47,490 And of course we can also export multiple things 166 166 00:08:47,490 --> 00:08:50,870 from a module using Named Exports. 167 167 00:08:50,870 --> 00:08:55,540 And actually, that is the main use case of Named Exports, 168 168 00:08:55,540 --> 00:08:59,240 so, basically when we want to export multiple things. 169 169 00:08:59,240 --> 00:09:00,100 Now, okay? 170 170 00:09:00,100 --> 00:09:02,840 Now we can also export multiple things, 171 171 00:09:02,840 --> 00:09:06,150 at the same time, using Named Exports. 172 172 00:09:06,150 --> 00:09:09,600 So we can just, let's say, declare some variables here, 173 173 00:09:09,600 --> 00:09:11,683 like total price, 174 174 00:09:12,608 --> 00:09:14,560 237 175 175 00:09:14,560 --> 00:09:18,713 and total quantity, 176 176 00:09:19,970 --> 00:09:21,303 let's say 23. 177 177 00:09:22,560 --> 00:09:27,240 And so now we can export all of this at the same time, 178 178 00:09:27,240 --> 00:09:31,693 again, using Named Exports, by writing total price 179 179 00:09:31,693 --> 00:09:33,833 and total quantity. 180 180 00:09:34,780 --> 00:09:37,910 So this is a little bit like exporting an object 181 181 00:09:37,910 --> 00:09:39,720 from this module. 182 182 00:09:39,720 --> 00:09:43,970 And so now, just like before we can then come here, 183 183 00:09:43,970 --> 00:09:46,874 and import these variables using the same name, 184 184 00:09:46,874 --> 00:09:49,870 and again, that's inside of the curly braces, 185 185 00:09:49,870 --> 00:09:51,533 just like we export it here. 186 186 00:09:53,850 --> 00:09:56,650 So that's "add to cart", 187 187 00:09:56,650 --> 00:10:00,450 total price and total quantity. 188 188 00:10:00,450 --> 00:10:04,633 And so of course we can then go ahead and use them here, 189 189 00:10:05,800 --> 00:10:08,460 and in this case, all we do is to lock them, 190 190 00:10:08,460 --> 00:10:12,800 but indeed, now we get access to these values from here, 191 191 00:10:12,800 --> 00:10:16,580 and indeed now we get access to these values here, 192 192 00:10:16,580 --> 00:10:19,580 in this main importing module. 193 193 00:10:19,580 --> 00:10:23,810 Now actually we can change the name of the inputs as well, 194 194 00:10:23,810 --> 00:10:26,782 so for example, if we wanted to call the total price, 195 195 00:10:26,782 --> 00:10:29,763 simply price, we could write this, 196 196 00:10:30,840 --> 00:10:33,393 So total price as price. 197 197 00:10:34,470 --> 00:10:37,653 And so then here, it would no longer be called total price. 198 198 00:10:38,840 --> 00:10:39,680 Right? 199 199 00:10:39,680 --> 00:10:41,450 So it's no longer there, 200 200 00:10:41,450 --> 00:10:46,020 but instead it is simply called price. 201 201 00:10:46,020 --> 00:10:49,730 And we could actually even do that here in the exports. 202 202 00:10:49,730 --> 00:10:51,460 So here we could also write, 203 203 00:10:51,460 --> 00:10:56,460 write export total quantity, just as QT, 204 204 00:10:56,780 --> 00:10:57,910 let's say. 205 205 00:10:57,910 --> 00:10:59,010 And so then here, 206 206 00:10:59,010 --> 00:11:02,720 it would no longer be called total quantity, 207 207 00:11:02,720 --> 00:11:03,893 but TQ. 208 208 00:11:08,760 --> 00:11:11,633 And now that doesn't work, so let's go back. 209 209 00:11:13,060 --> 00:11:16,333 So it's TQ, So total quantity. 210 210 00:11:17,260 --> 00:11:21,570 And so now indeed, we are back to having 23 there. 211 211 00:11:21,570 --> 00:11:24,230 So this is all very flexible as you can see, 212 212 00:11:24,230 --> 00:11:27,770 and we can play around with this as we wish. 213 213 00:11:27,770 --> 00:11:28,730 Okay? 214 214 00:11:28,730 --> 00:11:33,020 And actually we can take this importing even further, 215 215 00:11:33,020 --> 00:11:36,040 because we can also import all the exports 216 216 00:11:36,040 --> 00:11:38,860 of a module at the same time. 217 217 00:11:38,860 --> 00:11:42,130 So that's import and then everything. 218 218 00:11:42,130 --> 00:11:44,980 So that's usually the meaning of the star, 219 219 00:11:44,980 --> 00:11:49,980 and then as and here we can give it some name that we want, 220 220 00:11:50,000 --> 00:11:54,580 So let's call it "shopping-cart" and with a S here, 221 221 00:11:54,580 --> 00:11:57,200 so a little bit like a class name. 222 222 00:11:57,200 --> 00:11:58,033 Okay? 223 223 00:11:58,033 --> 00:12:01,310 So that's kind of the convention when we import everything 224 224 00:12:01,310 --> 00:12:03,870 into an object like this. 225 225 00:12:03,870 --> 00:12:06,270 So basically, this year we'll create an object 226 226 00:12:06,270 --> 00:12:10,320 containing everything that is exported from the module 227 227 00:12:10,320 --> 00:12:12,123 that we will specify here. 228 228 00:12:13,210 --> 00:12:14,163 So from, 229 229 00:12:15,577 --> 00:12:16,860 "shopping-cart". 230 230 00:12:16,860 --> 00:12:20,100 And so this will then basically create a namespace, 231 231 00:12:20,100 --> 00:12:23,743 for all of the values, exported from that module. 232 232 00:12:24,790 --> 00:12:26,970 Let's just comment out this one here, 233 233 00:12:26,970 --> 00:12:29,630 and I will put this code that is more related 234 234 00:12:29,630 --> 00:12:32,320 to this import, and they are here, 235 235 00:12:32,320 --> 00:12:34,073 So actually I want all of it here. 236 236 00:12:36,200 --> 00:12:38,870 So put that here and comment it out, 237 237 00:12:38,870 --> 00:12:42,403 like this, because now we are doing it differently. 238 238 00:12:43,320 --> 00:12:45,913 Let's just put everything here, 239 239 00:12:46,759 --> 00:12:50,763 just so we get some new cart here. 240 240 00:12:51,820 --> 00:12:54,545 Now it tells us that this module doesn't exist, 241 241 00:12:54,545 --> 00:12:56,700 and that's because by default, 242 242 00:12:56,700 --> 00:12:59,890 a VS code again removed this js. 243 243 00:12:59,890 --> 00:13:01,890 And in fact it is necessary, 244 244 00:13:01,890 --> 00:13:04,800 It is only not necessary in some other cases, 245 245 00:13:04,800 --> 00:13:05,973 that we will see later. 246 246 00:13:07,480 --> 00:13:09,110 So now it works again, 247 247 00:13:09,110 --> 00:13:12,440 and we are back to having our logs here. 248 248 00:13:12,440 --> 00:13:14,050 And so now whenever we want to use 249 249 00:13:14,050 --> 00:13:17,480 something that was exported like this, "add to cart" 250 250 00:13:17,480 --> 00:13:18,350 function 251 251 00:13:18,350 --> 00:13:21,293 then we have to basically take that from this object. 252 252 00:13:22,300 --> 00:13:25,453 So, "add to cart", and let's again say bread, 253 253 00:13:27,140 --> 00:13:27,973 five. 254 254 00:13:28,830 --> 00:13:29,780 All right? 255 255 00:13:29,780 --> 00:13:31,908 So here it is again. 256 256 00:13:31,908 --> 00:13:35,203 And so basically if we think about this, 257 257 00:13:35,203 --> 00:13:39,400 this module here is now basically exporting a public API, 258 258 00:13:39,400 --> 00:13:41,500 just like a class. 259 259 00:13:41,500 --> 00:13:43,900 So it's as if this object here, 260 260 00:13:43,900 --> 00:13:46,520 was an object created from a class, 261 261 00:13:46,520 --> 00:13:48,950 which now has these methods, 262 262 00:13:48,950 --> 00:13:51,433 and also, for example these properties, 263 263 00:13:52,730 --> 00:13:57,673 like shoppingcart.total price. 264 264 00:13:59,210 --> 00:14:00,060 Right?, 265 265 00:14:00,060 --> 00:14:03,303 So that's the other Named Export from this module. 266 266 00:14:05,100 --> 00:14:06,410 Now of course we are not trying 267 267 00:14:06,410 --> 00:14:09,173 to replace classes with modules. 268 268 00:14:09,173 --> 00:14:12,330 I just wanted to turn your attention to the fact, 269 269 00:14:12,330 --> 00:14:15,540 that some things here look pretty similar indeed. 270 270 00:14:15,540 --> 00:14:16,460 Right?, 271 271 00:14:16,460 --> 00:14:19,470 And actually we can say daddy module exports, 272 272 00:14:19,470 --> 00:14:21,340 kind of a public API, 273 273 00:14:21,340 --> 00:14:24,380 because everything else of course stays private 274 274 00:14:24,380 --> 00:14:25,510 inside of the module. 275 275 00:14:25,510 --> 00:14:27,050 All right? 276 276 00:14:27,050 --> 00:14:31,966 And that's basically how named imports and exports work. 277 277 00:14:31,966 --> 00:14:36,107 So we saw how we can export just one value 278 278 00:14:36,107 --> 00:14:40,240 and also how we can export multiple values at once, 279 279 00:14:40,240 --> 00:14:44,440 and also how we can change the name of the Named Exports, 280 280 00:14:44,440 --> 00:14:47,890 and also of the named import, 281 281 00:14:47,890 --> 00:14:49,460 like this. 282 282 00:14:49,460 --> 00:14:51,820 Then we learned how we can import everything 283 283 00:14:51,820 --> 00:14:53,140 at the same time. 284 284 00:14:53,140 --> 00:14:56,390 So all the named imports at once. 285 285 00:14:56,390 --> 00:14:57,370 All right? 286 286 00:14:57,370 --> 00:15:01,520 And so now it's time to talk about Default Exports. 287 287 00:15:01,520 --> 00:15:05,646 So I said that they were Named Exports and Default Export, 288 288 00:15:05,646 --> 00:15:07,500 and so let's now talk a little bit 289 289 00:15:07,500 --> 00:15:10,660 about these exports defaults. 290 290 00:15:10,660 --> 00:15:12,976 So usually, we use Default Exports 291 291 00:15:12,976 --> 00:15:17,050 when we only want to export one thing per module, 292 292 00:15:17,050 --> 00:15:20,870 and so that's the reason why they are called default. 293 293 00:15:20,870 --> 00:15:22,860 And so it works like this, 294 294 00:15:22,860 --> 00:15:27,220 so pretty similar, but then we have to write default, 295 295 00:15:27,220 --> 00:15:30,173 and then here, we want to simply export a value. 296 296 00:15:31,240 --> 00:15:35,280 So for example, if we wanted to export the same function, 297 297 00:15:35,280 --> 00:15:39,210 we would simply export the value itself, 298 298 00:15:39,210 --> 00:15:40,483 so not the variable. 299 299 00:15:41,700 --> 00:15:45,280 And here you see, that no name is involved at all. 300 300 00:15:45,280 --> 00:15:48,200 We are simply exporting this value. 301 301 00:15:48,200 --> 00:15:50,410 And so then when we import it 302 302 00:15:50,410 --> 00:15:53,720 we can basically give it any name that we want. 303 303 00:15:55,730 --> 00:15:59,003 So let's say import add from, 304 304 00:16:01,280 --> 00:16:04,010 shoppingcart.js 305 305 00:16:04,010 --> 00:16:07,890 And so this will then import the Default Export, 306 306 00:16:07,890 --> 00:16:10,210 no matter what that's called. 307 307 00:16:10,210 --> 00:16:12,490 And in fact it's not called anything. 308 308 00:16:12,490 --> 00:16:16,053 And so, yeah, we can give it any name here that we want. 309 309 00:16:17,210 --> 00:16:18,790 And right now, we are actually 310 310 00:16:18,790 --> 00:16:23,090 importing the same module here twice as you see, 311 311 00:16:23,090 --> 00:16:26,260 now that's not a problem, as you see here now, 312 312 00:16:26,260 --> 00:16:28,840 but usually we don't do that. 313 313 00:16:28,840 --> 00:16:29,780 Okay? 314 314 00:16:29,780 --> 00:16:31,800 So we didn't get any error, 315 315 00:16:31,800 --> 00:16:35,310 but it is also not advisable, I would say. 316 316 00:16:35,310 --> 00:16:37,870 So let's take this out here for now. 317 317 00:16:37,870 --> 00:16:41,423 And now let's once again try to, 318 318 00:16:42,850 --> 00:16:45,433 actually use the value that we imported here. 319 319 00:16:47,030 --> 00:16:50,593 So let's add two pizzas, and here they are. 320 320 00:16:53,020 --> 00:16:54,050 All right? 321 321 00:16:54,050 --> 00:16:56,400 And we could even mix all 322 322 00:16:56,400 --> 00:16:59,200 of them in the same import statement. 323 323 00:16:59,200 --> 00:17:01,620 So if we wanted, we could have default 324 324 00:17:01,620 --> 00:17:06,560 and named imports and exports all at the same time. 325 325 00:17:06,560 --> 00:17:09,200 So here we would just have to take this one, 326 326 00:17:09,200 --> 00:17:12,990 and then put that here after a comma, 327 327 00:17:12,990 --> 00:17:15,440 and then we could take a look, 328 328 00:17:15,440 --> 00:17:18,793 for example, at the price once again. 329 329 00:17:19,870 --> 00:17:21,150 All right? 330 330 00:17:21,150 --> 00:17:23,810 However in practice, we usually never mix 331 331 00:17:23,810 --> 00:17:27,600 Named and Default Exports in the same module. 332 332 00:17:27,600 --> 00:17:30,680 So this is not really desirable here. 333 333 00:17:30,680 --> 00:17:33,993 Let me just comment it just so you see that we can do it, 334 334 00:17:34,870 --> 00:17:38,283 but I will then leave it as it was before. 335 335 00:17:39,852 --> 00:17:40,773 All right? 336 336 00:17:41,760 --> 00:17:44,053 So of course now the price is not defined, 337 337 00:17:47,040 --> 00:17:49,700 but now we should be good to go. 338 338 00:17:49,700 --> 00:17:52,100 So the preferred style is actually 339 339 00:17:52,100 --> 00:17:55,640 to just use one default expert per module, 340 340 00:17:55,640 --> 00:17:57,893 and then import that here like we did. 341 341 00:17:58,940 --> 00:18:00,950 And in fact, that's the reason why 342 342 00:18:00,950 --> 00:18:04,950 it is easier to import a Default Exports. 343 343 00:18:04,950 --> 00:18:08,340 So here we don't even need to use the curly braces, 344 344 00:18:08,340 --> 00:18:12,310 and the designers of the specification, did that on purpose. 345 345 00:18:12,310 --> 00:18:16,890 So again, to make it easier, to import default exports 346 346 00:18:16,890 --> 00:18:19,590 but of course that's not a rigid rule, 347 347 00:18:19,590 --> 00:18:21,520 that we always need to follow, 348 348 00:18:21,520 --> 00:18:25,940 so, we can do whatever is best for any given situation. 349 349 00:18:25,940 --> 00:18:29,090 However, what you probably should really not do 350 350 00:18:29,090 --> 00:18:33,770 is to mix Default and Named Exports like we did here, 351 351 00:18:33,770 --> 00:18:36,600 so avoid that to reduce complexity. 352 352 00:18:36,600 --> 00:18:39,680 But besides that, you can use Named Exports 353 353 00:18:39,680 --> 00:18:44,590 or Default Exports, whatever works best in your situations. 354 354 00:18:44,590 --> 00:18:47,940 Now, of course, we will use all of this in the real world, 355 355 00:18:47,940 --> 00:18:50,090 in our next big project. 356 356 00:18:50,090 --> 00:18:53,130 And so by then, you will get a good feeling for how all 357 357 00:18:53,130 --> 00:18:54,210 of this works, 358 358 00:18:54,210 --> 00:18:56,840 a little bit better in the real world. 359 359 00:18:56,840 --> 00:18:57,920 All right? 360 360 00:18:57,920 --> 00:18:58,753 But with this, 361 361 00:18:58,753 --> 00:19:02,600 you now already have a pretty good idea of how importing 362 362 00:19:02,600 --> 00:19:07,150 and exporting values between modules actually works. 363 363 00:19:07,150 --> 00:19:09,370 But before finishing this lecture, 364 364 00:19:09,370 --> 00:19:11,196 I actually also wanted to prove you, 365 365 00:19:11,196 --> 00:19:16,196 that imports are in fact, a life connection to exports. 366 366 00:19:16,630 --> 00:19:18,190 So that's something that I mentioned 367 367 00:19:18,190 --> 00:19:19,981 by the end of last video, 368 368 00:19:19,981 --> 00:19:23,370 and it's something really important to keep in mind, 369 369 00:19:23,370 --> 00:19:25,423 and so let's take a look at this. 370 370 00:19:26,800 --> 00:19:29,045 And so actually what I will start doing, 371 371 00:19:29,045 --> 00:19:32,713 is to now export this cart array here. 372 372 00:19:34,169 --> 00:19:35,343 All right? 373 373 00:19:36,410 --> 00:19:39,895 So here now it looks as if we are simply exporting 374 374 00:19:39,895 --> 00:19:41,145 this MTRA here. 375 375 00:19:42,458 --> 00:19:43,970 So cart is an empty array, 376 376 00:19:43,970 --> 00:19:46,163 and that's all we are exporting here. 377 377 00:19:47,070 --> 00:19:51,403 But now watch what happens as we add a couple more products. 378 378 00:19:52,840 --> 00:19:54,073 So let's say bread, 379 379 00:19:55,280 --> 00:19:56,270 five, 380 380 00:19:56,270 --> 00:19:59,523 and then just a couple of apples. 381 381 00:20:00,650 --> 00:20:04,390 And so watch what happens when we now import this cart 382 382 00:20:04,390 --> 00:20:06,203 and to log it to the console. 383 383 00:20:07,250 --> 00:20:09,253 So, actually let's do that here. 384 384 00:20:10,800 --> 00:20:13,050 So I mentioned we should not mix them, 385 385 00:20:13,050 --> 00:20:17,120 but now just to make this work, we actually need to. 386 386 00:20:17,120 --> 00:20:20,900 So we're mixing a Default Export and a Named Export, 387 387 00:20:20,900 --> 00:20:23,290 but nevermind. 388 388 00:20:23,290 --> 00:20:24,400 Okay? 389 389 00:20:24,400 --> 00:20:26,660 So everything is added to the cart, 390 390 00:20:26,660 --> 00:20:30,363 and now let's lock the cart, and see what happens. 391 391 00:20:31,434 --> 00:20:35,019 So here we do not see that empty object, 392 392 00:20:35,019 --> 00:20:38,900 that we export, but instead we have this array 393 393 00:20:38,900 --> 00:20:41,803 with the objects that we just added to the cart, 394 394 00:20:41,803 --> 00:20:43,963 by calling the add function here. 395 395 00:20:45,050 --> 00:20:48,360 And so that proves that this import here, 396 396 00:20:48,360 --> 00:20:51,550 is in fact, not simply a copy of the value, 397 397 00:20:51,550 --> 00:20:53,760 that we exported here. 398 398 00:20:53,760 --> 00:20:54,593 Right? 399 399 00:20:54,593 --> 00:20:55,810 Because if it was, 400 400 00:20:55,810 --> 00:20:58,970 then here we would simply get debt MTRA, 401 401 00:20:58,970 --> 00:20:59,803 Right? 402 402 00:20:59,803 --> 00:21:02,070 Because that's what this cart variable looked 403 403 00:21:02,070 --> 00:21:04,990 like by the time we exported it. 404 404 00:21:04,990 --> 00:21:07,490 But, as I mentioned in the last lecture, 405 405 00:21:07,490 --> 00:21:09,560 it is not simply a copy, 406 406 00:21:09,560 --> 00:21:10,957 it is a life connection. 407 407 00:21:10,957 --> 00:21:13,690 And as we call function, 408 408 00:21:13,690 --> 00:21:16,470 that we called as in the other module, 409 409 00:21:16,470 --> 00:21:19,970 we keep pushing objects to that array. 410 410 00:21:19,970 --> 00:21:22,400 So we are mutating that array here, 411 411 00:21:22,400 --> 00:21:24,080 and so then here of course, 412 412 00:21:24,080 --> 00:21:27,261 we see that manipulating the array, in the console, 413 413 00:21:27,261 --> 00:21:29,830 as we locked the cart here. 414 414 00:21:29,830 --> 00:21:31,540 And so they are in fact, 415 415 00:21:31,540 --> 00:21:35,830 the exact same object behind the scenes, basically. 416 416 00:21:35,830 --> 00:21:38,550 So one more time, repeat it with me, 417 417 00:21:38,550 --> 00:21:42,130 imports are not copies of the export. 418 418 00:21:42,130 --> 00:21:45,340 They are instead like a live connection, 419 419 00:21:45,340 --> 00:21:48,720 and so what that means is that I point to the same place 420 420 00:21:48,720 --> 00:21:49,805 in memory, 421 421 00:21:49,805 --> 00:21:53,530 because again, otherwise, if it was a copy 422 422 00:21:53,530 --> 00:21:57,260 then here, we would not get anything in the array. 423 423 00:21:57,260 --> 00:21:58,560 And so keep this in mind, 424 424 00:21:58,560 --> 00:22:00,560 when you write your own programs 425 425 00:22:00,560 --> 00:22:02,980 because this can of course leads to bugs, 426 426 00:22:02,980 --> 00:22:04,900 if you don't know what you're doing, 427 427 00:22:04,900 --> 00:22:08,484 and if you don't know that this is how it actually works. 428 428 00:22:08,484 --> 00:22:10,460 All right? 429 429 00:22:10,460 --> 00:22:13,800 And so with this, we actually finished this video 430 430 00:22:13,800 --> 00:22:16,110 which was a pretty important one, 431 431 00:22:16,110 --> 00:22:18,040 because this is the foundation 432 432 00:22:18,040 --> 00:22:21,991 of how we organize a modern JavaScript code base. 433 433 00:22:21,991 --> 00:22:25,410 So make sure to review this lecture thoroughly, 434 434 00:22:25,410 --> 00:22:27,040 and I would actually like you to play 435 435 00:22:27,040 --> 00:22:28,518 around a little bit on your own, 436 436 00:22:28,518 --> 00:22:32,070 with exporting and importing some more values 437 437 00:22:32,070 --> 00:22:33,710 like we just did here. 438 438 00:22:33,710 --> 00:22:36,493 And after that, I see you then in the next video. 37079