Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 8, 2020 07:18 am GMT

Var vs Let vs Const in Javascript

Before speaking about the keywords var,let and const, I believe it is extremely important to understand the concept of scope.

Global Scope

Variables declared outside any function (globally) have global scope

Alt Text

Here, the variable global can be accessed from anywhere.

Function Scope

Variables that are declared inside a function (locally) have function scope

Alt Text

Here, the variable local can be accessed only inside the function.

Block Scope

Some variables can be accessed only within block i.e.,within {}

Alt Text

Here , the variable block can be accessed only within the if block. It cannot be accessed from anywhere else. Thus, the variable block has only block scope.

Now that we are clear with the scope, let's dive into the var,let and const keywords

var

Scope

The variables defined with the keyword var have function scope.If it is defined outside the function , then the scope of the variable is global.

Alt Text

Here, the variable foo defined with the keyword var can be accessed from anywhere while the variable bar is limited to the function scope.

Redeclaration and ReAssignment

The variables declared with the keyword var can be redeclared and reassigned.

Alt Text

Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Variables declared with var keyword are hoisted at the top of its scope and is initialized with undefined.

Alt Text

Here, the variable foo is declared later.But it is hoisted at the top and initialized to undefined.

let

Scope

The variables declared with the keyword let have block scope.

Alt Text

Here, the variable i can be accessed only within the for loop.

Redeclaration and ReAssignment

Variables declared with let keyword cannot be redeclared, but it can be reassigned.

Alt Text

Hoisting

Variables declared with let are also hoisted at the top, but let variables are not initialized until their definition is evaluated.This is because of Temporal Dead Zone

Alt Text

Thus,trying to access the variable foo before declaration gives reference error.

const

Scope

The variables declared with the const keyword also have block scope.

Alt Text

Redeclaration and Reassignment

Variables declared with const keyword must be initialized at the time of its declaration itself.Otherwise an error is thrown.

Alt Text

Variables declared with const keyword cannot be redeclared and reassigned.

Alt Text

Attempting to overwrite objects with const keyword throws error. But object keys are not protected and they are mutable.

Alt Text

Here, we can see that the object cannot be reassigned, but the keys of the object are mutable.

Similarly arrays declared with const keyword cannot be overwritten. But the elements in the array is mutable.

Alt Text

Hoisting

Variables declared with const keyword behaves the same way as let keyword.They are hoisted at the top of the scope but they are not initialized until their definition is evaluated

Alt Text

var vs let vs const - A Summary

varletconst
ScopeFunction or GlobalBlockBlock
RedeclareYesNoNo
ReassignYesYesNo
HoistedYesNoNo

Original Link: https://dev.to/sruthiragupathy/var-vs-let-vs-const-in-javascript-3aeb

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To