Let vs Var | Javascript Basics

Do we really need ‘Let’ if we already have ‘Var’?

I know I’m not good at photo editing 😐

What is Var?

Let see what MDN says:

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

Scope? What is it?

Scope determines the accessibility of variables or other expressions. To know in detail about scope check this link.

Var is Global-scoped or Function-scoped

Global-scoped means if a variable is declared outside a function, it is available for all functions and scripts on the web page or, in other words, it is available for the whole window.

Function-scoped means if a variable is declared inside a function then it is available & accessible within the function only.

let see an example:

var num = 9; // Global scope
function greeting(){
  var str = 'hey!!'; // Functional Scope
}

As variable num is outside any function, it has global scope. while variable str is inside the function so it has function scope. which means it can not be accessed outside greeting. Try this in your editor .

var num = 9;
function greeting(){
  var str = 'hey!!';
}
console.log(str); // ReferenceError: str is not defined

Most of us know this about Var so the question arises that what's the real issue with var?

Var can be updated and Re-declared. i.e,

var num = 9;
num = 15;

This is allowed in javascript and come on we have updated variables like this a lot of times. where’s the issue?

var num = 9;
var num = 15;

This is also allowed in the same scope. This is the issue. Now imagine you or someone has already declared num with some value at other parts of the code (but within the same scope), if you redeclare num unknowingly, it will get redefined and unexpected bugs can pop up. let’s see this example

var num = 9;

if (true) {
    var num = 15; // num will get redefined to 15
}
    
console.log(num) // 15

‘LET’ saves us

But before diving deep into ‘Let’, let see what MDN says:

The let statement declares a block-scoped local variable, optionally initializing it to a value.

Let is Block-scoped which means a variable declared with let inside a block is accessible only within that block.

I know what you are thinking. what is a block in the first place?

Block is a code area bounded by curly braces {}. Anything within {} represents a block. we generally encounter block with some conditionals like if statements or loops but it is allowed to use it standalone too.

{
  let a = 10;
  let b = 20;
}

This is a completely valid block. In terms of block-scoping of let, check this example

let a = 10;

if (true) {
    let b = 5;
    console.log(b); // 5
}
console.log(a); // 10
console.log(b) // ReferenceError: b is not defined

but in the case of Var:

var a = 10;

if (true) {
    var b = 5;
    console.log(b); // 5
}
console.log(a); // 10
console.log(b) // 5

As let is block-scoped, variable b is not accessible outside the scope it is declared in. but in the case of Var which is global or function-scoped, b is being accessed within the scoped it is defined in. hence no error.

Let can be updated but can’t be re-declared

Variables declared with let can be updated within its scope. i.e,

let num = 20;
num = 20;

but Re-declaration is not allowed

let num = 10;
let num = 20; // Error: Identifier 'num' has already been declared

As num is declared in the same scope twice, it throws an error (var does not show error in the same case, as discussed above). but note that the same variable can be defined in different scopes without an error which means

let a = 20;
if (true) {
    let a = 30;
    console.log(a) // 30
}
console.log(a); // 20

We have covered a lot about Var and Let. but there is one thing left which is

Hoisting of Var & Let

Javascript moves variables and functions declarations to the top of their scope before execution. this is called hoisting. Example:

console.log(num);
var num = 10;
// Before execution. above code will get converted to
var num;
console.log(num); // undefined
num = 10;

Both Var and Let variables are moved to the top but variables with var are initialized with undefined value while the Let variable is not initialized.

console.log(num); 
let num = 10;
// RefrenceError: Cannot access 'num' before initialization

That’s all for Var vs Let. As it is quite clear that Let is the Smart choice nowadays.

I’ll publish more such blogs. Thanks for reading 😄.