Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 21, 2022 11:28 am GMT

A Swiss Army Knife for JS Variables: Var or Let or Const?

Introduction

Yet another blog explaining Var, Let and Const but I promise this is the only one you need.

ECMASCRIPT2015, also known as ES6 introduced a lot of awesome features. One of the features was the addition of let and const for declaring variables. Previously developers used var for variable declaration, so what was the need of bringing new ones?

If you don't know what let and const brings to the table and how are they different from each other, this blog post is for you. I will compare them based on usage, scope, and hoisting.

Var

Before the introduction of ES6, the only way to define variables in JavaScript was to use the var keyword. For many years, it worked fine, however var differs from other programming languages in terms of variablescopingleading to unwanted bugs that are hard to track.

The below code example demonstrates the declaration of a variable with the var keyword:

var declaredWithVar = "welcome to the blog";console.log(declaredWithVar);  //welcome to the blog

Scope

The Scope refers to the present context of code, which decides the accessibility of the variables.
The scope is of two types Global and Local:

  • Variables that are declared outside of a block are known as Global variables.
  • Variables that are declared inside of a block are known as Local variables.

The variables declared with var are globally scoped when declared outside a function. Any variable declared with varoutside of a function block is accessibleacross the whole window.

var is a function scoped when it is declared within a function which means that it is accessible within that function only.

Look at the example below to understand further:

var globalScopedVar = "declared globally"function varScopeCheck(){  var scopingOfVarInFunc = "declared inside function"  console.log(scopingOfVarInFunc)}console.log(scopingOfVarInFunc) //Uncaught ReferenceError: scopingOfVarInFunc is not definedconsole.log(varScopeCheck()) //declared inside functionconsole.log(globalScopedVar) //declared globally

As you can see, we cannot access scopingOfVarInFunc outside of the function as the variable is locally scoped but we can access the globalScopedVar as it is globally scoped.

var can also be redeclared and updated.

This means the value of the variable can be updated by reinitializing and the variable declared with the var keyword can be declared again and again with the same or different values.

Look at the example below to understand further:

var declaredVar = "First time"var updatedVar = "Old value"var declaredVar = "Second time"updatedVar = "New value"console.log(declaredVar) // Second Timeconsole.log(updatedVar) // New value

Hoisting

Hoisting is the process by which the interpreter allocates memory for variable and function declarations prior to executing the code. This allows us to use a variable before it has been declared and initialized.

For example:

 console.log(hoistedVar); //undefined var hoistedVar = "I'll be hoisted"

why undefined? why not defined error?
varvariables are hoistedto the top of the scopeand initialized with the value undefined.

Problem with var

var nameUsingVar = "Michael"if(true){  var nameUsingVar = 'Mike instead'}console.log(nameUsingVar) // Mike instead

In the above code example, global scoped nameUsingVar is replaced by the block-scoped nameUsingVar and we get the unexcepted value. Well, it is not a problem if it's intentional but imagine managing your variables after 1000s of lines of code. This will become tricky to work with and cause a lot of bugs in your code.

That is why let and const were introduced and widely used.

Let

let came as an improvement over var by being block-scoped which solves the problem discussed above.

The below code example demonstrates the declaration of a variable with the let keyword:

let declaredWithLet = "I am preferred over var";console.log(declaredWithLet);  //I am preferred over var

Scope

Variables declared with let are block-scoped which means that a variable declared in a block with let is only available for use within that block. Variables declared outside blocks are global scoped.

Let's understand it with an example:

let globalScopedLet = "declared globally"function letScopeCheck(){  let scopingOfLetInFunc = "declared inside function"  console.log(scopingOfLetInFunc)}console.log(scopingOfLetInFunc) //Uncaught ReferenceError: scopingOfLetInFunc is not definedconsole.log(letScopeCheck()) //declared inside functionconsole.log(globalScopedLet) //declared globally

It solves the problem with var:

let nameUsingLet = 'Michael'if(true){    let nameUsingLet = 'Mike'}console.log(nameUsingLet) //Michael

As you can see, we get the expected output as it is block scoped.

let cannot be re-declared but can be updated within a scope block.

let nameUsingLet = 'Michael'let nameUsingLet = 'Mike'//SyntaxError: Identifier 'greeting' has already been declaredif(true){  /* This is a different scope, so redeclaration here is ok.*/    let nameUsingLet = 'Michel'    console.log(nameUsingLet) //Michel}console.log(nameUsingLet) //Michael

Hoisting

let declarations are hoisted but it's different from var.

console.log(variableUsingLet); // ReferenceError: Cannot access 'a' before initializationconsole.log(variableUsingVar); // prints undefined as expectedlet variableUsingLet = 10;console.log(variableUsingLet); // 10var variableUsingVar = 15;console.log(window.variableUsingLet); // undefinedconsole.log(window.variableUsingVar); // 15

It looks like let isn't hoisted, but it is, let's understand:
Both variableUsingLet and variableUsingVar are actually initialized as undefined in hoisting stage. But variableUsingVar is inside the storage space of GLOBAL, and variableUsingLet is in a separate memory object called script, where it can be accessed only after assigning some value to it first ie. one can access variableUsingLet only if it is assigned. Thus, it throws a ReferenceError.

Temporal Dead Zone: Time elapsed since the let variable was hoisted until it was initializedwith a value.

So any line till before "let variableUsingLet = 10" is the Temporal Dead Zone for variableUsingLet.
Since variableUsingLet is not accessible on global, it's not accessible in window/this also.
ReferenceError is thrown when variables are in the Temporal Dead Zone, SyntaxError doesn't even let us run a single line of code.

Finally, lets learn about const.

Const

Just like the name, const variables are constant, they cannot be redeclared or updated and if we try to do so, we will get an error.

With only var, the way to signify a constant variable was to write the variable name in all caps but it still could be updated and redeclared. const solves this problem along with var scoping problem.

const variableUsingConst = 10;variableUsingConst = 20;console.log(variableUsingConst)//TypeError: Assignment to constant variable.

Scope

It is also block-scoped and works similarly to let.

const nameUsingConst = 'Michael'if(true){    const nameUsingConst = 'Mike'}console.log(nameUsingConst) //Michael

Hoisting

It is similarly hoisted as let.

console.log(variableUsingConst); // ReferenceError: Cannot access 'variableUsingConst' before initializationconst variableUsingConst = 10;console.log(variableUsingConst); // 10

Conclusion

KeywordScopeUpdateableRedeclareableHoisted
varFunction scopeYesYesYes
letBlock scopeYesNoNo
constBlock scopeNoNoNo
  • Try using const wherever possible.
  • If not use let, Avoid var.
  • Declare and initialize all variables with let to the top to avoid errors and shrink the Temporal Dead Zone window to zero.

Original Link: https://dev.to/harshkc/a-swiss-army-knife-blog-for-js-variables-var-or-let-or-const-1cd1

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