In vanilla JavaScript, variables are declared using ‘var
‘ keyword. In version ES6, we can define the variables using let
and const
keywords too.
All three keywords have similar syntax for variable declaration and initialization, but they differ in their scope and usage.
1. Differences between var, let and const
We will see the main differences in short, and then we will explain further in the post.
- Variables declared by
var
andconst
keywords are function scoped and are scoped to the immediate function body.
Also, variables declared withvar
keyword are hoisted (initialized withundefined
before the code is run) which means they are accessible in their enclosing scope even before they are declared. - Variables declared by
let
keyword are block scoped and are scoped to the immediate enclosing block.
Thelet
variables are not initialized until their definition is evaluated. Accessing them before the initialization results in aReferenceError
.
'var'
Keyword
2. The 2.1. Variable Syntax
The var
keyword has traditional variable definition syntax. Optionally, we can initialize the variable with a value.
If we do not initialize the variable in the var
statement, it is automatically assigned the JavaScript value undefined
.
var value; //value is 'undefined' var data = 100; //initialized with number 100 var blogName = 'howtodoinjava.com'; //initialized with string value
2.2. Function Scoped
- Variables declared with the
var
keyword are function scoped. It means that they can be accessed inside the same function only.function fun() { var dataX = 10; if(true) { var dataY = 20; console.log(dataX); //Output 10 console.log(dataY); //Output 20 } console.log(dataX); //Output 10 console.log(dataY); //Output 20 } fun(); console.log(dataX); //Not available outside function; dataX is undefined console.log(dataY); //Not available outside function; dataY is undefined
- Variables can be used before we either declare or initialize them. In this case, the value of the variable will be
undefined
, but there will not be any runtime error.function fun() { console.log(dataX); //Output 'undefined' var dataX = 10; } fun();
2.3. Global Scoped If we do not use var
Keyword
In JavaScript, if we do not use var
keyword for variable declaration (implicit declaration) then variable will be created in global scope. e.g.
for(index = 0; index < array.length; index++){ //index is in global scope //code }
Above for-loop will create a variable called index
in the global scope. If some other code is also using a variable named 'index'
variable, then we’ve just overwritten that other variable as well.
To avoid giving the variable global scope, we must use the
var
keyword in the variable declaration.
2.4. Variable Hoisting
Please note that variables declared with the var
keyword are subject to hoisting.
Variable hoisting means that if we declare a variable (declared but not initialized) at the end of a function, the runtime will hoist it to the top and we will not have any error if we would have used that variable before being declared.
Read More: JavaScript Hoisting
'let'
Keyword
3. The The let
keyword is very similar syntax to the var
keyword – but it is more restrict in the scoping.
3.1. Block Scoped
- Use the
let
statement to declare a variable, when the scope MUST BE restricted to the block in which it is declared.function fun() { let dataX = 10; if(true) { let dataY = 20; console.log(dataX); //Output 10 console.log(dataY); //Output 20 } console.log(dataX); //Output 10 console.log(dataY); //dataY is 'undefined' } fun();
See above highlighted line. If we would have used ‘
var
‘ keyword thendataY
would have been available due to its global scope within function. Because we have used thelet
keyword,dataY
is not visible beyondif
block. - A variable declared using
let
cannot be used before its declaration orReferenceError
will result.function fun() { console.log(x); //Output 'undefined' console.log(y); //Error - "Uncaught ReferenceError: y is not defined" var x = 10; let y = 11; } fun();
3.2. No Variable Hoisting
Variables declared with let
keyword are not hoisted. It means we can use the variable before we declare and initialize it.
'const'
Keyword
4. The The const
keyword follows same rules as let
keyword. Only difference is that const
is used to drfine constants in the program.
4.1. Block Scoped
- The
const
keyword declares a block-scoped variable with a constant value. It is basically variable declaration with ‘let
‘ keyword where variable value is constant and cannot be changed. - The
const
follows the same scoping principles as thelet
keyword. - If we know that the variable we are declaring cannot and should not be allowed to reassign, then declare it with
const
, else use thelet
keyword.
4.2. const
Syntax and Example
const PI = "3.14"; PI = 12; //Uncaught TypeError: Assignment to constant variable.
Happy Learning !!
Comments