The difference between using Let, Const and Var? Variables (let, const and var) differences

Introduction

Var, let, and const is the keyword to declare variables in javascript. Var variable is an old method to declare a variable in javascript. The var keyword is used in all JavaScript code from 1995 to 2015. In modern javascript, we use the let and const variable, which is introduced in the ES2015 (ES6) update; now, the let and const variable is used more frequently in modern javascript compared to the var variable.

To understand the main differences between Let, Const and Var. First you need to understand what they are and how they are used in JavaScript.

Declaration

Creating a variable in JavaScript is called "declaring" a variable.

example (declaring a variable):

var myChannelName;
// or :
let myChannelName;

// variable has no value (by default it is undefined).

After the declaration, the variable has no value (by default it is undefined).

Initialization

Initializing a variable means specifying an initial value to assign to it (i.e., before it is used at all).

example (initializing a variable):

myChannelName = "Sagar InspireMe";
/* You can also assign a value
    to the variable when you declare it.
*/

let myChannelName = "Sagar InspireMe";

Var

1. Re-Declaring JavaScript Variables

If you re-declare a JavaScript variable declared with var, it will not lose its value. But if you initialize it again with another some value, it's going to change the value and overwrite or replace the value being assigned to it, at last for that specific variable name.

Simply, It can be updated or re-declared.

example (redeclaring a variable):

var myChannelName = "Sagar InspireMe";
var myChannelName;
// we can do this with var

// we can also re-assign a value along with declaration.
var myChannelName = "Sagar Kalyan";

2. Scope:

When defined within a function - any var is restricted to that function. When defined outside of a function, a var is global.

3. Older version

It's an old way to declare a variable. We prefer not to use it if possible. If you want your code to run in older browser, you must use var.

4. Hoisting

Hoisting is JavaScript's default behavior of moving declarations to the top. It gets hoisted to the top of its scope and initialized undefined.

To demonstrate this behavior, have a look at the example:

// Example 1.
myName = "Sagar Kalyan"; 
// Assign string "Sagar Kalyan" to myName

name = document.getElementById("demo"); 
// Finds an element
name.innerHTML = myName;                     
// Display myName in the element

var myName; 
/* Declare myName in the last
It's Possible to do this..
No error occurs.. 
But incase of let and const
we cannot do this..
*/

// Example 2.
var myName; 
// First declaring myName with var

myName = "Sagar Kalyan"; 
// Assign string "Sagar Kalyan" to myName


name = document.getElementById("demo"); 
// Find an element
name.innerHTML = myName;                     
// Display myName in the element

Let

1. Cannot be Re-Declared

Variables defined with let cannot be redeclared.

2. Scope:

Variables defined with let have Block Scope.

Before ES6 (2015), JavaScript had only Global Scope and Function Scope.

ES6 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope in JavaScript.

Variables declared inside a { } block cannot be accessed from outside the block.

3. Modern JavaScript Variable:

The let keyword was introduced in ES6 (2015).

4. Hoisting

Variables defined with let are also hoisted to the top of the block, but not initialized.

Meaning: Using a let variable before or assigning it a value before, it is declared will result in a ReferenceError: