All About JavaScript Global Execution Context And Global Object
Welcome everyone once again. This time we bring a very important javaScript lesson which will give you a logical idea about how JavaScript works behind the scene and what is the javaScript Global Execution Context and the Global Object. I bet you like the lesson! Read this lesson all till the end so that you will get some new knowledge and understanding of how JavaScript works. Also, you will get one JavaScript Challenge in the end.
- What is the Execution Context?
- What is the Lexical Environment and Global Environment?
- Global Execution Context
- Global Object
- window keyword and its importance in the JavaScript
First talk about the Javascript Challenge#4, which I asked you in our lesson on JavaScript Array Methods about accessing the array elements. If you didn’t read, click on the link below and read it, so you will have a good idea about other important JavaScript arrays methods.
Solution for JavaScript Challenge#4 as below,
var numbers = [2, 5, 97, 58, 48, 36, 45, 79, 63, 59, 5, 22, 60]; const isEven = numbers.every((e) => e % 2 === 0); console.log(isEven); //false
Let’s start today’s lesson. First, we should know about some technical words and concepts which will be building blocks of our knowledge as we progress with javaScript lessons.
What is the Execution Context?
In simple words, It is just a box contains some javaScript codes which are running at that particular time. It will help the javaScript engine to render the codes in a more organized way and it provides all the tools which are required at the time of execution. One thing to remember, a javaScript code always runs inside an execution context. We will learn more about the Execution context in detail just in a short time.
What is the Lexical Environment?
Lexical Environment simply means where your code is actually written. This is very important in javaScript to know where your code is physically present because your code’s physical existence decides its Execution Context. And your code’s behavior depends on its Execution Context.
var a = 25;
function number() {
var a = 30;
console.log(a);
}
console.log(a); //25
number(); //30
In the above example, line 5 and line 8 have the exact same codes but their results are different. This happened only because one line is inside the number function and the other is outside. It means both lines are lexically at different places or you can say in a different execution context. So, their result depends on where is it physically present.
What is the Global Environment?
Global Environment simply means a place that is not inside any other function in a particular JavaScript file. So all the function and variable which is defined outside of any function is lexically present in the Global Environment.
As now we have some understanding of Execution Context and Lexical Environment, let’s go deeper into it.
Global Execution Context
Whenever a javaScript file runs by default it will create a global execution context and attached one global object (window) and one variable (this) which is connected to that global object. This process doesn’t depend on your JavaScript code at all. This process still going to perform even if you do not write any code inside your file. If you write anything in your javaScript file such as declare a variable, object or write a function, it will automatically be attached to the window object. Let see in the browser.
What is an Object?
In JavaScript, an Object is a name-value pair enclosed in curly brackets, and each element separated by a comma. example: {name:”john”, age:29}
What is the Global Object?
The Global Object is a JavaScript object which is accessible by all the execution context and doesn’t depend on code’s physical or lexical environment.
I created an Html file and attached an empty javaScript file into it. Let’s open that Html file in the Google Chrome browser and check it in the Google Chrome Dev tool Console.
Note: You can open it in the browser by simply pressing ctrl + shift + i
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Global Environment</title> </head> <body> <h1>Hello World</h1> <script src="index.js"></script> </body> </html>
If you write “window” in the console, it will give an object which is full of objects, and functions that are accessible at any point of time while working with the JavaScript. Now write “this“ in the console, It will give the same object as before. Though this keyword has a so bigger concept in JavaScript, in the Global Execution context “this” is equal to “window” or can say this inherited all the properties and methods from the window object. We will learn more about “this” keywords, objects, and prototype inheritance is future lessons.
Let’s write some code in our JavaScript file and check it in the console again.
var number = 25;
function display() {
console.log(name);
}
var name = 'why not google it!';
var person = { name: 'john', age: 29 };
Now write “window” in the console, and click on the object which you received. You will get a list of name-value pairs, in other words, all the variables, functions, and objects which are accessible globally. Go down the list and you will also find all the variables, functions, and objects which you have written in your code. You can access them in three ways: directly writing their name, with a dot notation with keyword window or this like window.number, this.number, window.person, this.person, and so on.
Importance of Window Object
Now you have a basic idea about window Object in the Global Execution context. let’s discuss it in detail so that we will get to know that how this object is so much important in JavaScript.
window object has all the method and properties which is available to you while working with JavaScript. let’s go to the console tool again and click the window to open the list. Check the whole list of the window object, we will find the following:
localStorage
Local Storage is an object where we store our app data locally. If our app has some local storage facility all the data which we stored will be available here.
document
You must know about the document as whenever we work on the DOM element we use document keyword only.
document.querySelector('h1').addEventListener('click',()=> {console.log('Hello!');})
In this, you will find all the things which you need while working with DOM elements.
-
-
- how many child nodes an element have?
- which one the parent of any element?
- which one is the first child or which one is the last child?
- how many methods are available?
- all the CSS properties
- what is inside the body element?
-
location
The location will tell all the details about the website address like URL, port, protocol.
navigator
In this, you will find information about your system tools which you can use. For Example below code will give you your current location.
navigator.geolocation.getCurrentPosition(callback)
You can find so much information from the window object which is available to you all the time. You can access appropriate methods according to your needs. I write a few of them here just for the reference as it is very difficult to quote all in one lesson. If you want us to make another lesson separately on the window object, please feel free to mention it in the comment below.
IF YOU LIKE THE LESSON
These are some basic behind the scene knowledge about the environments and the execution context in JavaScript. If you have any questions regarding this topic or any other javaScript topics please mention in the comment, so that I can promptly reply to you. And if you have not read our previous lessons of JavaScript Array, just click the link below and read it.
you can also visit MDN website for more details.
JavaScript Challenge#4
Now, time for yet another javaScript challenge for you. As this lesson doesn’t contain so many codes, I give you a challenge from the last lesson. I want to sort “numbers” array in ascending order. Use any of the methods I explained in my last lesson, which suits best for this challenge. Write your answers in the comment box. I will reply to you there, Let’s see who will be correct. Also if you can’t get the answer, don’t worry as you can check the answer in our coming lesson, I will provide the link soon.
var numbers= [2,5,97,58,48,36,45,79,63,59,5,22,60];
In our next lesson, we will bring the second part on the execution context basic, Hoisting and how all these works in JavaScript. We will come again with some more knowledge very soon. Sign up with us so that you will not miss any of the future articles in the sequence of JavaScript tutorials. You can also follow us on our twitter or Facebook pages for all the future Lessons.
If you’re interested, Check out some other articles related to present crisis Coronavirus
Take care of yourself and your family!♥
good