In this part, I would like to raise one topic. Global Object. Let's start.

In a situation where we have already written our first JavaScript program that for example is a function displaying "Hello World" and we want to run it, it will run inside Execution Context.
The base Execution Context is Global Execution Context. This means that everything that was written in the Global Execution Context space is available in every part of our code.
Along with Global Execution Context, the JavaScript engine creates two elements for us, which we get right away.

  • Global Object

Since we already know what Object is in JavaScript (a collection of Name / Value Pairs), it's easy to guess what the Global Object is. It is the object, available globally in our code. You can attach to it the variables, functions etc.

  • Special variable: this

This is a special variable best explained by the code itself.

Let's start with creating a simple HTML file that we name index.html. It looks like this.

As you can see, it has virtually nothing. No text, photos, only a link to the script that is in the one.js file.
Now we create a blank JavaScript file.

Here, we can find only a comment that does not affect the code in any way.

Before the next step, I recommend downloading the free text editor Atom and install the atom-live-server plugin.

This will allow us to see in real time the changes that we will be doing in the future, both in the HTML and JavaScript files.
After downloading Atom and the plugin, just start the server. In the menu on the top bar, select Packages - atom-live-server - Start server.

Now that we have our local server running, we can see what the HTML file looks like. As I mentioned, it is empty. But is it really completely empty? Just because we do not see anything does not mean that there is nothing.
If you're using a Chrome browser, after pressing the combination of Ctrl + Shift + c, Toggle Inspect Element Mode will launch. There will be a console available, in which after entering our special variable: this, to the surprise we will see the window object.
This is due to the fact that the JavaScript engine after running the one.js script, even though there was no code there, created Execution Context, which in our case is Global Execution Context.
As in Global Execution Context, we have access to the whole code, Global Object, which in our case is a window object, also has access to the whole code.
We also have our special variable, which is inside Execution Context: this.

Now I would like to show what I was talking about in a simple example.

We have one variable and one function.
When we run the Toggle Inspect Element Mode again and use the console to enter the name of our variable, its value will be returned. In our case, "Hello".


As the variable was created in Global Execution Context it is attached to Global Object. As our Global Object is a window object, we can access the variable also through window.a command.

Next Post

I'm going to talk more about Execution Context, Creation and 'Hoisting'.