Difference between var, let and const in JavaScript
Function scope vs Block scope in JavaScript
In this article, we will cover differences between var, let and const.
In ES6, we get two new ways to define variables let and const, we used var to define variables before ES6.
Let's understand function scope and block scope
The code between cruly braces {} is refer to block of code
Function Scope
Visibility of variable is limited to function in function scope.
function fnScope() {
var str = 'Function Scope';
console.log(str); // 'Function Scope'
}
console.log(str); // ReferenceError: str is not defined
Block Scope
Visibility of variable is limited to block in block scope.
if(true) {
var a = 'TheBitOps';
let b = 'javascript';
const c = 'Development';
console.log(a); // 'TheBitOps'
console.log(a); // 'javascript'
console.log(a); // 'Development'
}
console.log(a); // 'TheBitOps'
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined
Here you can see clearly variable a visibility is not limited to if block while variable b and c is limited to if block
So var has function scope and let/const have block scope
Var variables can be redeclared and updated
var str = "hey handsome";
var str = "say Hello to him";
// and
var str = "hey handsome";
str = "say Hello to him";
let variables can't be redeclared and but we can update them
let str = "hey handsome";
let str = "say Hello to him"; // error: Identifier 'str' has already been declared
// and code below will work fine and update variable value
let str = "hey handsome";
str = "say Hello to him";
const variables can't be redeclared or updated
const str = "hey handsome";
str = "say Hello to him"; // error: Assignment to constant variable.
// not this
const str = "hey handsome";
const str = "say Hello to him";