JavaScript has three ways to declare variables.
var width = 100;
let height = 200;
const key = "Tech Talks";
var
- The scope of a variable defined with the keyword “var” is limited to the “function” within which it is defined.
- If it is defined outside any function, the scope of the variable is global.
-
var
isfunction scoped
Block Example
{
var a = 10;
console.log(a);
} //block 1
{
a++;
console.log(a);
} //block 2
- We are using the keyword
var
to define thevariable a
, the scope of a is limited to the function within which it is defined. - Since a is not defined within any function, the scope of the
variable a
is global, which means that a is recognized within block 2
Function Example
function fun1() {
var a = 10;
console.log(a);
} //function scope of fun1
function fun2() {
a++;
console.log(a);
} //function scope of fun2
- Since we have enclosed
fun1
andfun2
, within separate functions, the scope ofvar a=10
, is limited tofun1
anda
is not recognized infun2
.
let:
- The let keyword was introduced as part of ES6 syntax, as an alternative to var to define variables in Javascript.
- The scope of a variable defined with the keyword
let
orconst
is limited to theblock
defined by curly braces i.e. {} -
let
isblock scoped
.
Block Example
- Let us rewrite the code using the keyword
let
{
let a = 10;
console.log(a);
} //block 1
{
a++;
console.log(a);
} //block 2
- Since we are using
let a=10
, scope ofa
is limited toblock 1
anda
is not recognized inblock 2
Function Example
function fun1() {
let a = 10;
console.log(a);
} //function scope of fun1
function fun2() {
a++;
console.log(a);
} //function scope of fun2
- Since we have enclosed fun1 and fun2, within separate functions, the scope of
let a=10
, is limited to fun1 and "a" is not recognized in fun2.
const:
- If a variable is defined with keyword const, it cannot be reassigned.
- If a variable is defined using the const keyword, its scope is limited to the block scope
- It is important to understand that const does NOT mean that the value is fixed and immutable.
- It CAN be mutated.
Example
{
const a = 10;
console.log(a);
} //block 1
{
a++;
console.log(a);
} //block 2
Since we are using
const a=10
, scope of "a" is limited to block 1 and "a" is not recognized in block 2.Example to show that the value of the variable defined within the const keyword is mutable, i.e. it can be changed
{
const a = [1, 2, 3];
const b = { name: "hello" };
a.push(4, 5); //mutating the value of constant "a"
b.name = "World"; //mutating the value of constant "b"
console.log(a); //this will show [1,2,3,4,5]
console.log(b); //this will show {name: "World"}
}
This code will run without any errors, and shows that we CAN mutate the values that are defined by "const"
Note that these variables defined by const cannot be re-assigned
{
const name = "Tech Talks";
const PI = 3.14;
const a = [1, 2, 3];
const b = { name: "Hello" };
name = "Ankit Kumar"; //Throws an error, since we are attempting to re-assign "name” to a different value.
PI = PI + 1; //Throws an error, since we are attempting to re-assign PI to a different value.
a = [1, 2, 3, 4, 5]; //Throws an error, since we are attempting to re-assign "a" to a different value.
b = { name: "Hello Ankit" }; //Throws an error, since we are attempting to re-assign "b" to a different value.
}
Summary
var:
- function scoped
- undefined when accessing a variable before it's declared
let:
- block scoped
- ReferenceError when accessing a variable before it's declared
const:
- block scoped
- ReferenceError when accessing a variable before it's declared
- can't be reassigned
Also, to be notified about my new articles and stories:
Subscribe to my YouTube Channel
Follow me on Medium, Github, and Twitter.
You can find me on LinkedIn as well.
I am quite active on Dev Community as well and write small topics over there.
If you are Instagram person, follow me here
Top comments (1)
The keywords also differ when it comes to JavaScript hoisting. Learn more here: devopedia.org/hoisting