WEBVTT 1 00:00:01.120 --> 00:00:03.960 Let's now use modules and practice, 2 00:00:03.960 --> 00:00:07.520 to make sure that we really understand how they work, 3 00:00:07.520 --> 00:00:10.723 and to import and export values between them. 4 00:00:12.580 --> 00:00:15.780 And let's start with the simplest scenario of all, 5 00:00:15.780 --> 00:00:18.210 which is to simply import a module, 6 00:00:18.210 --> 00:00:20.610 but without importing any value. 7 00:00:20.610 --> 00:00:22.220 And so that's also possible, 8 00:00:22.220 --> 00:00:25.133 and so let's use that as a starting point here. 9 00:00:26.400 --> 00:00:29.173 So let's then create a new module. 10 00:00:30.050 --> 00:00:30.883 Okay? 11 00:00:30.883 --> 00:00:35.030 So as always, we already start with a script.js, 12 00:00:35.030 --> 00:00:37.210 but now as we create a new module, 13 00:00:37.210 --> 00:00:39.283 we simply have to create a new file. 14 00:00:40.120 --> 00:00:41.910 So new file, 15 00:00:41.910 --> 00:00:45.541 and here, I will use the example of a "shopping-cart", 16 00:00:45.541 --> 00:00:48.775 and so we're gonna have a module called, 17 00:00:48.775 --> 00:00:51.403 shoppingcart.jS, 18 00:00:52.430 --> 00:00:53.840 and in module names, 19 00:00:53.840 --> 00:00:57.353 it's also a convention to use camelCase names. 20 00:00:58.710 --> 00:00:59.543 All right? 21 00:01:00.840 --> 00:01:04.140 So this one here will be the importing 22 00:01:06.030 --> 00:01:06.903 module, 23 00:01:08.600 --> 00:01:11.973 and this will be the exporting module. 24 00:01:14.450 --> 00:01:15.630 And to start, 25 00:01:15.630 --> 00:01:18.380 let's actually lock this to the console, 26 00:01:18.380 --> 00:01:19.920 just, 27 00:01:19.920 --> 00:01:21.310 so we can see 28 00:01:21.310 --> 00:01:23.633 that the module is actually being imported. 29 00:01:24.490 --> 00:01:28.140 So this one here, will lock to the console exporting module, 30 00:01:28.140 --> 00:01:31.163 and this one should look to the console importing module. 31 00:01:33.780 --> 00:01:34.903 So like this, 32 00:01:35.790 --> 00:01:38.080 with the quotes, of course, 33 00:01:38.080 --> 00:01:42.100 and now we also have to import, that other module, 34 00:01:42.100 --> 00:01:46.140 And let's do that here first, so import 35 00:01:46.140 --> 00:01:49.345 and then a string with the location of the module. 36 00:01:49.345 --> 00:01:53.690 So ./, which simply means to current location, 37 00:01:53.690 --> 00:01:57.590 and then here VS code already gives us these options. 38 00:01:57.590 --> 00:02:01.050 So let's choose here shoppingcart.js 39 00:02:02.360 --> 00:02:06.760 and you see that VS code automatically omits the js here. 40 00:02:08.036 --> 00:02:11.073 So the name is actually this one with the js, 41 00:02:11.073 --> 00:02:15.810 but ES modules actually also work without the extension. 42 00:02:15.810 --> 00:02:18.830 but for now let's actually leave the extension there, 43 00:02:18.830 --> 00:02:20.903 just to make it a little bit more clear. 44 00:02:21.830 --> 00:02:25.093 So, let's start this cart here. 45 00:02:26.580 --> 00:02:28.930 So as always live server, 46 00:02:28.930 --> 00:02:32.453 but then we will see that this is not yet going to work. 47 00:02:33.440 --> 00:02:35.490 So let's take a look at the console here. 48 00:02:36.379 --> 00:02:39.480 And so what we see cannot use import statement 49 00:02:39.480 --> 00:02:41.123 outside a module. 50 00:02:42.150 --> 00:02:44.600 So why is that happening? 51 00:02:44.600 --> 00:02:46.820 Well, remember from the last lecture, 52 00:02:46.820 --> 00:02:50.724 that when we want to connect a module to the HTML file, 53 00:02:50.724 --> 00:02:54.863 we actually need to specify the type attribute. 54 00:02:56.480 --> 00:03:00.030 So here we have to say 55 00:03:00.030 --> 00:03:04.790 that this is off the type module. 56 00:03:04.790 --> 00:03:08.143 Okay, and so now it actually worked. 57 00:03:10.210 --> 00:03:13.590 So let's go back here and analyze this. 58 00:03:13.590 --> 00:03:15.470 And so here in the console, we see 59 00:03:15.470 --> 00:03:19.130 that the first log is actually exporting module 60 00:03:19.130 --> 00:03:23.220 only then importing model is locked to the console. 61 00:03:23.220 --> 00:03:27.510 And so this means that in fact, this cart here is executed 62 00:03:27.510 --> 00:03:30.970 before any cart in the importing module. 63 00:03:30.970 --> 00:03:34.350 So exactly what I explained to you in the last lecture. 64 00:03:34.350 --> 00:03:36.860 So the cart in this module here is passed, 65 00:03:36.860 --> 00:03:38.700 and before it is executed, 66 00:03:38.700 --> 00:03:40.260 all the cart in the modules 67 00:03:40.260 --> 00:03:43.610 that it imports is executed first. 68 00:03:43.610 --> 00:03:44.443 Right?, 69 00:03:44.443 --> 00:03:47.643 And the same is true if we had this lock here before. 70 00:03:48.870 --> 00:03:50.050 Okay? 71 00:03:50.050 --> 00:03:52.372 So remember that all the importing statements 72 00:03:52.372 --> 00:03:55.220 are basically hoisted to the top. 73 00:03:55.220 --> 00:03:58.510 And so usually, this is actually also how we write it. 74 00:03:58.510 --> 00:04:02.003 So all the imports statements at the top of the file, 75 00:04:02.940 --> 00:04:07.010 and also note how I didn't use strict mode here, 76 00:04:07.010 --> 00:04:09.670 and that's because as you learned in the last video, 77 00:04:09.670 --> 00:04:13.653 all modules are executed in strict mode by default. 78 00:04:14.850 --> 00:04:18.030 But now let's go back here to the "shopping-cart" module 79 00:04:18.030 --> 00:04:19.723 and define some variables. 80 00:04:21.400 --> 00:04:22.603 So let's just say, 81 00:04:24.450 --> 00:04:27.340 shipping cost = 10. 82 00:04:27.340 --> 00:04:30.280 And let's also say we have an empty card 83 00:04:30.280 --> 00:04:32.693 which is like an array. 84 00:04:33.940 --> 00:04:36.160 So an empty array for now. 85 00:04:36.160 --> 00:04:39.680 Now variables that are declared inside of a module, 86 00:04:39.680 --> 00:04:41.870 So just like these two ones here, 87 00:04:41.870 --> 00:04:45.270 are actually sculpt to this module. 88 00:04:45.270 --> 00:04:47.540 So basically inside a module, 89 00:04:47.540 --> 00:04:51.700 the module itself is like the top level scope. 90 00:04:51.700 --> 00:04:55.670 And so by default, this means that all top level variables 91 00:04:55.670 --> 00:04:59.500 are private inside of this variable. 92 00:04:59.500 --> 00:05:01.600 So unlike traditional scripts, 93 00:05:01.600 --> 00:05:04.010 which would put all of these variables here 94 00:05:04.010 --> 00:05:05.740 in the global scope, 95 00:05:05.740 --> 00:05:07.860 but again, not modules, 96 00:05:07.860 --> 00:05:11.253 and so that's why right here, we cannot do this. 97 00:05:14.040 --> 00:05:14.873 All right? 98 00:05:14.873 --> 00:05:17.093 So "shipping-cost" is not defined. 99 00:05:18.840 --> 00:05:19.780 All right? 100 00:05:19.780 --> 00:05:21.100 So the "shipping-costs" 101 00:05:21.100 --> 00:05:23.400 and cart variables are scoped, 102 00:05:23.400 --> 00:05:25.820 to the current module basically, 103 00:05:25.820 --> 00:05:28.103 and so we can only use them here. 104 00:05:28.103 --> 00:05:32.468 Now, if we wanted to use them in the script.js module 105 00:05:32.468 --> 00:05:35.580 then we would have to use exports. 106 00:05:35.580 --> 00:05:39.420 And in ES modules, there are two types of exports, 107 00:05:39.420 --> 00:05:43.330 Named Exports and Default Exports. 108 00:05:43.330 --> 00:05:46.470 And named imports is actually the simplest way 109 00:05:46.470 --> 00:05:48.685 of exporting something from a module, 110 00:05:48.685 --> 00:05:51.920 because all we have to do is to put export 111 00:05:51.920 --> 00:05:56.160 in front of anything, that we might want to export. 112 00:05:56.160 --> 00:05:59.781 So let's say that we want to create this method here 113 00:05:59.781 --> 00:06:01.583 "add to cart" 114 00:06:04.540 --> 00:06:07.563 and it should be a function that takes a product, 115 00:06:09.290 --> 00:06:10.393 and the quantity. 116 00:06:11.240 --> 00:06:15.570 And then it pushes basically a new object to the cart, 117 00:06:15.570 --> 00:06:16.670 so to that cart array, 118 00:06:21.494 --> 00:06:24.920 and then let's also lock something to the console, 119 00:06:24.920 --> 00:06:26.053 like quantity, 120 00:06:28.100 --> 00:06:29.593 and then the product, 121 00:06:30.500 --> 00:06:32.463 was added to the cart. 122 00:06:33.730 --> 00:06:34.630 Okay? 123 00:06:34.630 --> 00:06:36.390 And so again, by now 124 00:06:36.390 --> 00:06:39.900 this variable is private inside of this module, 125 00:06:39.900 --> 00:06:43.630 but if we wanted to now export it, so that we can import it, 126 00:06:43.630 --> 00:06:45.330 in some other module, 127 00:06:45.330 --> 00:06:49.390 all we have to do is write export right here. 128 00:06:49.390 --> 00:06:53.263 And so this then creates a named export from this module. 129 00:06:54.290 --> 00:06:58.260 And so now we can then import that variable right here, 130 00:06:58.260 --> 00:07:01.710 we just have to write it with the exact same name. 131 00:07:01.710 --> 00:07:05.607 So the variable is called "add to cart", right here. 132 00:07:07.460 --> 00:07:10.910 and so, right here in this module, 133 00:07:10.910 --> 00:07:14.440 and so therefore we have to call it that here as well. 134 00:07:14.440 --> 00:07:16.870 Now what we're missing here is the from, 135 00:07:16.870 --> 00:07:19.050 so this is quite easy to understand, 136 00:07:19.050 --> 00:07:21.740 it reads just like a normal sentence. 137 00:07:21.740 --> 00:07:26.288 So we want to import "add to cart" from this module. 138 00:07:26.288 --> 00:07:29.970 And again, "add to cart", this variable name here, 139 00:07:29.970 --> 00:07:32.283 has to be exactly the same as this one. 140 00:07:33.640 --> 00:07:34.530 okay? 141 00:07:34.530 --> 00:07:38.750 Now here we are just missing, actually curly braces 142 00:07:38.750 --> 00:07:41.480 around this here, like this, 143 00:07:41.480 --> 00:07:44.280 so now it's going to work, 144 00:07:44.280 --> 00:07:46.470 and to Syntax without the curly braces. 145 00:07:46.470 --> 00:07:48.850 we will see a little bit later. 146 00:07:48.850 --> 00:07:50.590 But again with named imports, 147 00:07:50.590 --> 00:07:52.540 you have to give them here the same name, 148 00:07:52.540 --> 00:07:54.480 and you actually have to put them 149 00:07:54.480 --> 00:07:56.850 inside curly braces like this. 150 00:07:58.130 --> 00:08:01.460 And so now here we are able to call this function 151 00:08:01.460 --> 00:08:05.190 as if it was defined here in this same scope. 152 00:08:05.190 --> 00:08:08.370 So let's just say, we want to add five breads 153 00:08:08.370 --> 00:08:11.160 to the "shopping-cart", you know, 154 00:08:11.160 --> 00:08:12.750 indeed it works. 155 00:08:12.750 --> 00:08:14.710 So here we got dad log, 156 00:08:14.710 --> 00:08:17.310 now that is coming from the "add to cart" function 157 00:08:17.310 --> 00:08:20.433 that is indeed defined in this module here. 158 00:08:21.310 --> 00:08:22.650 Now, just keep in mind 159 00:08:22.650 --> 00:08:26.273 that exports always need to happen in top level cart, 160 00:08:28.440 --> 00:08:31.033 so it wouldn't work like this. 161 00:08:32.650 --> 00:08:33.483 All right? 162 00:08:33.483 --> 00:08:36.803 So then indeed you get an unexpected token export. 163 00:08:39.170 --> 00:08:40.903 So let's put it back of course. 164 00:08:42.370 --> 00:08:44.570 And so now here we are back. 165 00:08:44.570 --> 00:08:47.490 And of course we can also export multiple things 166 00:08:47.490 --> 00:08:50.870 from a module using Named Exports. 167 00:08:50.870 --> 00:08:55.540 And actually, that is the main use case of Named Exports, 168 00:08:55.540 --> 00:08:59.240 so, basically when we want to export multiple things. 169 00:08:59.240 --> 00:09:00.100 Now, okay? 170 00:09:00.100 --> 00:09:02.840 Now we can also export multiple things, 171 00:09:02.840 --> 00:09:06.150 at the same time, using Named Exports. 172 00:09:06.150 --> 00:09:09.600 So we can just, let's say, declare some variables here, 173 00:09:09.600 --> 00:09:11.683 like total price, 174 00:09:12.608 --> 00:09:14.560 237 175 00:09:14.560 --> 00:09:18.713 and total quantity, 176 00:09:19.970 --> 00:09:21.303 let's say 23. 177 00:09:22.560 --> 00:09:27.240 And so now we can export all of this at the same time, 178 00:09:27.240 --> 00:09:31.693 again, using Named Exports, by writing total price 179 00:09:31.693 --> 00:09:33.833 and total quantity. 180 00:09:34.780 --> 00:09:37.910 So this is a little bit like exporting an object 181 00:09:37.910 --> 00:09:39.720 from this module. 182 00:09:39.720 --> 00:09:43.970 And so now, just like before we can then come here, 183 00:09:43.970 --> 00:09:46.874 and import these variables using the same name, 184 00:09:46.874 --> 00:09:49.870 and again, that's inside of the curly braces, 185 00:09:49.870 --> 00:09:51.533 just like we export it here. 186 00:09:53.850 --> 00:09:56.650 So that's "add to cart", 187 00:09:56.650 --> 00:10:00.450 total price and total quantity. 188 00:10:00.450 --> 00:10:04.633 And so of course we can then go ahead and use them here, 189 00:10:05.800 --> 00:10:08.460 and in this case, all we do is to lock them, 190 00:10:08.460 --> 00:10:12.800 but indeed, now we get access to these values from here, 191 00:10:12.800 --> 00:10:16.580 and indeed now we get access to these values here, 192 00:10:16.580 --> 00:10:19.580 in this main importing module. 193 00:10:19.580 --> 00:10:23.810 Now actually we can change the name of the inputs as well, 194 00:10:23.810 --> 00:10:26.782 so for example, if we wanted to call the total price, 195 00:10:26.782 --> 00:10:29.763 simply price, we could write this, 196 00:10:30.840 --> 00:10:33.393 So total price as price. 197 00:10:34.470 --> 00:10:37.653 And so then here, it would no longer be called total price. 198 00:10:38.840 --> 00:10:39.680 Right? 199 00:10:39.680 --> 00:10:41.450 So it's no longer there, 200 00:10:41.450 --> 00:10:46.020 but instead it is simply called price. 201 00:10:46.020 --> 00:10:49.730 And we could actually even do that here in the exports. 202 00:10:49.730 --> 00:10:51.460 So here we could also write, 203 00:10:51.460 --> 00:10:56.460 write export total quantity, just as QT, 204 00:10:56.780 --> 00:10:57.910 let's say. 205 00:10:57.910 --> 00:10:59.010 And so then here, 206 00:10:59.010 --> 00:11:02.720 it would no longer be called total quantity, 207 00:11:02.720 --> 00:11:03.893 but TQ. 208 00:11:08.760 --> 00:11:11.633 And now that doesn't work, so let's go back. 209 00:11:13.060 --> 00:11:16.333 So it's TQ, So total quantity. 210 00:11:17.260 --> 00:11:21.570 And so now indeed, we are back to having 23 there. 211 00:11:21.570 --> 00:11:24.230 So this is all very flexible as you can see, 212 00:11:24.230 --> 00:11:27.770 and we can play around with this as we wish. 213 00:11:27.770 --> 00:11:28.730 Okay? 214 00:11:28.730 --> 00:11:33.020 And actually we can take this importing even further, 215 00:11:33.020 --> 00:11:36.040 because we can also import all the exports 216 00:11:36.040 --> 00:11:38.860 of a module at the same time. 217 00:11:38.860 --> 00:11:42.130 So that's import and then everything. 218 00:11:42.130 --> 00:11:44.980 So that's usually the meaning of the star, 219 00:11:44.980 --> 00:11:49.980 and then as and here we can give it some name that we want, 220 00:11:50.000 --> 00:11:54.580 So let's call it "shopping-cart" and with a S here, 221 00:11:54.580 --> 00:11:57.200 so a little bit like a class name. 222 00:11:57.200 --> 00:11:58.033 Okay? 223 00:11:58.033 --> 00:12:01.310 So that's kind of the convention when we import everything 224 00:12:01.310 --> 00:12:03.870 into an object like this. 225 00:12:03.870 --> 00:12:06.270 So basically, this year we'll create an object 226 00:12:06.270 --> 00:12:10.320 containing everything that is exported from the module 227 00:12:10.320 --> 00:12:12.123 that we will specify here. 228 00:12:13.210 --> 00:12:14.163 So from, 229 00:12:15.577 --> 00:12:16.860 "shopping-cart". 230 00:12:16.860 --> 00:12:20.100 And so this will then basically create a namespace, 231 00:12:20.100 --> 00:12:23.743 for all of the values, exported from that module. 232 00:12:24.790 --> 00:12:26.970 Let's just comment out this one here, 233 00:12:26.970 --> 00:12:29.630 and I will put this code that is more related 234 00:12:29.630 --> 00:12:32.320 to this import, and they are here, 235 00:12:32.320 --> 00:12:34.073 So actually I want all of it here. 236 00:12:36.200 --> 00:12:38.870 So put that here and comment it out, 237 00:12:38.870 --> 00:12:42.403 like this, because now we are doing it differently. 238 00:12:43.320 --> 00:12:45.913 Let's just put everything here, 239 00:12:46.759 --> 00:12:50.763 just so we get some new cart here. 240 00:12:51.820 --> 00:12:54.545 Now it tells us that this module doesn't exist, 241 00:12:54.545 --> 00:12:56.700 and that's because by default, 242 00:12:56.700 --> 00:12:59.890 a VS code again removed this js. 243 00:12:59.890 --> 00:13:01.890 And in fact it is necessary, 244 00:13:01.890 --> 00:13:04.800 It is only not necessary in some other cases, 245 00:13:04.800 --> 00:13:05.973 that we will see later. 246 00:13:07.480 --> 00:13:09.110 So now it works again, 247 00:13:09.110 --> 00:13:12.440 and we are back to having our logs here. 248 00:13:12.440 --> 00:13:14.050 And so now whenever we want to use 249 00:13:14.050 --> 00:13:17.480 something that was exported like this, "add to cart" 250 00:13:17.480 --> 00:13:18.350 function 251 00:13:18.350 --> 00:13:21.293 then we have to basically take that from this object. 252 00:13:22.300 --> 00:13:25.453 So, "add to cart", and let's again say bread, 253 00:13:27.140 --> 00:13:27.973 five. 254 00:13:28.830 --> 00:13:29.780 All right? 255 00:13:29.780 --> 00:13:31.908 So here it is again. 256 00:13:31.908 --> 00:13:35.203 And so basically if we think about this, 257 00:13:35.203 --> 00:13:39.400 this module here is now basically exporting a public API, 258 00:13:39.400 --> 00:13:41.500 just like a class. 259 00:13:41.500 --> 00:13:43.900 So it's as if this object here, 260 00:13:43.900 --> 00:13:46.520 was an object created from a class, 261 00:13:46.520 --> 00:13:48.950 which now has these methods, 262 00:13:48.950 --> 00:13:51.433 and also, for example these properties, 263 00:13:52.730 --> 00:13:57.673 like shoppingcart.total price. 264 00:13:59.210 --> 00:14:00.060 Right?, 265 00:14:00.060 --> 00:14:03.303 So that's the other Named Export from this module. 266 00:14:05.100 --> 00:14:06.410 Now of course we are not trying 267 00:14:06.410 --> 00:14:09.173 to replace classes with modules. 268 00:14:09.173 --> 00:14:12.330 I just wanted to turn your attention to the fact, 269 00:14:12.330 --> 00:14:15.540 that some things here look pretty similar indeed. 270 00:14:15.540 --> 00:14:16.460 Right?, 271 00:14:16.460 --> 00:14:19.470 And actually we can say daddy module exports, 272 00:14:19.470 --> 00:14:21.340 kind of a public API, 273 00:14:21.340 --> 00:14:24.380 because everything else of course stays private 274 00:14:24.380 --> 00:14:25.510 inside of the module. 275 00:14:25.510 --> 00:14:27.050 All right? 276 00:14:27.050 --> 00:14:31.966 And that's basically how named imports and exports work. 277 00:14:31.966 --> 00:14:36.107 So we saw how we can export just one value 278 00:14:36.107 --> 00:14:40.240 and also how we can export multiple values at once, 279 00:14:40.240 --> 00:14:44.440 and also how we can change the name of the Named Exports, 280 00:14:44.440 --> 00:14:47.890 and also of the named import, 281 00:14:47.890 --> 00:14:49.460 like this. 282 00:14:49.460 --> 00:14:51.820 Then we learned how we can import everything 283 00:14:51.820 --> 00:14:53.140 at the same time. 284 00:14:53.140 --> 00:14:56.390 So all the named imports at once. 285 00:14:56.390 --> 00:14:57.370 All right? 286 00:14:57.370 --> 00:15:01.520 And so now it's time to talk about Default Exports. 287 00:15:01.520 --> 00:15:05.646 So I said that they were Named Exports and Default Export, 288 00:15:05.646 --> 00:15:07.500 and so let's now talk a little bit 289 00:15:07.500 --> 00:15:10.660 about these exports defaults. 290 00:15:10.660 --> 00:15:12.976 So usually, we use Default Exports 291 00:15:12.976 --> 00:15:17.050 when we only want to export one thing per module, 292 00:15:17.050 --> 00:15:20.870 and so that's the reason why they are called default. 293 00:15:20.870 --> 00:15:22.860 And so it works like this, 294 00:15:22.860 --> 00:15:27.220 so pretty similar, but then we have to write default, 295 00:15:27.220 --> 00:15:30.173 and then here, we want to simply export a value. 296 00:15:31.240 --> 00:15:35.280 So for example, if we wanted to export the same function, 297 00:15:35.280 --> 00:15:39.210 we would simply export the value itself, 298 00:15:39.210 --> 00:15:40.483 so not the variable. 299 00:15:41.700 --> 00:15:45.280 And here you see, that no name is involved at all. 300 00:15:45.280 --> 00:15:48.200 We are simply exporting this value. 301 00:15:48.200 --> 00:15:50.410 And so then when we import it 302 00:15:50.410 --> 00:15:53.720 we can basically give it any name that we want. 303 00:15:55.730 --> 00:15:59.003 So let's say import add from, 304 00:16:01.280 --> 00:16:04.010 shoppingcart.js 305 00:16:04.010 --> 00:16:07.890 And so this will then import the Default Export, 306 00:16:07.890 --> 00:16:10.210 no matter what that's called. 307 00:16:10.210 --> 00:16:12.490 And in fact it's not called anything. 308 00:16:12.490 --> 00:16:16.053 And so, yeah, we can give it any name here that we want. 309 00:16:17.210 --> 00:16:18.790 And right now, we are actually 310 00:16:18.790 --> 00:16:23.090 importing the same module here twice as you see, 311 00:16:23.090 --> 00:16:26.260 now that's not a problem, as you see here now, 312 00:16:26.260 --> 00:16:28.840 but usually we don't do that. 313 00:16:28.840 --> 00:16:29.780 Okay? 314 00:16:29.780 --> 00:16:31.800 So we didn't get any error, 315 00:16:31.800 --> 00:16:35.310 but it is also not advisable, I would say. 316 00:16:35.310 --> 00:16:37.870 So let's take this out here for now. 317 00:16:37.870 --> 00:16:41.423 And now let's once again try to, 318 00:16:42.850 --> 00:16:45.433 actually use the value that we imported here. 319 00:16:47.030 --> 00:16:50.593 So let's add two pizzas, and here they are. 320 00:16:53.020 --> 00:16:54.050 All right? 321 00:16:54.050 --> 00:16:56.400 And we could even mix all 322 00:16:56.400 --> 00:16:59.200 of them in the same import statement. 323 00:16:59.200 --> 00:17:01.620 So if we wanted, we could have default 324 00:17:01.620 --> 00:17:06.560 and named imports and exports all at the same time. 325 00:17:06.560 --> 00:17:09.200 So here we would just have to take this one, 326 00:17:09.200 --> 00:17:12.990 and then put that here after a comma, 327 00:17:12.990 --> 00:17:15.440 and then we could take a look, 328 00:17:15.440 --> 00:17:18.793 for example, at the price once again. 329 00:17:19.870 --> 00:17:21.150 All right? 330 00:17:21.150 --> 00:17:23.810 However in practice, we usually never mix 331 00:17:23.810 --> 00:17:27.600 Named and Default Exports in the same module. 332 00:17:27.600 --> 00:17:30.680 So this is not really desirable here. 333 00:17:30.680 --> 00:17:33.993 Let me just comment it just so you see that we can do it, 334 00:17:34.870 --> 00:17:38.283 but I will then leave it as it was before. 335 00:17:39.852 --> 00:17:40.773 All right? 336 00:17:41.760 --> 00:17:44.053 So of course now the price is not defined, 337 00:17:47.040 --> 00:17:49.700 but now we should be good to go. 338 00:17:49.700 --> 00:17:52.100 So the preferred style is actually 339 00:17:52.100 --> 00:17:55.640 to just use one default expert per module, 340 00:17:55.640 --> 00:17:57.893 and then import that here like we did. 341 00:17:58.940 --> 00:18:00.950 And in fact, that's the reason why 342 00:18:00.950 --> 00:18:04.950 it is easier to import a Default Exports. 343 00:18:04.950 --> 00:18:08.340 So here we don't even need to use the curly braces, 344 00:18:08.340 --> 00:18:12.310 and the designers of the specification, did that on purpose. 345 00:18:12.310 --> 00:18:16.890 So again, to make it easier, to import default exports 346 00:18:16.890 --> 00:18:19.590 but of course that's not a rigid rule, 347 00:18:19.590 --> 00:18:21.520 that we always need to follow, 348 00:18:21.520 --> 00:18:25.940 so, we can do whatever is best for any given situation. 349 00:18:25.940 --> 00:18:29.090 However, what you probably should really not do 350 00:18:29.090 --> 00:18:33.770 is to mix Default and Named Exports like we did here, 351 00:18:33.770 --> 00:18:36.600 so avoid that to reduce complexity. 352 00:18:36.600 --> 00:18:39.680 But besides that, you can use Named Exports 353 00:18:39.680 --> 00:18:44.590 or Default Exports, whatever works best in your situations. 354 00:18:44.590 --> 00:18:47.940 Now, of course, we will use all of this in the real world, 355 00:18:47.940 --> 00:18:50.090 in our next big project. 356 00:18:50.090 --> 00:18:53.130 And so by then, you will get a good feeling for how all 357 00:18:53.130 --> 00:18:54.210 of this works, 358 00:18:54.210 --> 00:18:56.840 a little bit better in the real world. 359 00:18:56.840 --> 00:18:57.920 All right? 360 00:18:57.920 --> 00:18:58.753 But with this, 361 00:18:58.753 --> 00:19:02.600 you now already have a pretty good idea of how importing 362 00:19:02.600 --> 00:19:07.150 and exporting values between modules actually works. 363 00:19:07.150 --> 00:19:09.370 But before finishing this lecture, 364 00:19:09.370 --> 00:19:11.196 I actually also wanted to prove you, 365 00:19:11.196 --> 00:19:16.196 that imports are in fact, a life connection to exports. 366 00:19:16.630 --> 00:19:18.190 So that's something that I mentioned 367 00:19:18.190 --> 00:19:19.981 by the end of last video, 368 00:19:19.981 --> 00:19:23.370 and it's something really important to keep in mind, 369 00:19:23.370 --> 00:19:25.423 and so let's take a look at this. 370 00:19:26.800 --> 00:19:29.045 And so actually what I will start doing, 371 00:19:29.045 --> 00:19:32.713 is to now export this cart array here. 372 00:19:34.169 --> 00:19:35.343 All right? 373 00:19:36.410 --> 00:19:39.895 So here now it looks as if we are simply exporting 374 00:19:39.895 --> 00:19:41.145 this MTRA here. 375 00:19:42.458 --> 00:19:43.970 So cart is an empty array, 376 00:19:43.970 --> 00:19:46.163 and that's all we are exporting here. 377 00:19:47.070 --> 00:19:51.403 But now watch what happens as we add a couple more products. 378 00:19:52.840 --> 00:19:54.073 So let's say bread, 379 00:19:55.280 --> 00:19:56.270 five, 380 00:19:56.270 --> 00:19:59.523 and then just a couple of apples. 381 00:20:00.650 --> 00:20:04.390 And so watch what happens when we now import this cart 382 00:20:04.390 --> 00:20:06.203 and to log it to the console. 383 00:20:07.250 --> 00:20:09.253 So, actually let's do that here. 384 00:20:10.800 --> 00:20:13.050 So I mentioned we should not mix them, 385 00:20:13.050 --> 00:20:17.120 but now just to make this work, we actually need to. 386 00:20:17.120 --> 00:20:20.900 So we're mixing a Default Export and a Named Export, 387 00:20:20.900 --> 00:20:23.290 but nevermind. 388 00:20:23.290 --> 00:20:24.400 Okay? 389 00:20:24.400 --> 00:20:26.660 So everything is added to the cart, 390 00:20:26.660 --> 00:20:30.363 and now let's lock the cart, and see what happens. 391 00:20:31.434 --> 00:20:35.019 So here we do not see that empty object, 392 00:20:35.019 --> 00:20:38.900 that we export, but instead we have this array 393 00:20:38.900 --> 00:20:41.803 with the objects that we just added to the cart, 394 00:20:41.803 --> 00:20:43.963 by calling the add function here. 395 00:20:45.050 --> 00:20:48.360 And so that proves that this import here, 396 00:20:48.360 --> 00:20:51.550 is in fact, not simply a copy of the value, 397 00:20:51.550 --> 00:20:53.760 that we exported here. 398 00:20:53.760 --> 00:20:54.593 Right? 399 00:20:54.593 --> 00:20:55.810 Because if it was, 400 00:20:55.810 --> 00:20:58.970 then here we would simply get debt MTRA, 401 00:20:58.970 --> 00:20:59.803 Right? 402 00:20:59.803 --> 00:21:02.070 Because that's what this cart variable looked 403 00:21:02.070 --> 00:21:04.990 like by the time we exported it. 404 00:21:04.990 --> 00:21:07.490 But, as I mentioned in the last lecture, 405 00:21:07.490 --> 00:21:09.560 it is not simply a copy, 406 00:21:09.560 --> 00:21:10.957 it is a life connection. 407 00:21:10.957 --> 00:21:13.690 And as we call function, 408 00:21:13.690 --> 00:21:16.470 that we called as in the other module, 409 00:21:16.470 --> 00:21:19.970 we keep pushing objects to that array. 410 00:21:19.970 --> 00:21:22.400 So we are mutating that array here, 411 00:21:22.400 --> 00:21:24.080 and so then here of course, 412 00:21:24.080 --> 00:21:27.261 we see that manipulating the array, in the console, 413 00:21:27.261 --> 00:21:29.830 as we locked the cart here. 414 00:21:29.830 --> 00:21:31.540 And so they are in fact, 415 00:21:31.540 --> 00:21:35.830 the exact same object behind the scenes, basically. 416 00:21:35.830 --> 00:21:38.550 So one more time, repeat it with me, 417 00:21:38.550 --> 00:21:42.130 imports are not copies of the export. 418 00:21:42.130 --> 00:21:45.340 They are instead like a live connection, 419 00:21:45.340 --> 00:21:48.720 and so what that means is that I point to the same place 420 00:21:48.720 --> 00:21:49.805 in memory, 421 00:21:49.805 --> 00:21:53.530 because again, otherwise, if it was a copy 422 00:21:53.530 --> 00:21:57.260 then here, we would not get anything in the array. 423 00:21:57.260 --> 00:21:58.560 And so keep this in mind, 424 00:21:58.560 --> 00:22:00.560 when you write your own programs 425 00:22:00.560 --> 00:22:02.980 because this can of course leads to bugs, 426 00:22:02.980 --> 00:22:04.900 if you don't know what you're doing, 427 00:22:04.900 --> 00:22:08.484 and if you don't know that this is how it actually works. 428 00:22:08.484 --> 00:22:10.460 All right? 429 00:22:10.460 --> 00:22:13.800 And so with this, we actually finished this video 430 00:22:13.800 --> 00:22:16.110 which was a pretty important one, 431 00:22:16.110 --> 00:22:18.040 because this is the foundation 432 00:22:18.040 --> 00:22:21.991 of how we organize a modern JavaScript code base. 433 00:22:21.991 --> 00:22:25.410 So make sure to review this lecture thoroughly, 434 00:22:25.410 --> 00:22:27.040 and I would actually like you to play 435 00:22:27.040 --> 00:22:28.518 around a little bit on your own, 436 00:22:28.518 --> 00:22:32.070 with exporting and importing some more values 437 00:22:32.070 --> 00:22:33.710 like we just did here. 438 00:22:33.710 --> 00:22:36.493 And after that, I see you then in the next video.