Understanding the Differences Between var, let, and const in JavaScript.

var

The var statement declares a variable and variables are containers for storing information. When code is run in the var tab, an error “a” is seen and it is not defined because var variables are only accessible in the function scope.
The var statement declares a function-scoped or globally-scoped variable and optionally initializing it to a value. The scope of a variable declared with var is its current execution context and closures thereof, which is either the enclosing function or functions declared within it, or, for variables declared outside any function, global.

An error will not be triggered if duplicate variable declarations are made using var, even in strict mode, and the variable will not lose its value, unless another assignment is performed.

One of the issues with using the var keyword was re-declaring a variable inside a block will also re-declare the variable outside the block.

var Usage and Hoisting

The var is a keyword that is used to declare a variables and the variables that are defined with var statement have function scope. A variable can be declared again even if it has been defined previously in the same scope.

Hoisting means that you can define a variable before its declaration.

In var, Hoisting is allowed and it is an ECMAScript1 feature. Its supported browsers are: Chrome, Internet Explorer, Microsoft Edge, Firefox, safari, opera

x = 60; 

console.log(x);

var x;

Output

//output
//60

let

let is a mathematical statement that was adopted by early programming languages like Scheme and Basic. let as used in formalized mathematics (especially the writing of proofs) indicates that the current instance of a variable exists only for the scope of that logical idea. In the following example, x immediately gains a new identity upon entering the new idea (usually these are concepts necessary to prove the main idea) and reverts immediately to the old x upon the conclusion of the sub-proof. Just as in coding, this is considered somewhat confusing and so is usually avoided by choosing a different name for the other variable. let allows one to declare variables that are limited to the scope of a block statement, or expression on which it is used, unlike the var keyword, which declares a variable globally, or locally to an entire function regardless of block scope. Let can only be accessed after its declaration is reached and for this reason, let declarations are commonly regarded as non-hoisted. let does not create properties of the window object when declared globally (in the top-most scope).

Many issues with let variables can be avoided by declaring them at the top of the scope in which they are used (doing so may impact readability). let begins declarations, not statements. That means you cannot use a lone let declaration as the body of a block (which makes sense, since there’s no way to access the variable). The let is a keyword that is used to declare a variable and the variables that are defined with let statement have block scope.

Hoisting

A variable cannot be defined more than once if it have been previously defined in the same scope.

Hoisting is not allowed with let and it is a feature of ES6. The supported browsers are -: Chrome49, Microsoft Edge12, firefox44, safari11, opera36

x = 8; 

console.log(x);

let x;

Output

//output
/usercode/index.js:1
x = 8; 
  ^

ReferenceError: x is not defined
    at Object.<anonymous> (/usercode/index.js:1:3)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

const

The const declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables. An initializer for a constant is required. You must specify its value in the same declaration. (This makes sense, given that it can’t be changed later.)

// Global Scope

const name = "Monique";

function sayHi() {
  console.log(`Hi ${name}`);
}

sayHi();
// Hi Monique

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable — just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object’s contents (e.g., its properties) can be altered.

Hoisting

All the considerations about the temporal dead zone apply to both let and const. For this reason, const declarations are commonly regarded as non-hoisted. A constant cannot share its name with a function or a variable in the same scope. Unlike var, const begins declarations, not statements. That means you cannot use a lone const declaration as the body of a block (which makes sense, since there’s no way to access the variable).

x = 8; 

console.log(x);

const x;

Output

/usercode/index.js:5
const x;
      ^

SyntaxError: Missing initializer in const declaration
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Reassign the value of var, let and const

To reassign a value is to reassign the value of a variable.

In var value can be reasign, in let value can be reassign but in const value can not be reassign.

Take a look at the code snippets below to understand this.

var

var v1 = 1;
v1 = 30;
console.log(v1);

//output 
// 30

let

let v1 = 1;
v1 = 40;
console.log(v1);

//output 
// 40

const

const v1 = 1;
v1 = 40;
console.log(v1);


//output
/usercode/index.js:3
v1 = 40;
   ^

TypeError: Assignment to constant variable.
    at Object.<anonymous> (/usercode/index.js:3:4)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstra

Reassign difference between var, let, and const keyword

Explanation:

• In the var and let tab, when you run the code, you see that there is no error and we can define new values to them.
• But in the const tab, when you run the code, you will get an error as a const variables value cannot be reassigned.

Summary

These are the 3 ways of declaring variables in JavaScript: using const, let, or var statements.

var variables behave almost as let variables. Also let variable value can be updated, however only the function body creates a scope for var variables and const variable cannot be reassigned.

Recommendation

For more guide on when to use var, let and const with examples well understood, visit the links below:

• FreeCodeCamp
• Dev Dreamer