What is Var, Let, and Const?

The holy trinity of javascript variables. Let’s see how different they are and how they can be used in different scenarios.

Photo by Gabriel Heinzer on Unsplash

What are variables?

Variables are basically containers that store the data or values. All javascript variables must have unique names which are also called identifiers.

Here are some general rules in naming a variable:

• Can contain letters, digits, underscores, and dollar signs.
• Must begin with a letter.
• Can begin with _ and $.
• They are case sensitive (a and A are different variables).
• Some reserved javascript keywords cannot be variable names.

Var

The var statement is used to declare a variable that is either function scoped or globally scoped. It can be both declared and initialized.

Let’s take a look at an example:

var message; //Declaration 
message="Hello World";
var number=51; //Initialization
console.log(message); //Hello World
console.log(number); //51

Scope of var

Scope essentially means the visibility or availability of a variable inside a function or program. Var declarations are either globally scoped or function/locally scoped.

When var variable is declared outside a function, then it is globally scoped. It means that is globally scoped can be accessed in the whole program.

When var variable is declared inside a function, then it is functionally scoped. It means that it can be accessed only within that function.

Let’s take a look at an example:

var message="Hello World";
function newFunction() {
        var number = 51;
    }

Here, message is globally scoped because it is declared outside the function and number is function scoped. Let’s take a look at the code below.

var message="Hello World";
function newFunction() {
        var number = 51;
    }
console.log(number); //error: number is not defined

Here we get an error because the variable number cannot be accessed outside the function as it is function scoped.

Hoising of var

What is hoisting?

Hoisting is a procedure where the variables and the function declarations are moved to the top of their execution during code compilation.

In the below code:

console.log(message); //message is undefined
var message="Hello World";

It is interpreted as the following during compilation:

var message;
console.log(message); //message is undefined
var message="Hello World";

All var variables are hoisted to the top of their respective scopes during compilation. They are also initialized to the value of undefined.

Let

Using let, we can declare a variable that is block scoped. A block is a bunch of code that is enclosed inside {}.

Scope of let

A variable that is declared with let is only available within the block. Additionally, let can be used initialized as well.

Let’s take a look at an example:

let message="Hello World";
if (true) {
        let number = 51;
    }
console.log(number); //ReferenceError: number is not defined

Here we get an error because the let variable is block scoped and the variable number cannot be accessed outside its scope.

Let can be updated but not re-declared

Similar to var, a variable declared with let can be updated within its scope. But let variables cannot be re-declared.

let message="Hello World";
message="Hello";
console.log(message);

But the following code will return an error:

let message="Hello World";
let message="Hello"; //SyntaxError: Identifier 'message' has already been declared

But if the variable is defined in different scopes, it won’t produce an error.

let message="Hello World";
if (true){
    let message="Inside Block"
    console.log(message) // Inside Block
}
console.log(message) //Hello World

Here no error is produced because, both the instances of message are treated as different as they have different scopes associated with them.

Since let is block-scoped, it is possible to re-use variable names which are declared outside its scope without the fear of it changing or throwing an error. These are some of the obvious advantages of using let.

Hoisting of let

Similar to var, let declarations are hoisted to the top of their respective scopes during the time of compilation. But the only difference is that the var is initialized with undefined but let is not. If a let variable is accessed before it is declared it throws a ReferenceError.

console.log(message); //ReferenceError
let message="I'm Let"; 

Here, the message variable gets hoisted to the top of the scope and it gets declared. But it is not initialized and hence we get a ReferenceError.

Const

Variables declared with const are blocked-scoped and similar to that of let declarations. The value of const variable can't be changed and remains constant.

Scope of const

Similar to let, const declarations are block-scoped and can be accessed only within the block in which they are declared.

const message="Hello World";
if (true) {
        const number = 51;
    }
console.log(number); //ReferenceError: number is not defined

Then what's the difference?

Const variables cannot be updated or re-declared

This means the value of const variable remains the same within its scope. Once declared, it cannot be updated or re-declared.

const message="Hello World";
message="Hello"; //TypeError: Assignment to constant variable.

Const variables cannot be updated

const message="Hello World";
const message="Hello"; //SyntaxError: Identifier 'message' has already been declared

Const variable cannot be re-declared

This also means that all const variables must be initialized when they are declared.

Hoisting of const

Hoisting of a const variable is similar to let. The declarations are hoisted to the top of their respective scopes and they are not initialized.

console.log(message); //ReferenceError
const message="I'm Const;

So in short

• var variables are globally or functionally scoped but let and const are both block scoped.
• var variables can be updated and re-declared within its scope. let variables can be updated but not re-declared. const variables can neither be updated nor re-declared.
• var, let, and const are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• Both var and let variables can be declared with being initialized, but const must be initialized when declared.

So these were some of the differences between var, let, and const. Hope you liked the content.

Thanks for the read.