"Get ready for an in-depth and engaging journey through var, let, and const in JavaScript! This comprehensive guide will cover everything from the basics to advanced topics such as scoping, hoisting, and execution context. So please sit back, gear up, and let's dive into the world of JavaScript variable declarations together!

Let's Start with the basics of var, let, and const in Javascript

What is a Variable?

In coding, a variable is a named storage location that holds a value. The value stored in a variable can be accessed, modified, and changed by the program as needed. Variables are used to store data that is used in a program, such as numbers, strings, arrays, and objects.

In JavaScript We have three ways of declaring variables: Var, let, and const.

var is the oldest way of declaring variables in JavaScript.

let is a newer way to declare variables in JavaScript, introduced in ECMAScript 6 (also known as ECMAScript 2015). It is similar to var in that, it declares a variable, but it has a few key differences (like scoping and hoisting).

const is another way to declare variables in JavaScript, also introduced in ECMAScript 6. It is similar to let subject to scoping and Hoisting.

Let's now study some key important key differences in var, let, and const

1. Scoping

In JavaScript, scoping refers to the visibility and accessibility of variables within a program. It determines where in the code a variable can be used and whether or not it can be modified.

To get a better understanding of scoping let's get some practical hands-on scoping of var, let, and const

• Variables declared with var are function-scoped, which means they are only visible within the function in which they are declared or the global scope if they are declared outside of a function.

In the above code, we can see that a is globally scoped, that's why we are able to console log it whereas b is inside the function, so it is in functional scope and cannot be used outside the function.

• We can reassign and redeclare var variables and can modify them.

• let, and const are block scoped which means they are only visible within the block of code in which they are declared. They cannot be redeclared.

• However, the main difference between let and const is that variables declared with const are read-only. This means that once a value is assigned to a const variable, it cannot be reassigned. Attempting to reassign a value to a const variable will result in a runtime error.

2. Variable Shadowing

In JavaScript, variable shadowing occurs when a variable declared within a certain scope has the same name as a variable declared in an outer scope. When this happens, the inner variable "shadows" the outer variable, meaning that within the inner scope, any reference to the variable refers to the inner variable, rather than the outer one. Here's an example:

In this example, the variable a is declared as a global variable and is set to 10. Within the variableShadowing function, a new variable named a is declared with the same name, but with a different value of 14.

Within the scope of the varaibleShadowing function, the inner variable ashadows the outer variable a. This means that when the code within the function references the variable a, it refers to the inner variable with a value of 13, not the outer variable with a value of 10. However, outside of the function, the outer variable a is still in scope and retains its original value of 10.

It's important to be aware of shadowing when working with nested scopes, as it can lead to confusion and unexpected behavior if you're not careful.

• You should also be aware that JavaScript also has a var keyword and this does not follow the same scoping rules as "let" and "const" variables, so in the past, developers were often facing unexpected results with this one.

ILLEGAL SHADOWING : Illegal variable shadowing in JavaScript occurs when a variable is declared with the same name as a variable in an outer scope, but the inner variable is declared with the const or let keyword.

this code will give an error

this is known as Illegal shadowing.

3. Hoisting

Before learning Hoisting in var, let, and const, it is important to know the execution of code in JavaScript. In this blog, I will talk about execution context in short, a detailed blog about execution context will be out soon.

JavaScript Execution Context

When JavaScript code is executed, Execution Context is created and it is called Global Execution Context.

This execution context is formed in 2 phases:-

1. Memory Creation Phase: This is where all the variables and functions are stored in the memory and all the variables are assigned an undefined placeholder. All the functions keep the entire function code.

2. Code Execution Block: This is where all the code is run one line at a time in a synchronous manner. All the assignments, calculations, and logical parts are executed here.

• Another thing about functions is that JavaScript ignores the function until it is invoked and when a function is invoked, a new temporary Execution Context is created especially for this function. It remains active until the function executes and is deleted after its work is done.

• A Function is invoked when it is called and it acts as another MINI PROGRAM and creates its Execution Context. We will learn more about How code is executed in a separate blog.

Now we can learn about Hoisting in Js.

In JavaScript, hoisting is a behavior where variable and function declarations are moved to the top of their scope, regardless of where they are defined in the code.

When JavaScript code is executed, the JavaScript engine first looks for variable and function declarations, and then "hoists" them to the top of their scope. This means that variables and functions can be used before they are declared

Here I am giving you some golden rules for understanding Hoisting in the easiest way:

1. var is hoisted and made available as undefined

   

2. let and const are also hoisted but differently than var. This means that they are moved to the top of their scope by the JavaScript engine, regardless of where they are defined in the code.

3. Unlike var, variables declared with let and const are not hoisted to the top of their scope. Instead, they are subject to the "temporal dead zone" (TDZ). The TDZ is a period of time during which a variable declared with let or const cannot be accessed. This period starts when the variable is declared and ends when the variable is initialized.

   

   Here, a is not defined and accessible until it is initialized on its declaration line.

4. Function hoisting is not in the scope of this blog but still for basic knowledge, Functions are also hoisted.

   

5. It's very important to note that function expressions (Arrow functions ) are not hoisted, which means that if a function is defined using the function operator, you cannot call the function before it is defined in the code.

   

Conclusion

In conclusion, var, let and const are three different ways of declaring variables in javascript. They all serve different purposes, var being function scoped and hoisted, let and const being block-scoped, and also having a temporal dead zone.