What’s the Difference Between Var, Let, and Const?

What’s the Difference Between Var, Let, and Const?

Before understanding the difference between var, let and const, we need to understand the scope better, so we will first learn about the scope, then we will start discussing the difference between var, let and const.

What is Scope?

Scope determines the visibility or accessibility of your code, a variable or other resource. That is, how much right or not to use any resource from any place. This means that in order to gain access to any resource in javascritp code, the resouce must be in a specific field (limited to a specific part).

Global Scope

JavaScript documents have only one global scope. The field outside of all functions is considered as global scope. Variables defined within the global scope can be accessed and modified from another scope.

var name = 'Shayaike';

console.log(name); // logs 'Shayaike'

function logName() {

console.log(name); // 'name' is accessible here and everywhere else

}

logName(); // logs 'Shayaike'

Here, the name variable is included in the global scope. Because the variable is not included in any function. And we can easily access the name variable from any other function. And we can change if we want. But keep in mind, the change will be limited to that function only.

var name = 'Shayaike';

console.log(name); // logs 'Shayaike'

function logName() {

console.log(name); // 'name' is accessible here and everywhere else

name = 'Twinkle' ; // name is changed to 'Twinkle'

}

logName();

console.log(name) // logs 'Shayaike'

Although the name variable has been changed from the logName function, it has not changed in the global scope. That change will only take effect within the logName function.

Local Scope

Variables defined within a function are called local scope. And have a separate scope for calling their internal function. This means that we can only access internal functions or variables of global scope from that function.

//global scope

function foo1(){

var abc = 'shayaike'; // variable declare in local scope

function foo2(){ // function declare in local scope

var xyz = 'twinkle'

console.log(abc); // logs 'shayaike'

}

foo2();

//console.log(xyz) // xyz is not defined

}

foo1();

//foo2(); // foo2 is not defined

After declaring the foo1 function, foo1 created a local scope for itself. foo1 has a function and a variable declared. This variable or function can only be accessed from within foo1. When foo2 is declared again, another local scope is created. That is why the xyz variable could not be accessed from any other scope.

Here then we can use variables of the same name in different functions. Because these variables are bound to their respective functions, each of them has different scopes and these scopes are not accessible to other functions.

//global scope

var xyz = 'Hm Nayem'

//global scope

function foo1(){

//local scope 1

var xyz = 'shayaike';

//local scope 1

function foo2(){

//local scope 2

var xyz = 'twinkle'

console.log(xyz) // logs 'twinkle'

}

console.log(xyz) // logs 'shayaike'

}

console.log(xyz) // logs 'hm Nayem'

We can see that even though the name of the variable is the same, xyz is showing different result only because the scope is different.

Local scope can be divided into two parts, function scope and block scope. Const and let together two new ways to declare a variable have been introduced in ECMA script 6 (ES6).

Function Scope

Function scope means that the parameters and variables defined in a function are visible everywhere inside the function. However, it is not visible outside the function.

function foo(){

var fruit ='apple';

console.log('inside function: ',fruit);

}

foo(); //inside function: apple

console.log(fruit); //error: fruit is not defined

Whenever you declare a variable in a function, only the variable in the function is visible. You cannot access it from outside the function. The var keyword is used for the variable declare for function scope accessibility.

Block Scope

Block Scope is the area between if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets???? in any place other than function, you will understand that it is a block or field. In ES6, the const and let keywords allow developers to declare a variable in the block scope, which means that these variables exist within the corresponding block. But keep in mind that it does not work in the function scope, that is, it does not bind to a specific block. Again, the var keyword variables used in the block scope can be accessed outside the block scope.

function foo(){

if(true){

var fruit1 = 'apple'; //exist in function scope

const fruit2 = 'banana'; //exist in block scope

let fruit3 = 'strawberry'; //exist in block scope

}

console.log(fruit1);

console.log(fruit2);

console.log(fruit3);

}

foo();

//result:

//apple

//error: fruit2 is not defined

//error: fruit3 is not defined

What’s the Difference Between Var, Let, and Const?

ES2015 (ES6) comes with lots of new features. And now, by 2020, it is assumed that many JavaScript developers are already familiar with these features and have begun to use them.

One of the new features of ES6 is let and const, which are used for variable declare. So now the question is, what is the difference between Let, and Const introduced in ES6 with Var used earlier? If you still do not understand this topic well then hopefully this article is for you.

In this article we will discuss var, let and const based on the use of scope and hoisting.

Var

We know the rules for declaring Var before the advent of ES6. First of all, before we start discussing these issues, let's get a better understanding of var.

Use of var

As we already know, Scope is basically the variables where available for use. Var is declared global scope or function / local scoped. However, it is not mandatory to use var keyword. You can use let or const as required. Because let, const or var do not make any difference in functional scope.

To better understand, see the example below.

var greeter = "hey hi";

function newFunction() {

var hello = "hello";

}

Here "greeter" is the global scope because the greeter variable is declared outside the function and "hello" is the function scope because the hello variable is declared inside the function.

So if we do this:

var tester = "hey hi";

function newFunction() {

var hello = "hello";

}

console.log(hello); // error: hello is not defined

Here we get an error because the "hello" variable has function scope here and as a result the "hello" variable cannot be used from outside the function.

Difference between var and const

Using var, we can re-declare a previously declared variable or update the value of the variable if it is within the same scope and no error is found.

var greeter = "hey hi";

var greeter = "say Hello instead";

And in this way we can update the value:

var greeter = "hey hi";

greeter = "say Hello instead";

We can never do the same thing using const keyword. In case of variable declare

const greeter = "hey hi";

const greeter = "say Hello instead"; //SyntaxError: Identifier 'abc'

//has already been declared

Again in case of variable update

const greeter = "hey hi";

greeter = "say Hello instead"; //TypeError: Assignment to constant variable.

var and const making the difference in the above case. Let and const will make the same difference.

Hosting of var

Hosting is a mechanism of JavaScript that allows the declared variable to move above the scope before code execution. If we do this:

console.log (greeter);

var greeter = "say hello"

This code will be interpreted as follows:

console.log(greeter); // greeter is undefined

var greeter = "say hello"

The variables declared by var go above the scope before the code is executed and its value will be undefined when executed.

If we used the let keyword in the code above

console.log(greeter); // ReferenceError: Cannot access 'greet' before initialization

let greeter = "say hello"

Keep in mind that hoising is not effective for let. And even if we use const, the compiler will show us the same error.

console.log(greeter); // ReferenceError: Cannot access 'greet' before initialization

const greeter = "say hello"

Problem with var

"var" has one weakness which I will illustrate with the following example:

var greeter = "hey hi";

var times = 4;

if (times>3. {

var greeter = "say Hello instead";

}

console.log(greeter) // "say Hello instead"

If "times> 3" is true then "greeter" will be redefined and "say Hello instead" will result. There is no problem as long as we are knowingly redefining "greeter" which means I know that I have defined a variable called "greeter" once before. The only problem is when I don't know that there is a variable called "greeter" defined before.

If a variable called "greeter" is defined elsewhere in our code, we will have problems with it and there will be many bugs in our code. Let is important to solve this problem.

Solving this problem with let

We can solve the above problem by using let keyword

let greeter = 'hey hi';

var times = 4;

if (times>3. {

let greeter = 'say Hello instead';

}

console.log(greeter); // "say hi"

When we redefined the let keyword within the block scope, the greeter variable is new

The value is only valid in the if block. As a result, when we print greeter, it will show the value of global scope. And this is exactly why let keyword is important.

Thanks Stack School for helping to complete this article beautifully.