Introduction Variables are fundamental to many programming languages and are among the first and most essential concepts for novice coders to learn. There are a number of different properties of variables in JavaScript, as well as several rules which must be followed when naming them. In JavaScript, three keywords are used to declare a variable — var, let, and const — and each one affects how the code interprets the variable differently.

The var keyword is used in all JavaScript code from 1995 to 2015.

The let and const keywords were added to JavaScript in 2015.

What are Variables in Javascript?

Variables are containers for storing data (storing data values). Suppose you are shopping in a mall for some of your favorite items. You have a cart to put the items you want to buy in; this is your variable. You named it “your Cart”; this name you provided is an Identifier. You select and store everything you want in your cart. Anything you put inside your Cart is your data. You can add or remove your data anytime you wish.

This is similar to how we deal with variables in JavaScript. JavaScript variables can store any data value (e.g., a number, a string, etc.)

You need to know first this

there are some prerequisites you need to know first. They are variable declarations vs initialization, scope (specifically function scope), and hoisting.

Variable Declaration vs Initialization

A variable declaration introduces a new identifier.

var declaration

Above we create a new identifier called a declaration. in javascript, variables are initialized with undefined when they are created. This means if you log that variable you will get undefined.

console.log(declaration) // undefined

In contrast to variable declaration, variable initialization is when you first assign a value to a variable

declaration = 'This is an initialization'

So here we're initializing the declaration variable by assigning it to a string.

This leads us to our second concept, Scope.

scope

Scope defines where variables and functions are accessible inside of your program. In JavaScript, there are two kinds of scope - global scope, and function scope. According to the official spec,

Hoisting

Remember earlier we said that "In JavaScript, variables are initialized with the value of undefined when they are created.". Turns out, that's all that "Hoisting" is. The JavaScript interpreter will assign variable declarations a default value of undefined during what's called the "Memory Creation" phase. During the memory creation phase.

variables are assigned with undefined.
functions are assigned with the whole code.

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope, prior to execution of the code. Hoisting allows functions to be safely used in code before they are declared.

Now let's move toward our main topic

In this article, we'll discuss var, let, and const with respect to their scope, use, and hoisting. As you read, take note of the differences between them that I'll point out.

Var

First, let's get to understand var more

Scope of var

Scope essentially means where these variables are available for use. var declarations are globally scoped or function/locally scoped.

The scope is global when a var variable is declared outside a function. This means that any variable that is declared with var outside a function block is available for use in the whole window.

var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.

To understand further, look at the example below.

  var prajwal= "hey hi";

    function newFunction() {
        var hello = "hello";
    }

Here, prajwal is globally scoped because it exists outside a function while hello is function scoped. So we cannot access the variable hello outside of a function. So if we do this:

var prajwal= "hey hi";

    function newFunction() {
        var hello = "hello";
    }
console.log(hello); // error: hello is not defined

We'll get an error that is a result of hello not being available outside the function.

var variables can be re-declared and updated

This means that we can do this within the same scope and won't get an error.

var name="prajwal";
var name="Zingare";

Hoisting of var

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

So var variables are hoisted to the top of their scope and initialized with a value of undefined.

Var Problems

Now you will wonder what is the problem with var that they invent let and const

Here is the answer to your question

var a = "prajwal";
var test = 4;
if (test > 2) {
  var a = "zingare";
}
console.log(a);

So, since test > 2 returns true, a is redefined to "zingare". While this is not a problem if you knowingly want a to be redefined, it becomes a problem when you do not realize that a variable a has already been defined before.

If you have used a in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code.

This is why let and const are necessary.

Conclusion

I explain hear the all phenomenon of scope, hoisting in javascript, what is the problem with the var variable, and why let and const get invented. I hope that this article is useful to you, to help understand the topic better. If you have any questions, you can leave them in the comments section below.

Happy Coding.

ByBy