Variable Declarations and Scoping in JavaScript

There are only three types of variable declaration inside JavaScript. These are
let, const and var declarations

Before we understand these declarations we need to know about scoping.Scoping simply answers the basic question, "Where is this variable name valid?". This can also be thought of where can I, access this variable from.

There are 2 types of scoping

Block Scoping

In this type of scoping, the variables are valid only to the nearest enclosing block and not outside it. They are essentially valid only from "{" to the "}". So we simply look for the innermost "{" in which the identifier is present. It is now valid until it's corresponding "}" is not encountered.

{
// Block Scope of a variable 
}

1{
   // Variables declared here are valid from 1  to 1' and even valid inside 2 to 2' as its enclosing block is 1'
    2{
        // Variables declared here valid only from 2 to 2'
    2'}
1'}

Lexical Scoping

Lexical scoping allows variables to be valid inside the whole function inside which they are declared and ignore all block level scoping. Here the variable once declared inside the function can be accessed inside any level of the function

function dev() 1{
// Lexically scoped variables, are valid from 1-1' 
1'}

function dev1() 1{
    2{
        // Lexically declared variable x
    2'}
    // x is valid here as it is lexically valid from 1-1' 
1'}

Now we understand scoping so we can discuss let, const and var in detail.

let and const are block level scoped and var is lexically scoped.

Difference between let and const

let is used to refer to variables that may change in the future.

const is used to declare a read-only reference to the value. A const statement does not allow re declaration or re-assignment of variables

Common confusion

Using const in objects makes a constant reference to the object, not the object constant. The object is still mutable

// This is valid JS as we are mutating the object, not the reference
const obj = {}
obj.key = "value"

// This is invalid JS, as we are mutating the reference itself
const obj1 = {}
obj1 = {"key": "value"}

Another common confusion is that var creates global variables, which is not entirely true.
var is used to create variables with lexical/functional scope, so var becomes a global variable only when it is declared outside any function

// variables declared here are globally scoped

function dev() {
// variables declared here are not globally scoped, and are restricted to the dev
}

To get a video tutorial on this concept,
https://www.youtube.com/watch?v=wtBbanu-kUY

References:
https://developer.mozilla.org/en-US/docs/Glossary/Scope
https://javascript.info/closure