Difference between var, let, and const in JavaScript? Example Tutorial

Hello guys, if you want to understand the difference between var, let, and const in JavaScript then you have come to the right place. Earlier, I have shared the best books and JavaScript courses for beginners and in this article, I will tell you the difference between varlet, and const and when to use them. They are three different ways to declare variables in JavaScript. The var is the classic and old way to declare variables in Javascript and it can declare both local and global variables, while let and const are new ways to declare variables in Java and they have block scope, I mean they are only visible in the block they are declared. let is used to declare local variables while const is generally used to declare constants, I mean variable whose value doesn't change once initialized. 

JavaScript came out in the mid-90s and since then, it has come a long way. It was never meant to be what it is today. It was created in just 10 days. So obviously it had many flaws. Over the years, old features of the language have been removed or updated while new ones are added from time to time.

The major changes in JavaScript were made in the year 2015 when the sixth edition of the ECMA-262 standard came out. It was known as ES2015 or ES6. This version added major features to the language while updated the older ones. 

ES6 added two new keywords - let and const - for declaring variables. This simple yet powerful new feature is very useful in modern programming. But JavaScript already has the var keyword for declaring variables. 

The introduction of let and const did not remove the var keyword from JavaScript. All three can be used but all of them are different. In this article, we will discuss what is the difference between these three keywords. 





Scope of var, let, and const variables in JavaScript

The scope is the major difference between these three keywords. Before discussing the difference, let's understand what scope actually is.

Whenever a variable is declared, it is assigned a scope. The scope will be the "area" where the variable can be accessed or used. In simple terms, the scope defines the availability of the variable in the code. There are two types of scope in JavaScript - Global and Local. 

What is the difference between var, let, and const in JavaScript? Example Tutorial


1. Scope of var

A variable declared with var can have global or local scope, depending on where it is declared. If a variable is declared outside the function, then it has a global scope. This means the variable can be accessed anywhere in the window. The scope changes when the variable is declared using var inside a function. Now, the variable can only be accessed inside the function, not outside it. 

Observe the following example:

var sayHi = "Hi...";

function demo() {	
  console.log(sayHi + "inside the function");
}

console.log(sayHi + "outside the function")
 
demo();

In the above code, "sayHi" is declared outside the function. So it has a global scope. It is accessed inside as well as outside the function. When the code is executed, the output is:

"Hi...outside the function"
"Hi...inside the function"

Because of its global scope, "sayHi" is accessible inside as well as outside the function. Now observe the following code.

function demo() {

  var sayHi = "Hi...";
	
  console.log(sayHi + "inside the function");
}
 
demo();

console.log(sayHi + "outside the function")

This time, "sayHi" is declared inside the function. When the code is executed, the console statement inside the function works properly but it will throw an error when the console statement outside the function is encountered. It will throw the following error:


It happens because "sayHi" has a local scope. 

2. Scope of let and const

Both let and const has block scope. Block scope is the scope within the curly brackets. But when declared outside the curly brackets, the variables declared with let and const behave as the variables declared with the var keyword. 

Observe the following code:

if(true)
{	
  let sayHi = "Hi...";
	
  console.log(sayHi + "inside the block");
}

When the above code is executed, the output is: 

"Hi...inside the block"

Now, observe the following code.

if(true)
{	
  let sayHi = "Hi...";	
}

console.log(sayHi + "outside the block");

The above code will throw an error when executed because "sayHi" is accessed outside the block. Similarly, the variables declared with the const keyword have block scope.




2. Updating and re-declaring Variables

It's not necessary that a variable once declared with a value will not be updated again. Actually, in real practice, it is quite common to reassign a new value to an already declared variable. Similarly, re-declaring a variable is also possible. Let's see how varlet, and const are different in updating and re-declaring. 

2,1 Updating and re-declaring in var

Both updating and re-declaring are possible with variables declared with var keywords. Observe the following code. 

var sayHi = "Hi...";

sayHi = "Hi... How are you?";

In the above code, the variable "sayHi" is declared with a value. In the next line, it is updated with a new possible. The code will run without any error. Similarly, the following scenario is also possible. 

var sayHi = "Hi...";

var sayHi = "Hi... How are you?";

In the above code, "sayHi" is declared two times using the var keyword. 

2.2 Updating and re-declaring with let

Like var, variable declared with let can also be updated. Observe the following code.

let sayHi = "Hi...";

sayHi = "Hi... How are you?";

The above code will work but with let, re-declaring is not possible. 

let sayHi = "Hi...";

let sayHi = "Hi... How are you?";

The above code will throw an error. 

2.3 Updating and re-declaring with const

The variable declared with const cannot be updated. So the following code will not work. 

const sayHi = "Hi...";

sayHi = "Hi... How are you?";

The value of a variable declared with const cannot be changed. Moreover, the variables declared with const cannot be re-declared. 

const sayHi = "Hi...";

const sayHi = "Hi... How are you?";

The above code will throw an error. 


So the major difference between var, let, and const is the scope. While the var can have a global as well as functional scope (depending on the situation), the let and const have block scopes. Another difference is in updating the values and re-declaring the variables. 

The variables declared with var can be updated and re-declaring while variables declared with let can be updated but cannot be re-declared. In the case of const, the variable cannot be updated or re-declared. 


No comments :

Post a Comment