JavaScript Variables

JAVA SCRIPT BASICS

Java script Variables

(00:00)

Hello guys, welcome to our series Java script. In our last segment, we saw how to add comments in Java script. Like if we have to add single line comments in our program then how do we do it? We do it by using double forward slash , and after that we saw we can add multi line comment by using /**/ , we can add comment between these two stars.

Let’s move further with our today’s segment. Our today’s segment is about variables in Javascript. Basically, if you have a question regarding what are variables?

Then, if we look from mathematics term, if you are from Hindi medium or English medium or from any regional language medium then usually we use word ‘chal’ , means a particular storage space or just consider a box in which we can keep things.

At your home you must have a box in which you keep things, for a time being you can keep one thing in that box which you can later remove and then keep other things in that box which fits in that box. Same is the concept with our variable. Not only in Javascript, but we use variables in other programming languages also. But in Javascript, the concept of keeping things in a box is used for variables like a storage space used for storing things.

Moving further in our side, variables in Java script means simply we can understand it by saying storage location. If we talk about our system, in our system we have memory, if we have to allocate memory to something then we can do it with the help of storage location. For example, let’s say I have 2 byte space on my memory. I can store something up to 2 byte in my memory. If required I can take back that value from my memory location.

I can keep any characters in that like A B C D or 1 2 3 displayed on our keyboard. I can keep numbers or any word for example, there is A B C D so we can use a collection of alphabets. So if I am storing all these things in my memory, that becomes a storage location, where I am storing something and retrieving it. So basically in our Java script there are two types of variables available to us.

First is the local variable and second is the global variable. It has been written here. So these variables are also known as identifiers. Variable means something whose value keeps on changing. If I take the opposite of variable means something whose value cannot be changed, we call them constants.

In Javascript, variables are also present in the pictures and constants are also present in the picture. So in our current segment we are going to discuss only variables. We are going to conduct different segments in our course for constants where we will study it in detail. Means constants are such storage whose value does not change according to time.

But a variable is one such identifier whose value changes with time. Moving further, whenever we define a variable in Java script programming there are some rules to define it. Types of rules are, first, Name must start with a letter means the name of our variable should always start with a letter, it can start with either small a to z or capital A to Z. Apart from these the signs allowed are underscore(_) or dollar ($). So our first letter of variable should be a combination of either small a to z or capital A to Z or signs such as underscore or dollar.

It means the first position in my variable cannot be any number or sign apart from underscore or dollar sign. So here I cannot write 1 number instead I can write number 1. After the first letter we can use digits from 0 to 9 for value 1 means it is not like 0 to 9 numbers are not allowed, they are not allowed at only first position, after that you can use it.

 For example, here it is written value 1 now if I shift 1 it will become 1 value which is not allowed. After the first characters numbers are allowed so value 1 is allowed. Third, Javascript variables are case sensitive, for example, x that is small, and X that is capital, are different variables, so if I have written x=1 and X = 2 then my capital X and small x are not the same, they are both different. So if I write small x=1 and capital X=1 then also they are different. Value of small x is 1 and value of capital X is also 1 but these variables are different in itself.

(06:10)

So these are very simple rules that the first letter should always be alphabets or it can be underscore or dollar sign. We can use 0 to 9 after the first characters and every variable is case sensitive also. Here few examples are given in which correct values are given. So let’s say if we are using incorrect values then it will lead to some errors also. So we will practically see what those errors are.

 So let’s say I open sublime text and in HTML I will write:- example of… variable and (8 seconds pause ; cursor movement) so… this is my program and I will run it (6 seconds pause ; cursor movement) so this is my program now what will I do in this? I want my variable to be identified as which is correct and which is incorrect.

So for that what will I do? I will write a script and in that I will define variable. So let’s say my variable is var, variables are always defined by the keyword ’var’. So if you are writing any variable in your Java script program then make sure you always start with V A R, ‘var’.

