In ECMAScript 2015 two new JavaScript keywords were introduced
let
and
const
, to declare variables in JavaScript. Before it, we only had
var
keyword to declare variables for global and function scope (local scope). In this JavaScript tutorial, we will learn everything about the JavaScript
var
keyword.
Var keyword in JavaScript
The
var
keyword allows us to declare a variable.
Example
<script> var name; //variable declaration name ="Rahul"; document.write(name); // Rahul </script>
When we only declare a variable using
var
and do not assign a value to it, by default the variable become
undefined
.
<script> var game; //variable declaration document.write(game); // undefined </script>
Before we discuss
var
keyword further, you need to know about global, function (local), and Block scopes present in JavaScript.
Global Scope
When variables are declared outside the function or globally they considered as Global Scoped variable or global variable. And they can be accessed anywhere in the program.
<script>
var name ="Rahul";
function func()
{
document.write(name); //access name inside function
document.write("<br>");
}
func();
document.write(name); //accesing name outsside the function
</script>
Output
Rahul Rahul
In the above example, the
name
variable is the global scope variable because it is defined globally or the root of the main script. That's why we were able to access it globally or locally inside the function.
Function Scope
When a function is declared, all the code that resides in its body or between curly
{....}
brackets comes under a local scope or function scope. And the variable declared in that local scope is known as the local variable, which can only be accessed within the function scope.
<script>
function func()
{
var name ="Rahul"; // local variable
document.write(name); //print Rahul
document.write("<br>");
}
func();
document.write(name); //error
</script>
Block Scope
Block scope concept introduced to JavaScript with let and const keywords that we will discuss in next upcoming tutorials. For now, you only need to know that a block scope is a scope that generated between curly brackets
{....block scope.....}
. Do not confuse the Block Scope with the function or local scope, it is a completely different concept in itself. A block Scope can be generated by statements like, if...else, loops, etc. In block scope, if a variable is declared inside the
{...}
bracket then it will be only available for that curly bracket. As the block scope was introduced for
let
and
const
keywords, it has no effect on
var
variables. The var variable only follows the rules of Global and function(local) scope.
<script>
var id= 20;
if(id==20)
{ //block global scope
var name ="Rahul";
}
document.write("ID "+id+ " "+name)
</script>
Output
ID 20 Rahul
In the above example, we declared the
name
variable inside the Block Scope still we were able to print its value outside that block scope. This is because
var
declared variables do not follow the block scope concept.
Redeclaring the variable
When we redeclare a variable using
var
keyword, it simply declares a new variable for its respective scope.
<script>
var id= 20;
var name="Ravi"; //declare global variable
//name value is Ravi
if(id==20)
{
var name ="Rahul"; //redeclare name
//now name value is Rahul
}
function func()
{
var name ="Raj";// declare new local scope variable
}
func();
document.write(name); // Rahul
</script>
Hoisting Variables
Hoisting is a very unique feature of JavaScript, by far we are only accessing the value of var declared variable after declaring the variable. But hoisting variable allows us to access the variable before we declare it. When we declare a variable using the
var
keyword the hoisting feature of JavaScript, will automatically declare the variable at the top of the script.
<script> document.write(game) // undefined var game = "fifa21"; </script>
The JavaScript hoisting feature will treat the above code as.
<script> var game; document.write(game) // undefined game = "fifa21"; </script>
Summary
- var keyword is used to declare variables in JavaScript.
- var only follows the Global and local scope.
- Block Scope has no effect on it.
- The hoisting will declare the var variables at the top of the Script.
People are also reading: