var, let, and const JavaScript keywords: What are the Differences and Use Cases?

image source: Tutorial Republic

A lot of new features came out with JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6) which is the newer version of JavaScript that was introduced in 2015.

Some of the new feature addition includes the let and const keywords, which can be used for variable declaration.

The question is, what makes them different from var which a lot of developers have been using?

In JavaScript, the keyword var, let, and const is a bit confusing. So, in this article, we will look at the differences between these keywords with respect to their scope, use, and hoisting.

VAR

Variables declared with var are in the function scope.

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

function f1()
{
var num =10;
}
console.log(num)

when you will run the code above, you will see an error as num is not defined because var variables are only accessible in the function scope.

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.

var num = 2 //global scope
function f1()
{
var num =10; //function scope
}
console.log(num)

when you will run the code above, you will num is output as 2 because it will access and output the global var variables.

VAR variables can also be re-assigned/updated and redeclared

var v1 = 1;
v1 = 30;
console.log(v1);

When you run the code, you will see that there is no error because we can define new values for the var variables.

Challenges with using VAR

var greeter = "Good Morning";
var greet = 7;
if (greet > 4) {
var greeter = "Good Afternoon";
}
console.log(greeter) // "Good Afternoon"

So, since greet > 4 returns true, greeter is redefined to “Good Afternoon”. While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realize that a variable greeter has already been defined before.

If you have used greeter 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.

LET

let is now preferred for variable declaration because it comes as an improvement to var declarations.

It also solves the problem with var variables as let variables are in block scope.

A block is a chunk of code bounded by curly braces. Anything within curly braces is a block.

So a variable declared in a block with let is only available for use within that block

for (let i = 0; i < 3; i++) {
console.log(i);
}
console.log(i);

When you run the code, you will see an error as i is not defined because let variables are only accessible within the block they are declared.

let variables can also be re-assigned/updated but can’t be redeclared

let v1 = 1;
v1 = 30;
console.log(v1);

When you run the code, you will see that there is no error because we can define new values to the let variables.

let v1 = 1;
let v1 = 30;
console.log(v1);

when you run the code, you will get an error as let variables do not allow you to redeclare them again.

Const

Variables declared as const are in the block scope and maintain constant values.

const declarations share some similarities with let declarations.

{
const x = 2;
console.log(x);
}
console.log(x);

when you run the code, you will see that x was defined under the block that was accessible, but when you try to access x outside that block, you will get an error.

Const cannot be reassigned or re-declared

const v1 = 1;
const v1 = 30;
console.log(v1)

when you run the code, you will get an error as let variables do not allow you to redeclare them again.