After var, let’s say I take a variable i.e. a, and give it a value 10 i.e. a=10 so we know that 10 is a number, so the value of a is number 10. After that I will give one more variable, we know we can use a to z in small letters or A to Z in capital but we cannot use numbers, but underscore and dollar sign can be used.

Let’s say I write ‘_a’ and give that variable a value….(typing), ‘ hello’ okay, so I did two things, I took first variable as small ‘a’ and second variable as’_a’ .of course both variables are different as their values are different i.e. 10 and ‘hello’ respectively. We saw yesterday document.write with help of these we can show our values in the browser.

We do have different methods of showing our values in the browser which we will see as our course proceeds. Now I will write value, document.write a ; save and reload. Here I have written ‘a’ and I got the value 10. So the value of small ’a’ i.e 10 gets printed on my browser with help of document.write.

Now if I write ‘_a’, it means if I print my another variable and then save and reload, so here my value is ‘Hello’, which is the value of'_a '. So this is my right way to declare my variable or to initialize it. now let’s say if I write my script again…. in body by writing B R, so here I am writing again, here I will define my variable, let’s say we know we cannot take 123 as variable, so if write var 123, means I take digit as my first word and give it a value, var 123=50 and now I print it.

(5 seconds pause ; typing) So this is my variable and now I am printing it and then reloading, so, now you can see hello is getting printed which is from my previous script. After B R tag nothing is getting printed, for that we will click F12 and we will go to the console, in console What happens? Whenever we are running Javascript if in any line, error is occurring due to Java script that time we can print in console.

So here in this line you can see in red font- ‘Uncaught Syntax Error Unexpected number’, means we took a variable at line 21 as you can see here variable dot html, which is my file, so console explains us that here in file named variable dot html , in line number 21 an error has occurred. Variable html colon 21 means file name is variable html and 21 is the line number.

The error is, uncaught syntax error means unexpected number, means an unexpected number has been printed. Of course we cannot define 123 because the first letter should be the alphabet or something like that. So let’s say I add $ before 123, now you can see the color has changed to white, as the valid variables are shown in white color. I write in document.write as $123 and load it, then you can see after ‘hello’ 50 has been printed as my $123 value is 50 and also the error which was showing in console has also been removed.

Means there is no error, my program is correct and proper value is shown. Correct way is that we characters a to z or we can use’_’ or ’$’ but numbers or other special characters like on our keyboard special characters printed on 1 to 9 that we cannot use here. This was our method, how to define or show variables.

(12:29)

Here a script is given in which we can perform mathematical operations if we are using Javascript. So let’s say, here in my program I take two variables, first I will remove my incorrect way and I write var x=10, let’s define another variable y=20, now let’s take variable z, now I want summation of x and y so var z=x+y ; so if I wish to print its value then it should go with document.write, in that i will print z , so save and reload, so here you can see 30 is shown which means x is 10 and y is 20 and z is x+y i.e. 10+20= 30. that is being printed here.

clear up till now !

So this was one operation which we performed, which means we can define variables in script as well as we can perform some operations. We will see this in detail in the operator segment. But this is also a method of defining variables.

Moving further, using let and const, these are two ways in which variables can be defined. We have to see how let and const are different from var. Here you can see I have used var in my program for variable. Like var a, var _a then var x, var y, var z. Same ,E S 6, ECMA script version 6, until ES5 only var was available. Later let and const were introduced.

So what is the use of let? There is only one difference between let and const, that is if I define any variable with the help of var, then throughout the program I can change the value in the variable, after changing value I can show it, save it. I can do many more things through that.

Now the difference between let and var is, this is my variable x, now I will give it scope…, we define scope with curly braces{} now here I write var… temp, where temp means temporary. So temp equal to“ this is a temp variable “ okay, so here I have defined it by var. now in this only… , document.write(temp); and now, I will define this outside the scope also and save.

