Difference between var and let in Javascript

Main difference between var and let is Scoping.

var keyword:

var declare variable and optionally initialize the variable to a value.

Syntax:

var var1 [=value1] [, var2 [=value2]] ...;

var declarations, wherever it occur, are processed before any code is executed.

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.

If you re-declare a JavaScript variable, it will not lose its value.

function reDeclareUsingVar() {
var b = 11;
var b = 22;
console.log(b); // output is 22
}

if before declaring var if you try to use variable it will give the undefined output.

console.log(var1); // Output will be undefined
var var1 = 11;

The scope of a JavaScript variable declared outside the function/block is global.

Example:

function variableDeclarationUsingJsVar(){
 var var1 = 11;
 console.log(var1); // output 11
 if(var1 === 11){
 var var1=22;
 console.log(var1); // output 22
 }
 console.log(var1); // output 22
}

let keyword:

let declares a block scope local variable, optionally initializing it to a value.

Syntax:

let var1 [=value1] [, var2 [=value2]] ...;

The scope of variable declared with let is to the nearest enclosing blocks.

if you re-declare a let variable, it will throw SyntaxError.

Example:

function reDeclareUsingLet() {
let a = 11;
let a = 22; // SyntaxError thrown
console.log(a)
}

Variables declared with let are not accessible before they are declared in their enclosing block. and throw ReferenceError.

console.log(var2); // gives ReferenceError
let var2 = 22;

The scope of a let variable declared outside the function/block is global.

Example:

function varDeclarationUsingLetKeyword(){
let var1 =11;
console.log(var1); // output 11
if(var1 === 11){
let var1=22;
console.log(var1); // output 22
}
console.log(var1); // output 11
}

Why the keyword “let” selected is briefly explained at here.

Join Discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.