1. ES6 - florypaul/ReactJS GitHub Wiki

Reference - https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

Hoisting of var

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

This means that if we do this:

`console.log (greeter);`
`var greeter = "say hello"`

it is interpreted as this:

`var greeter;`
`console.log(greeter); // greeter is undefined`
`greeter = "say hello"`

Hoisting of let

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

var

var variables can be re-declared and updated
Scope essentially means where these variables are available for use. var declarations are globally scoped or function/locally scoped.
With hoisting the var variables are hoisted to the top of their scope and initialized with a value of undefined.
It becomes a problem when you do not realize that a variable greeter has already been defined before

let

let is block scoped A block is a chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block. So a variable declared in a block with let is only available for use within that block.

let greeting = "say Hi"; let times = 4;

if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined

let can be updated but not re-declared. Just like var, a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So while this will work:

let greeting = "say Hi"; greeting = "say Hello instead"; this will return 'say Hello instead' - let can be updated within its scope

let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
However, if the same variable is defined in different scopes, there will be no error:

let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi"
This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations
const declarations are block scoped Like let declarations, const declarations can only be accessed within the block they were declared.
const cannot be updated or re-declared This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. nor this:

const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared
While var and let can be declared without being initialized, const must be initialized during declaration.