Upgrade is always necessary for growth

Maybe Original – Ishan Singhal

Javascript is the hot trend right now which is growing day by day but hey who said that top leaders don’t need an upgrade and the quote i above stated also applies for javascript as well

When the new ES6 comes with up a ton of new weapons to beat up the competition it is loved by almost everyone and everyone up is upgrading their skills to match the new Standards and even make their developer life easy

So in this tutorial we are gonna have a look at what is these 3 magic keywords “var”, “let”, “const” what they mean and also we are gonna have a look at a competitor analysis as well means what to use when

So let’s start this tutorial maybe gonna be super helpful for you to understand and even use them

Let’s Start

var

var this is the old great king and even loved by most of the old school programmers to declare a variable it is favored for its originality and simple but powerful approach

But there are a few problems with var that is the reason why the other 2 the let and the const are introduced but before going into that we will try to focus more on the var and try to understand more of its features and problems

Scope of var

The scope is until which the variable can be used in the code it can be global or it can be local scoped as well

Global Declaration of var

A Variable Declared with var can be declared globally as well as locally if the variable is declared outside any function it is a global declaration of variable means it can be used anywhere in the code in any function loop anything

In this below part i explained Declaration vs Initialization if you don’t have time and if you want you can directly skip to this part

Declaration vs Initialization

Maybe you might be thinking that some might use declaration some might use initialization in their tutorial so actually the difference between them is quite simple

When a variable is just declared and not assigned any value it is called a variable declaration

//Variable Declaration

var name  

Now if you run this above code it will declare a variable called as the “name” in javascript and if you print it

//Variable Declaration

var name  

console.log(name)

It will show undefined because until this point the variable is just declared it is not assigned any value to use This is called Variable Declaration

Now you might be thinking than what is Variable Initialization

Variable Initialization is quite simple again it is just assigning the same variable a value

//Variable Declaration

var name = "Bro" 

console.log(name)

Now if you run this it will print Bro as now the variable is initialized now it has some value and now this is Variable Initialization

Now you might be a complete understanding of both now let’s move on further

Resuming Global Declaration of var

The Global Declaration of var is quite easy it’s like child’s play what we just need to do is to declare and initialize a variable

var name = "Bro"
function names (){
  console.log(name)
}

Now as this name variable is declared outside any function this can be accessed anywhere in the code

One MORE Key Point: Variables can be redeclared and can be updated

var name = "Bro";
var name = "Big Brother"

In the above code, we just redeclared the variable name from value “Bro” to the value “Big Brother”

Same applies for updating the variable

var name = "Bro";
name = "Big Brother"

Hoisting in var

Hoisting in basic terms means that what code will execute when and where it will go like this :

if we run this code

console.log(name)
var name = "Bro"

Now this above code will be arranged like this

//This Code will go like this //
var name

(//Variable Declared not Intialized //)

console.log(name);

var name = "Bro" ;

If you run this it will not return any error it will just return undefined because the variable s just declared not initialized that’s why

The Issue with var ??

Actually, the Problem with var is quite confusing

Let me explain it to you a little bit by the example

Everyone needs a true friend

var Friend = "Dude"
var trueFriend = true

if(trueFriend){
	Friend = "Bro";
	console.log(Friend);
}

Now when you run this code it will return the variable Friend as Bro which somehow is right if you want to do so but that’s where the issue arises, if you are working on a quite big code than obviously these types of problems, can create a ton lot of logical errors and frustration as well

And this problem of the frustrated programmers was removed by the other frustrated programmers by the introduction of let

So Now Let’s talk about let

let

Now the let is quite used and acting like as a replacement of var because let is a cure to the problems of var

Now Let’s have a look at let

let is block scoped

As unlike var, the let is block scoped means it will remain in a block here block means any code written in the curly braces({}) any function, any condition, any loop means anything

let me show you let

let Friend = "Dude"
let trueFriend = true

if(trueFriend){
	let Friend = "Bro";
	console.log(Friend);
	console.log("==========")
}

console.log(Friend)

Now if you see this code which is a problem in the old var is now solved by let if you run this you will get two different outputs when is Bro and when is Dude as you want it

so you can say you can declare the same variables with different values if they are in a different block

And Belive me guys it will be quite helpful for you when you are working on a large scale production app

let can’t be redeclared

Now the var fans will say that here var wins and that’s completely true that let can’t be redeclared in the same block yeah

But one major point to note that let can be updated it can’t be redeclared in the same block

Let’s see an example

let name = "Bro";
let name = "BRO"

if you will run this it will return an error because the variable name is already declared with let that’s why it will not be redeclared

But if you want to update it you can simply do it by assigning the new value to it

Let me show you

let name = "Bro";
name = "BRO"

Now if you will run this it will update the value of the name variable from BRO to Bro

Hoisting of let

The Hoisting of let is on the top as of var but whereas the var is declared and initialized with the value of undefined that’s not the case with let it will be there but if you will not assign a value you will get a reference error

Const

As its name suggests it means for something constant

Const is used to declare those variables which are going to be constant during the execution of the program means the default value of some variable

Const is block scoped

As like let the const is also block-scoped means the value of the const variable will imply its powers in a specific block

Const is constant it can’t be updated or redeclared

As i already stated that const is constant none of its value can change during program execution

Let’s See an example that what will not work :} :}

const name = "Bro";
const name = "BRO"

Now if you run this it will not work and will throw an error even

Yeah because you declared it with a const variable and const variable means you can’t change the value

Const is basically used to declare the values which you don’t want to change

if we look at Use cases of const

There are a ton of uses cases of const whenever you are performing a calculation with maths

Declaring a constant variable like the value of pi or gravity or declaring a username for the user which you don’t want the user to change like in Fiverr

Yeah but the case is different with objects, yeah you guessed it right

Actually, if you declare an object with const things change a little bit

Objects with Const is different

Actually if you declare an object with const like this :

const newObj = {
	name:"Harry",
	username :"harry_potter",
	working:"Wizard"
}

As when you run this code it will declare a new object with the name of newObj with these properties and values

Now if you want you to change the value of any property in this than the process is quite simple as you do normally on the basis with an object declared with var

const newObj = {
	name:"Harry",
	username :"harry_potter",
	working:"Wizard"
}

newObj.working = ["Wizard","Hero Of the Movie"]

Now if you run this the property of working will now have 2 values inside an array if you are confused with adding an array in an object than you can look it Here

Wrapping Up

So Now Maybe you have a proper understanding that how things work when to use what when to use var when to use let and if you have any more queries left you to know that comment section is always yours and if you have suggestions for me as well i would like to read them as well