Declare variables with var, let and const in JavaScript

Three ways to help you declare variables in JavaScript are using keywords var , let , const .

In this article, I will summarize the difference between these three declarations and how to use them.

Also familiarize yourself with scoped types such as local scoped , global scoped , block scoped , the concept of Temporal Dead Zone , and some common errors when working with these keywords such as SyntaxError , ReferenceError , TypeError

var and let

var

It is common to compare var and let first, since both are used to declare a mutable variable.

For example:

When declared with var , your variable will be hoisting before the value is assigned, i.e. this variable is defined just before the program executes, during the Memory Creation phase in the execution context.

If you are not sure, you can read the article “What happens when running a JS program” and the article “Hoisting in JavaScript”

Here the program will print the undefined value in line 1, and print out the number 1 in line 3

Besides, the variable declared with var will be in the global scoped , only when declared with var in the function will the scope be function scoped or local scoped .

This is why if you declare as above, you can use window.a or this.a (in this case window) to access a because it is in the global scope .

let

When declared with let, your variable is still hoisting, however the variable is stored in an area called the Temporal Dead Zone and made inaccessible prior to declaration.

For example:

here the program will get error ReferenceError can’t access b before it is initialized

And the variable declared with let will be in block scoped

The example variable b below is inside a block scoped of if with {} and cannot be used outside.

Another difference between var and let is the declaration of two variables with the same name or re-declaration . It is possible to declare two variables with the same name as var , but with let doing so will throw a Syntax Error and not allow the program to execute.

It is possible to declare two variables with the same name as var :

But with let will give an error Syntax Error and not allow the program to execute.

let, var and const

let and var allow declaring a variable without an initial value, while const only allows declaring a variable with an initial value.

For example:

If there is no initialization value for const you will get a SyntaxError .

Additionally, you can change the value of a variable declared with let or var , but you cannot change the value of a variable declared with const .

If you assign a value to a variable declared with const you will get a TypeError

Finally let and const are ES6 syntax.

How to use var, let, const

Knowing the differences, how will you use them?

const : use constant declaration, values ​​do not change throughout the program, and try to use as much as possible because it is strictest.

let : the next priority after const , try to use it whenever possible because let has a Temporal Dead Zone that you can’t access before declaration avoids undefined errors like when used with var

var : should not be used, minimized (understanding to read the code of programs written with ES5 )

So how to avoid ReferenceError when using let?

It is best to put all variable declarations and initializations at the top of the program, module, function, scope.

Then the variable will be declared before use to make sure you don’t access it before it is declared to avoid the above error.

Hope you understand and confidently declare the variable you need to use.

( Ref )

The original article is in my personal blog, please visit.