JavaScript Global Variable

JAVA SCRIPT BASICS

Java script Global Variables

(00:00)

Hello guys welcome to our series Java script. Our last segment was all about variables, how we can define variables in Java script? How we can define variable with help of let and const giver? What is the difference between var, let and const? We also saw local variable and a part of global variable also.

Global variables have many more things which we are going to learn today. Let’s move further with our today’s segment global variables in Java script. In global variable we already saw that if we have to use any variable globally throughout our Java script program or website then we define it globally, means we define it above topmost. Because of that what happens? Our variable is accessible to us throughout the program.

But there some other ways also of defining global variable. First way is, which is very simple which we saw during our global variable program. I will open same program, programs, global variables, so this is our program in which we printed same value three times, now if I open the same program through sublime text. Okay so this is my program in which we defined a variable and gave it a value and printed it thrice. First time through one function, second time through another function and third time out of the scope means out of the scope of both functions.

So, in order to define this variable, what did I do? I printed it above topmost line means I typed it above everything so it will be accessible throughout my program. Now there different ways apart from this with help of that we can do this. Let’s say, our another method is with the help of window object. Let’s go to slide, here it is said, if we have to describe any variable permanently we can do it through window object.

 Here you can see we took an example in which a variable is defined in the function. Declaring the global variable by window object, now what will we do? We will create another program just like this method and in that html- Example Global Variable using Window Object, save, global_variable_with_window_object. okay. This is my program, first we will understand what is the need of this? Here I will add script first and in script I will create a function, function abc () now I take a variable in this, let’s say var x=” this is a variable”; here I have defined my variable, we won’t find anything here because we have not printed it yet.

So now I will print this with help of document.write(), again this is not printing because we have not called the function so now I call my function and you can see this is a variable on screen. Here the value of x is getting printed because of document.write , now if I write this document.write below the function means if I write it out of the scope, then it is not going to work and it will show error as x is not defined.

(04:20)

Because where have I defined it? Inside the function, I have defined this variable x in the function named abc. So if I want to use it here also, then what can I do? Then I will have to define it with the help of window object. Let’s say here instead of x I comment var window.x okay so now I print this x here, okay in the same function okay so now you can see we are not getting the value, there is some error, unexpected token ‘.’, where it is found? Line number 12 means where I have written window.x so now instead of x I will write window.value, okay, now also there is some error regarding dot ‘.’

Why is error occurring? Because we have used window object and we have declared it variable also so here I will remove var and save and reload it. You can see now we are getting the value, this is variable, from where we are getting this value, we are getting it from window.value. as I have printed this is variable, in window.value and I have printed it.

Now this window.value from function, I will place it out of the function and reload it then you will see that we are getting the value again, means I written once in function we got the value and second time we have written it out of the function and again we got the value. Means if I define a variable with var keyword that will bind my block scope means that variable will be accessible only inside the block, but if instead of defining it at the top and still want to access it throughout the program then how can I do it?

With the help of window value, let’s say instead of window I write x and reload, you can see that value is still getting printed. So here what you have to do? First, when you are inserting in value inside window object you should not use var. Second window.then whatever name you want to give you can give. So this was our second method, that how we can print variable through window object and access it throughout the program.

So here I have used in one function, let’s say now I create another function, function def and inside this I will simply print the br line so that it will become new line and I will add my value of x and I will call this def from above, okay, save and reload. So you can see the value has been printed thrice means it has been defined inside abc function which means that this value is accessible in abc, accessible outside abc and it is also accessible outside and inside another function.

So I have printed this three times, through three different scopes and it is accessible all the times. So this was our global variable, how we define it? and how we access it? first method was declaring at the top, where are script starts with the help of var keyword, second is with the help of window object like by writing our variable name in window object, like window.x, window.value, window.abcd etc.

(08:23)

Now moving further, these global variables have internal, internal, means what is it’s concept? Which we have already seen you must have seen here var value=50, here it is written when you declare a variable outside the function , it is added in the window object internally, you can access it through window object also means to understand this, here we have one program in which we defined var at top, in another program we defined it inside the function with the help of window object

But if a take a variable named var temp inside the same function=” this is a temp variable”; so for this document if I simply write document.write then it will obviously get printed. But what does this slide say? Even if I alert this by using window.value means the name of my variable, if I want to access it through window object then I can do it. So it’s name is temp, we will write in abc alert(temp); if I reload it it will say this is a temp variable, why? Because my temp’s value is this is a temp variable

So as soon as my alert comes on abc line, abc calls this function and the value inside the function is alert, so the value of temp gets printed in my alert box. Now let’s say if click okay on the alert, this has been printed thrice because this document.write has been written here. But alert has been executed first, so after executing alert all three lines have been printed. Because I have written temp directly so it is accessible, but if change it to window.temp and save and reload it, you can see the value is still accessible.

The value of temp is accessible by window.temp also, so now I will click okay and here are my three values. The variable which we initially defined by temp, is accessible by window.temp. Now we will play something in this, let’s say I change var x to var y, uncomment it, “this is a ‘y’ variable” okay, we used double quotes earlier so I have used single quotes this time otherwise if I use double quotes befor y so the line will end there so we can’t do that, that’s why I have taken y here.

I have defined y variable here, reload, temp variable appeared. Now if I have to access this y variable outside block scope, let’s say we try it, below def we write document.write and I simply write ‘y’, reload, temp variable, and here error has occurred, y is not defined. Because before that we called abc and def and that’s why my temp variable value was printed but the later line window.x has not been printed, the other two lines has not been executed.

(12:21)

The error has occurred at line 21 as you can see here, okay, s this defines that line after 21 has not been executed, def has been called from above only, if we see line by line execution, then after abc there is def so it calls def function, this has been executed, returns to the def function at line 23 and error occurred.

So that’s why def was called and printed but the lines 25 and 26 which falls after that did not get printed. So we are clear till here, y is inside the block so that’s why it is not giving value and error has occurred. So we will change it to window.y and we will see if this gets executed or not? So okay, so yes this is a variable and then it say undefined. Let’s put br over here, it is saying undefined, means the error has been removed but it is saying undefined now.

We don’t know that window.y has accessed which y but it accessing one such variable where window.y has not been defined. Because we have add only one variable in window, x in window.object, window.x is there in window.object, value of x is present in window.object but there is no value of y in window.object, that’s why when we are printing y which is not yet defined, so we are getting undefined.

If in similar way I take some random name, let’s say instead of y I take w and here instead of y I take z, so I am getting undefined three times because neither y is defined nor z is defined nor w is defined, nothing is defined. That’s the reason our ywz are not defined only and that’s why it is getting printed undefined. So this was our internals of global variable means how global variable are defined internally? So if, let’s see in program, if I define any variable at top without scope, defining it outside any block scope, so with the help of window object it will be accessible from anywhere in my script.

 So defining any variable initially will be defined internally also through window object only. But if I am defining any variable inside the block, it will be accessible inside the block with the help of window object but outside the block it will not be accessible by window object. Internally also if we defining any value globally it is accessible with window object also and without window object also.

So this about global variable, in last segment we already conducted local variable. In this segment we conducted global variable also, how the actual execution is done, we have seen in today’s segment. Guys I request you to perform it practically, right now we are just going through the basics in our Java script. I request you to perform everything practically, check it how does it work.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Thank you.

(video duration- 16 mins 14 seconds)