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

In ES6, we use var, let and const for variable declaration.

var name;
let email;
const age = “”;

In this article, we’ll try to identify the differences between var, let and const.

Var

The scope of a var variable is global which means the variables that are declared with var keyword outside a function block are available for use in the whole window.

var variables declared within a function are only available and can be accessed within that function.

Ex –

var greeting = “good morning”;
function newGreeting() {
var hello = “Hello”;
console.log(hello);
}
console.log(greeting); //good morning
newGreeting(); //hello
console.log(hello); //hello is not defined

var variables can be redeclared and updated.

Ex –

var greeting = “good morning”;
console.log(greeting); //good morning
var greeting = “Hello”;
console.log(greeting); //Hello
greeting = “Good Evening”;
console.log(greeting); //Good Evening

Let

let comes with improvements to var declaration. It solves the problem with var which is enabling the re-declaration of the same variable. This can be a problem if you do not realize that a variable has already been defined before with the same name.

Ex –

var greeting = “Good morning”;
var time = 14;
if (time > 12) {
var greeting = “Good afternoon”;
}
console.log(greeting); // Good afternoon

let is block-scoped, which is bounded by curly braces. The variable declared in a block with let keyword is only available within that block.

Ex –

let greeting = “Good morning”;
let time = 14;
if (time > 12) {
let newGreeting = “Good afternoon”;
console.log(newGreeting); //Good afternoon
}
console.log(newGreeting); //newGreeting is not defined

let can be updated but not re-declared. The let variables can be updated within its scope but they can not be re-declared within its scope.

Ex –

let greeting = “Good morning”; //Syntax error
greeting = “Good evening”;
let greeting = “Good night”; //Syntax error

If the same variable is defined in different scopes using let, there will be no errors because both instances are treated as different variables as they have different scopes.

Ex –

let greeting = “Good morning”;
if (true) {
let greeting = “Hello”;
console.log(greeting); //Hello
}
console.log(greeting); //Good morning

Const

Variables declared with const keyword maintain constant values which can not be updated or re-declared later.

Const declarations are block-scoped. They can only be accessed within the block where they were declared. The value of a const variable remains the same within its scope.

Ex –

const greeting = “Hello”;
greeting = “Good morning”; //invalid assignment to const ‘greeting’
const greeting = “Hello”; //SyntaxError
const greeting = “Good Morning”; //SyntaxError

Not only const variables but there are also objects declared with const too. The const object cannot be updated but the properties of the const object can be updated.

Ex –

const greeting = {
name: “Alex”,
message: “Hello”,
};
greeting.name = “Smith”;
console.log(greeting.name); //Smith

While var and let can be declared without being initialized, const must be initialized during declaration.

I hope you’ve learned something new from this article. Got any questions or additions? Please let me know. Thank you for reading.