1 00:00:02,320 --> 00:00:05,980 Now before we quit, one additional word about scope. 2 00:00:05,980 --> 00:00:09,040 Now you learned that you can only use in other files 3 00:00:09,070 --> 00:00:13,000 what you export in the files you want to use the features from. 4 00:00:13,000 --> 00:00:18,940 So if you want to use that tooltip class, because we're using modules now, we can only use it in files 5 00:00:18,970 --> 00:00:22,210 that import tooltip, which is why we export it here, 6 00:00:22,210 --> 00:00:25,460 if you wouldn't export it, you also couldn't import it. 7 00:00:25,810 --> 00:00:33,580 Now the global object which we abused sometimes earlier in the course therefore doesn't exist like this 8 00:00:33,580 --> 00:00:34,480 anymore. 9 00:00:34,480 --> 00:00:44,060 If we define something global here, in app.js let's say which is the first file that runs, default value 10 00:00:44,780 --> 00:00:49,550 Max, something like this, if we want to use that in another file, it's not that easy. 11 00:00:49,550 --> 00:00:57,410 If in project list I want to output this, well let's try, if I console log default value here, make sure 12 00:00:57,410 --> 00:01:00,740 I don't have a typo, let's copy this here, 13 00:01:00,740 --> 00:01:09,600 use it here, if we try that, you'll see that if we reload this, we get an error that default value is not 14 00:01:09,600 --> 00:01:10,430 defined, 15 00:01:10,560 --> 00:01:14,430 so it's not exposed on this global object anymore. 16 00:01:14,430 --> 00:01:24,780 Now we do have access to window though, if I console log window here in project list and comment out 17 00:01:24,780 --> 00:01:30,540 default value and save that and reload, you see this window object is still output. 18 00:01:30,540 --> 00:01:36,510 Now that's quite important because what we saw earlier in the course is that window is kind of a global 19 00:01:36,510 --> 00:01:43,580 object where some of our variables end up on when we define them globally. We could also access 20 00:01:43,590 --> 00:01:51,400 window with this in the past by just logging this here outside of a function, however here in modules, 21 00:01:51,430 --> 00:01:52,660 this gives us undefined, 22 00:01:52,660 --> 00:01:56,180 so modules also run in strict mode out of the box. 23 00:01:56,230 --> 00:02:00,250 So in strict mode, you learned this gives you undefined and not the window 24 00:02:00,340 --> 00:02:01,710 and that's the same here. 25 00:02:01,720 --> 00:02:07,600 Now why am I showing all of that? Because it's important to know that and because in the past when you define 26 00:02:07,600 --> 00:02:14,140 a global variable like this, it would invisibly automatically be added to the window object which acted 27 00:02:14,140 --> 00:02:18,280 as a global object that spans across your entire app 28 00:02:18,280 --> 00:02:25,120 so to say. This was Javascript's way of sharing data across files you could say, by having that global 29 00:02:25,120 --> 00:02:28,020 object which every file can automatically use. 30 00:02:28,210 --> 00:02:37,940 Now this window object is available if we target it with window but not with this. So modules have their 31 00:02:37,940 --> 00:02:42,900 own scope, something defined in a module is not shared with others unless you export it 32 00:02:43,010 --> 00:02:45,280 and this does not point at window. 33 00:02:45,440 --> 00:02:51,800 Now what you can do is you can add something to the window object, like this as a property which is 34 00:02:51,800 --> 00:02:54,180 added dynamically and then use it. 35 00:02:54,200 --> 00:03:00,770 Now if we try to access window.defaultValue here however, it will not work because this code will actually 36 00:03:00,770 --> 00:03:02,780 be executed before this code runs 37 00:03:02,780 --> 00:03:04,990 because here I am importing project list, 38 00:03:05,090 --> 00:03:08,240 this is the point of time where the code in project list runs 39 00:03:08,240 --> 00:03:14,180 and therefore this code where I want to read from window runs before I set default value. 40 00:03:14,180 --> 00:03:15,890 Now switching the order is not an option, 41 00:03:15,890 --> 00:03:18,190 this is not allowed, if we tried to do that, 42 00:03:18,440 --> 00:03:23,150 we still get undefined because imports are automatically sorted to the top, 43 00:03:23,150 --> 00:03:28,040 so this will not work. To still simulate that sharing data across window works, 44 00:03:28,070 --> 00:03:34,520 we can just move this into for example connect droppable which will be called at a later point of 45 00:03:34,520 --> 00:03:39,710 time because this executes when the constructor of project list runs which happens when we create a 46 00:03:39,710 --> 00:03:45,370 project list here in app.js which is the case after we store default value in the window. 47 00:03:45,410 --> 00:03:46,680 So now if I reload, 48 00:03:46,910 --> 00:03:49,000 we see Max being output here, 49 00:03:49,100 --> 00:03:55,760 we see that twice because I'm creating two project lists. So the window object can be used to still share 50 00:03:55,760 --> 00:03:58,030 some data globally on your app, 51 00:03:58,040 --> 00:04:03,230 you need to explicitly add something to window but then this is an option, 52 00:04:03,230 --> 00:04:10,900 a hack around the otherwise scoped data so to say and hence, you should really just use it as a last resort 53 00:04:11,030 --> 00:04:17,670 if you really need to share some global data and for some reason, exporting and importing is not an option, 54 00:04:17,750 --> 00:04:19,720 otherwise don't do this. 55 00:04:19,940 --> 00:04:24,740 Now besides window however, you also now have another identifier and that's global 56 00:04:24,740 --> 00:04:31,790 this. We haven't seen that before, as the name suggests, it's basically an alternative to this which points 57 00:04:31,790 --> 00:04:35,100 at some globally available object, 58 00:04:35,120 --> 00:04:40,790 the idea is also that this is available both in browser side Javascript and Node.js side 59 00:04:40,790 --> 00:04:45,210 Javascript, the window object is not available in both. 60 00:04:45,360 --> 00:04:51,690 Now global this can be used to store data and in project list of course then also to read data, 61 00:04:51,720 --> 00:04:55,360 so here I can also reach out to global this. 62 00:04:55,570 --> 00:04:58,640 Now if we save that and reload, we get the same output as before, 63 00:04:58,650 --> 00:05:04,950 the more interesting part therefore is what's inside global this besides our custom value? 64 00:05:04,950 --> 00:05:12,400 So if I just output global this in project list and I reload, you see it's the window object again. 65 00:05:12,480 --> 00:05:22,130 So in the end, global this in modules replaces this as your pointer at the window object because this inside 66 00:05:22,130 --> 00:05:26,520 of modules is not defined, it's just what it is, they run in strict mode and there 67 00:05:26,520 --> 00:05:32,970 this does not point at window but we got global this as an alternative and an extra benefit is that 68 00:05:32,970 --> 00:05:33,480 global 69 00:05:33,480 --> 00:05:35,890 this will also work in Node.js. 70 00:05:36,000 --> 00:05:41,930 So you can always use global this everywhere and you're guaranteed to not get undefined 71 00:05:41,960 --> 00:05:48,150 and point either at the window in the browser context or add another global object created by Node.js 72 00:05:48,450 --> 00:05:50,060 in the Node.js context. 73 00:05:50,190 --> 00:05:55,680 So it's a little bit of extra information, often that will not be too important because you should really 74 00:05:55,680 --> 00:05:58,550 use exports and imports to share data. 75 00:05:58,560 --> 00:06:05,550 The key takeaway is that data that's not exported and that's not shared like this with this hack is 76 00:06:05,550 --> 00:06:11,640 not available outside of this file because you've got a special module scope which ensures that anything 77 00:06:11,640 --> 00:06:16,290 that is defined on the top level of such a module file stays in that file.