Okay, so here I am getting it twice. So let’s say if (10 seconds pause ; typing) , so here I am getting , this is a temp variable twice. So currently I have defined this temp variable by var. if I change this var to let and then reload it, here you can see my second line has been removed.

 But I have written it two times, document.write temp, again I have written it down also. So why have this been removed? I will check this console, what exactly is the error. So here in the console you can see, temp is not defined, where? At variable html 33, means at line 33, temp named variable has not been defined.

Means the variable which has been defined by let gets bound inside its scope means if I type this var document.write z, inside the scope, if i type, (5 seconds pause) so you can see 30 is getting printed, means z is accessible inside the scope. But outside scope, my temp is not accessible. This describes to us that whenever we define a variable with help of let keyword then that variable gets bound with scope, we cannot use that variable outside scope, we cannot use the value of that variable.

So this is the difference between var and let, if we have used var then we can access it inside the scope outside the scope everywhere. If I have defined any variable with let, we cannot use it outside the scope means these open and close curly braces , outside it we cannot use that variable.

I hope you have understood so far.

Next in our slide was const, const means such variable whose value cannot be changed. So for example, here only I will add… const constant equal to let’s say, I take 60; now I print this constant(6 seconds pause ; typing) okay, save, okay. this is not getting executed, because this temp has not been defined at our line 35, so that’s why my Java script execution has stopped at line 35 where error has occurred. So we are learning this also today, that if we are executing any code line by line, then if I am executing any Java script code after the line where has occurred then execution will not take place, the execution will stop there only.

(18:55)

So if I comment on this line and execute it then you can see that error has been removed and I am getting my output also which is 60, value of document.write constant is 60 which is stored here. Now if I write this (typing) “this is a constant value” that we are getting here “this is a constant value”. Let’s say if we change the value of constant after printing once (typing), “constant value is been changed” let’s see what happens here? As you can see an error has occurred instead of printing the value.

Where is the error? Assignment to constant variable at line 39 so here you can see at line 39, so meaning of constant variable is, if we have defined any variable by const keyword then, the value which we have given to that variable the first time that values gets assigned permanently, we cannot change it in future.

So if I am defining any variable by const keyword and then I am changing its value then the value won’t get changed. But similarly, let’s say here I took z= x+y and the value is 30 but if I change the value of z, z=50… ; and print this z here, (3 seconds pause; typing) okay…, so here also the same thing we are assigning this line that’s why it will not be executed. save.

So you can see initially the value of z was 30 and now it has been changed to 50. So if I am defining any variable with var keyword, then meaning of var, we can perform operation on it, and the variable defined by var keyword can be accessed anywhere in our Java script during our whole program, that variable is accessible.

But if we are using let, then a variable defined by let keyword we cannot use outside the scope, second, if we are defining any variable by const then we cannot change its value, the first time given value becomes its permanent value. So this is the difference between var, let and const.

clear guys!

In Java script, there are some local variables and some global variables, we have already seen that but we will study it in detail. You must have seen that the program which we performed, we generated block scope with curly braces . If I am defining any variable inside the block so there is a possibility that its scope is defined. Like here an example is given, here a function is created inside script in that a value is given by var, now let’s say, this is our local variable, so I will generate a program…, (typing) html example local variable, okay, (4 seconds pause; typing)

Now, we will take a script in this local variable.

Now we will move onto our slide, what is done in the slide? We have created a function abc and we have stored a value var x=10, so let’s say I do the same thing here.(typing) Function abc var x=10 ; so now I need to call this function so that this x will be initialized. If I don’t call this function then anyhow my x will not be initialized. So let’s say if I call here… abc explicitly, then nothing will be seen on the program, because we have not printed anything .

So let’s say, now what will we do?

 My var has been already defined, but let’s say here..(typing) I take document.write , here I take x; okay, so here you can see my x is not printed here. Error has occurred, x is not defined, because this variable is inside the function, not outside. So this defines that if I am defining any variable inside the block then we cannot use it outside. If the same thing document.write x, If I write inside the function, then you can see 10 is printed.

(24:05)

