Now before we quit, one additional word about scope.
Now you learned that you can only use in other files
what you export in the files you want to use the features from.
So if you want to use that tooltip class, because we're using modules now, we can only use it in files
that import tooltip, which is why we export it here,
if you wouldn't export it, you also couldn't import it.
Now the global object which we abused sometimes earlier in the course therefore doesn't exist like this
anymore.
If we define something global here, in app.js let's say which is the first file that runs, default value
Max, something like this, if we want to use that in another file, it's not that easy.
If in project list I want to output this, well let's try, if I console log default value here, make sure
I don't have a typo, let's copy this here,
use it here, if we try that, you'll see that if we reload this, we get an error that default value is not
defined,
so it's not exposed on this global object anymore.
Now we do have access to window though, if I console log window here in project list and comment out
default value and save that and reload, you see this window object is still output.
Now that's quite important because what we saw earlier in the course is that window is kind of a global
object where some of our variables end up on when we define them globally. We could also access
window with this in the past by just logging this here outside of a function, however here in modules,
this gives us undefined,
so modules also run in strict mode out of the box.
So in strict mode, you learned this gives you undefined and not the window
and that's the same here.
Now why am I showing all of that? Because it's important to know that and because in the past when you define
a global variable like this, it would invisibly automatically be added to the window object which acted
as a global object that spans across your entire app
so to say. This was Javascript's way of sharing data across files you could say, by having that global
object which every file can automatically use.
Now this window object is available if we target it with window but not with this. So modules have their
own scope, something defined in a module is not shared with others unless you export it
and this does not point at window.
Now what you can do is you can add something to the window object, like this as a property which is
added dynamically and then use it.
Now if we try to access window.defaultValue here however, it will not work because this code will actually
be executed before this code runs
because here I am importing project list,
this is the point of time where the code in project list runs
and therefore this code where I want to read from window runs before I set default value.
Now switching the order is not an option,
this is not allowed, if we tried to do that,
we still get undefined because imports are automatically sorted to the top,
so this will not work. To still simulate that sharing data across window works,
we can just move this into for example connect droppable which will be called at a later point of
time because this executes when the constructor of project list runs which happens when we create a
project list here in app.js which is the case after we store default value in the window.
So now if I reload,
we see Max being output here,
we see that twice because I'm creating two project lists. So the window object can be used to still share
some data globally on your app,
you need to explicitly add something to window but then this is an option,
a hack around the otherwise scoped data so to say and hence, you should really just use it as a last resort
if you really need to share some global data and for some reason, exporting and importing is not an option,
otherwise don't do this.
Now besides window however, you also now have another identifier and that's global
this. We haven't seen that before, as the name suggests, it's basically an alternative to this which points
at some globally available object,
the idea is also that this is available both in browser side Javascript and Node.js side
Javascript, the window object is not available in both.
Now global this can be used to store data and in project list of course then also to read data,
so here I can also reach out to global this.
Now if we save that and reload, we get the same output as before,
the more interesting part therefore is what's inside global this besides our custom value?
So if I just output global this in project list and I reload, you see it's the window object again.
So in the end, global this in modules replaces this as your pointer at the window object because this inside
of modules is not defined, it's just what it is, they run in strict mode and there
this does not point at window but we got global this as an alternative and an extra benefit is that
global
this will also work in Node.js.
So you can always use global this everywhere and you're guaranteed to not get undefined
and point either at the window in the browser context or add another global object created by Node.js
in the Node.js context.
So it's a little bit of extra information, often that will not be too important because you should really
use exports and imports to share data.
The key takeaway is that data that's not exported and that's not shared like this with this hack is
not available outside of this file because you've got a special module scope which ensures that anything
that is defined on the top level of such a module file stays in that file.