Javascript Variables
In this blog, we are going to explore Variables in Javascript
Before, moving on to Variables let’s make some setup to run the Javascript Code.
There are different ways to run the Javascript code, but we are going to use the browser as all of them have Javascript built-in. To run the Javascript code we need a browse and an HTML file.
In an HTML file, we can link a Javascript code in three ways:
Using the script tag, we can add Javascript code inside the head tag and within the body tag,
<html>
<head>
<title>Run Javascript Code</title>
<script>
//Javascript Code goes here
</script>
</head>
<body>
<h1>How to run Javascript Code</h1>
<script>
//Javascript Code goes here
</script>
</body>
</html>
In the above example, We have included Javascript Code inside the head Tag and at the end of the body tag(i.e., after all the HTML Code). The preferred way of giving Javascript code is within the body Tag.
Another way to include Javascript Code is by creating an External Javascript File and linking to HTML File using script Tag and with the src attribute.
<html>
<head>
<title>Run Javascript Code</title>
</head>
<body>
//HTML Code goes here
<script src="script.js"></script>
</body>
</html>
In the above example, we are linking an external javascript file to an HTML File.
The reason we need an HTML file to run the Javascript Code is that at an early stage Javascript is made to run only inside the browser and the browser can interpret only the HTML file. But now Javascript can run outside the browser using Node.js runtime environment. The External Javascript file is saved with the .js extension.
Next Step, you need an IDE to code. There are IDEs like Visual Studio Code, Atom, Sublime text, etc., I will be using Visual studio code for my projects. You can download VSCode from this link according to your system configuration.
How to see the output in the browser?
Step 1 - Create an index.html File and Link Javascript script.js file externally to it.
Step 2 - Open HTML File in your browser.
Step 3 - Right-click —> Click on Inspect —> you will be getting a Google developer tool —> click on the Console tab.
Step 4 - browser console is the place where you see the Javascript Code Output.
Let us move on to Variables,
What is a Variable?
Variable is the temporary storage container / Location to store the Data Values. Let us take an example when our computer needs to process any data, it needs a memory block to store it. Likewise in programming, we need a storage container(i.e., Variables) to store data and use it later in Program execution wherever it is needed.
Syntax to declare a variable:-
Var Identifier_name=data to store;
Let us take an example, var X = 10;
The above image shows the variable syntax,
Var - keyword to declare the variable.
Identifier_name - We will be storing many different values in the program using variables and everything will be stored in a memory block. So, to uniquely identify the variables we will be using variable names(i.e., Identifier_Name).
There are some rules to declare the variable name / Identifier name, which are
- It can contain numbers, alphabetic letters, dollar signs, and underscores.
- The name can start with Alphabetic letters, dollar signs, and underscore.
- The number is not allowed as a starting character. Because, Javascript treats them as numbers, not as identifiers.
- Javascript is case-sensitive. So, there will be a difference between small and capital letters. In the below example, If you declare a variable name as an x but while accessing it (i.e., if you try to print the container variable by giving X as a variable name - it will show the error message).
var x = 120;
console.log(X); //Undefined
What is console.log()? Console.log() is a built-in Javascript function to print the output in the browser console.
Data Value is nothing but the data that we need to store in the program.
How is declaring a Variable different from defining the variable?
Declaring the variable:-
Declaring a variable means when we declare the variable without storing the value.
Let us take an example,
var container; //Declaring the variable
In the above example, we only declare the variable and do not store any data in that variable is called Declaring the variable.
Defining the variable:-
Defining a variable means storing data in a Variable.
Let us take an example,
var container;
container = 130; //Defining the variable
In the above example, after declaring the variable then only we are storing a value in it. That is called Defining the variable.
As soon as you declare a Variable and run the program. The program will go internally and a memory block is registered (i.e., on Our PC) and when data is defined, it will store that in the temporary registered memory block.
When the program is terminated (i.e., Closed) all the memory blocks created during the execution of Block get erased because as we said before, the Variable is only a temporary memory location. To store data.
Therefore, in all programming and scripting languages, the Variable concept is the same only the syntax varies.
Variable Hoisting:-
Variable Hoisting is nothing but we can access a variable before it is initialized.
Let us take an example,
console.log(container);// 200
var container = 200;
In the above example, we can access the Variable before it is initialized.
There are some drawbacks to Variables which are declared using the Var keyword. Therefore, In ES6 there comes a let and const keyword to declare the variable and that gives a solution to overcome the problem caused by variables declared with Var Keyword.
Let us explore let and const in detail,
Variables declared with let keyword,
- Cannot be redeclared.
- It should be declared before use.
- Variables declared with let keyword have block scope.
Cannot be redeclared:-
Variables declared with var keyword can be redeclared.
Let us understand with an example,
var container = 180;
var container = 150;
console.log(container); //150
In the above example, when we try to access(i.e., Print) the variable. It will print the output as 150. Here what happens is the container variable is initially declared with a value of 180 and later it is overridden with the value of 150. This is the issue faced with variables declared with the var keyword.
We can overcome this problem by declaring the variable with the let keyword. The variables which are declared with the let keyword cannot be redeclared again and it shows an error.
Let us see an example,
let container = 180;
let container = 150;
console.log(container); //error
In the above example when we try to redeclare the variable again which is declared with the let keyword, it will show an error. Because let is block scope within the same block we can’t redeclare it.
Variables declared with let keyword have block scope:-
Before ES6 there were two scopes: Global Scope and Function Scope.
After ES6 the two keywords let and const came inside and we had a Block Scope.
What is Block Scope?
Block Scope means declaring a variable inside the block or curly braces {} and it can't be accessed outside the block.
What is the Function scope?
The variable declared within a function is accessible only within that function and it can't be accessed outside the function called Function Scope.
What is the Global scope?
We can declare the variable Globally at the top of the program and we can access it anywhere in the program also within a function or block called Global scope.
Variables declared with the var keyword do not have a Block Scope.
Let us take an example,
var X = 10;
{
var X = 20;
}
Console.log(X); //20
In the above example, When we try to print X output will be 20. Here what happens is the variable declared with the var keyword does not have a block Scope. So, at first X value is 10 and after that X value is overridden to 20.
In the case of let,
let X = 10;
{
let X = 20;
console.log(X); //20
}
console.log(X); //10
Inside block(i.e., inside curly braces) when we try to print X it will give output as 20 because the variable is declared with the let keyword so it is block Scope and only it is accessible within that scope. Next, When we try to print X the output is 10. Because it takes the variable value which is declared globally.
There is one more case as we saw before within the same block: the Variable which is declared with the let keyword can't be redeclared with a new value.
Let us take an example for that to understand,
let Y = 120;
let Y = 150;
console.log(Y); // error
{
let Z = 300;
let Z = 400;
console.log(Z); //error
}
In the above example, it is clear that within the same block we can't redeclare the variable.
Hoisting with let:-
A variable that is declared with the let keyword, needs to be declared / initialized before it is used/accessed in the program.
Let us take an example,
console.log(container);// undefined error
let container = 200;
In the above example, we are trying to print the container variable before it is declared. So, it gives an undefined error.
Variables declared with const keyword,
- Cannot be redeclared.
- Cannot be reassigned.
- Variable declared with the const keyword has block scope.
Cannot be redeclared:-
- As we saw in the variable with let keyword, in const also we can't redeclare the value again.
- Const is used when we need to declare the value whose value should not be changed later in the program.
- Const keyword is highly used in declaring an array and object values.
Let us take an example,
const array = [1,2,3,4,5];
const array = ["Apple","banana","orange","pineapple"];
console.log(array); //error
In the above example, we can't redeclare the Variable.
Variable declared with const have block scope:-
As we see in variables with the let keyword, const also has block scope. It means that within the same block or curly braces {} we can't redeclare the Variable with the new value.
Let us take an example,
const container = [1,2,3,4,5];
const container = [4,5,6,7];
console.log(container); //error
{
const container = ["Apple","orange","pineapple","banana"];
const container = ["strawberry","mango","grapes","Watermelon","Giwi"];
console.log(container);//error
}
In the above example, we can see that we can't redeclare the variable with a new value and if we try to do it will throw an error.
Cannot be reassigned:-
Variables that are declared with the const keyword cannot be reassigned.
Let us take an example,
const Pi = 3.14; // correct way
const Pi; // wrong way
Pi = 3.14;
In the above example, once we declared the variable with the const keyword we can't reassign the value to it.
Hoisting with const:-
A variable that is declared with the const keyword, needs to be declared before it is used/accessed in the program.
Let us take an example,
console.log(container);// undefined error
const container = ["Apple","orange","banana"];
In the above example, we are trying to print the container variable before it is declared. So, it gives an undefined error.
Summarizing the concept of let and const:-
- The concept that we understand here is variable which is declared with let and const keyword is accessible only within the block and not outside the block.
- Variables declared with let and const keywords can't be redeclared within the same block.
- Variables declared with const can't be reassigned.
Variables that are declared globally can be accessed anywhere in the program.
In the next blog, we will explore about Operators.