var is function scoped and let is block scoped. Let's say you have:
function understanding_var() {
if (1 == 1) {
var x = 5;
console.log('the value of x inside the if statement is ' + x);
}
console.log(x);
}
//output: the value of x inside the if statement is 5
5
function understanding_let() {
if (1 == 1) {
let x = 5;
console.log('the value of x inside the if statement is ' + x);
}
console.log(x);
}
//output: the value of x inside the if statement is 5
Uncaught ReferenceError: x is not defined
var is defined throughout the entire function, even if it's inside the if
statement, but the scope of let is always within the curly braces, not outside
it, even if the conditional statement is inside the function.
//let
1. It's used in block-scoped.
2. It does not allow to redeclare variables.
3. Hoisting does not occur in let.
// var
1. It's used in function scoped.
2. It allows to redeclare variables.
3. Hoisting occurs in var.
------------------Differences------------------ var let
Global Scope Yes No
Can be changed outside statement where made in Yes No
Block Scope No Yes
function run() {
var foo = "Foo";
let bar = "Bar";
console.log(foo, bar);
{
let baz = "Bazz";
console.log(baz);
}
console.log(baz); // ReferenceError
}
run();
// var is a function scope ***
if(true){
var varVariable = 'This is var';
var varVariable = 'This is var again';
}
console.log(varVariable); // This is var again
// let is a block scope ***
if(true){
let letVariable = 'This is let';
let letVariable = 'This is let again';
// let variable can't re-define but we can re-assign value
console.log(letVariable); // let letVariable = 'This is let again';^SyntaxError: Identifier 'letVariable' has already been declared
}
console.log(letVariable); //ReferenceError: letVariable is not defined
// const variable can't re-define and re-assign value
// const is a block scope ***
if(true){
const constVarible = {
name: 'JavaScript',
age: '25 years',
};
constVarible.name = 'JS';
console.log(constVarible) // {name: 'JS',age: '25 years'} <= we can update const variable declared object
}
In simple words 'var' is function scoped and 'let' is block scoped