Because the function has been defined, and I have called this function from 15^thline. After calling, the line document.write will not work because this x is bound with the scope function. That’s why, it will not work. Now if you write this x here.. and reload it then you can have 10 and 10 is printed, it looks like 1010, for that what we will do? (9 seconds pause; typing), okay so this is first 10, from inside the function call, if we see line by line execution, then variable x=10 then this function is defined. We have not called it yet, when will it be called? When we call it by this method.

Until we call the function, this 14^th line function will not be called and executed. If I comment this, you can see here only one 10 is visible because this function document.write will be called only when I call it. So save, now why can we see 10 two times? Because while calling function value of x is accessible and after function, here function ends we return to this line and after that br tag so this comes down, and then this document.write again printing the x, first this x and then this x is printing.

My line number 20 is getting executed because I have taken variable x outside. If I take this again then it gets bound to the scope. In another example what did we see? That temp is bound with scope, but if I write this variable z inside the scope then even my z gets bound with the scope. Means the scope in which you are defining a variable that variable’s scope gets bound. If you have to define any variable globally then you can do one thing, you can place it initially.

What will happen because of that? You can access the variable throughout the program, but if you are writing it inside the scope then that variable value is accessible inside that scope only. We call this method a local variable. Local variable means such variable which is bound inside the block, it has limitation that it cannot be accessed outside the block.

Moving to the slide, here in this block you can see that my value is accessible. Here is another example, if is used here, and here also we have taken a scope, meaning if I write a variable in this scope, then it gets bind to that scope.

So guys here what we have to remember is, if I am writing any variable inside curly braces then that variable’s scope gets limited to the curly braces only, and that variable is known as local variable, which can be accessed only inside that curly braces.

clear up till now..

Now opposite of this, Java script’s global variable. So global variable means, which I just explained to you, if I shift my variable x=10 to the top, then this x is accessible in the function and is even accessible outside the function, my variable is accessible throughout the script. So this is my global variable, which can be accessed throughout my Java script program.

So if I name this variable as a local variable then I will add comment,(typing) ‘ The variable x is defined locally for abc method’. Save. and now I generate another program, which will be for our global variable, (10 seconds pause; typing) save as global variable. So this is my program for the global variable which is running here,.. okay, so for this global variable I will take the program from my slide only, what I have taken? I have defined a variable and I am going to print it in two functions. So let’s say I will write here script, I will take a variable inside the script and I will give it a name let’s say temp =2000;

Now I will generate a function, function ‘a’, and in this a function I will write document.write temp;, now I will generate one more function and I will name it b and in that also I will print the same line. And here (6 seconds pause;typing) br tag so that it will go in a new line, okay and I will again print it here, temp variable.

We have generated a and b but we have not called them yet, so as soon as I executed it, you can see 2000 is getting printed means the value of temp variable is getting printed,

but where? Not from the two functions but through line number 22.

But if I call ‘a’ and after that call ‘b’, save it and reload, as you can see 2000 is printed beside 2000. (4 seconds pause ; typing) Okay 2000, now from my ‘a’ function this 2000 is getting printed and this 2000 is getting printed from my 'b' function. So what is my scope here? Here my temp variable, I have defined it outside, so it is accessible throughout, it is accessible in ‘a' function, it is accessible in ‘b’ function also and it is accessible even outside these two functions.

So this is our Java script’s global variable. So what did we see in today’s segment? We saw, how to define variables? What is variable? What is the difference between let and const variables, what does it do? If we define any variable inside the block, inside the curly braces then my variable becomes local variable. But if I want my variable to be accessible throughout the program then I will have to define it outside the block, so that it can be used globally.

So guys variable is one of the most important topic in Javascript, many questions are asked on this during interview, there are different ways of playing with variable, defining it, accessing it etc. so all these which we saw in today’s segment and after that we will study it in detail as we proceed with our course.

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.

Our next topic is global variables in Java script. Means today we saw global variables and how to define them but there are few more things which we were not able to cover in this segment, so we will continue the same in the next segment also.

Thank you.

( video duration- 32 min 32 seconds)