Difference Between Let, Const, and Var in Javascript

In this post, you will learn about let, const, var, and When to use these three keywords for declaring variables.

Contents

What are Let, Const, and Var in Javascript

Let and const are introduced in ES6 and var is the old way of declaring variables in Javascript.

We use let, const, and var for declaring variables and storing the values in the variable.

Suppose, if I need to declare a variable that stores a number 1000. I can do this using any of these three keywords.

let num = 1000;
var num = 1000;
const num = 1000;

Then, what is the difference between let, const, and var? and in which situation do we need to use these keywords for declaring a variable? let’s discuss.

Difference Between Let, Const, and Var in Javascript

Var

1. Var can be re-declared and we can also re-declare var within its scope. Let’s understand this using some examples.

Example:

function useVar() {
  var a = 10;
  var a = 20;
  console.log(a);
}

useVar();

Output:

In the above example, I have redeclared a variable with the value of 20. The output is 20. It is because javascript code compiles line by line one after the other. So, “a” will get the latest updated value.

But we can not do this same thing using the let keyword.

2. We can also update the variables in var within the scope.

You can update the variable globally and functionally. It means you can update the value of the variable in global scope or you can update a variable within a function.

You can do this same thing in let also but you can’t do the above point no. 1 example using the let keyword.

Example:

var company = "bmw";
company = "audi";
console.log(company);

Output: audi

In this example, I have updated the variable company with a new value and that is audi.

Now in the company variable, we have audi value. But remember, we can not update the values using const in the same scope.

3. Declarations made using var are functionally or globally scoped.

This means when you declare a variable using var in a function then that variable is available to access only in that particular function. You can not access that variable in some other function or globally.

We can access globally declared variables in a function.

Let’s understand using an example.

Example:

var val = 50;

function useVar() {
  var a = 10;
  console.log(val);
  console.log(a);
}

useVar();
console.log(a);

Output:

50
10
Uncaught ReferenceError: a is not defined

In the above code, variable val is globally scoped as it is declared outside the function and variable a which is declared inside function useVar() is functionally scoped.

We have accessed the global variable val inside the useVar() function.

But, when we try to access the value of “a” variable outside the function useVar() then it will give ReferenceError.

So, this is the meaning of functionally scoped. This means the value of variable “a” can be accessed within the function only.

4. In var declarations, initialization is not required. So, we can declare a variable without initializing any value to it.

var travel;

In this code, we have declared a variable “travel” without initializing any value to it. But in the case of const, we can not declare a variable without initialization.

5. Variables declared using var keyword are hoisted. You can navigate to Javascript topics to learn more about hoisting.

In simple terms, hoisting in javascript is a process in which variables and function declarations are moved to the top of their scope before the execution of the code.

Let’s understand using an example.

Example:

console.log(planet);
var planet = "earth";

Output:

undefined

In this code, we have defined variable planet after the console.log() but still, it is not throwing an error because in case of var variables are hoisted to the top of their scope and Javascript is considering this code like this:

var planet;
console.log(planet);
planet = "earth";

So, in this case, the var declaration is initialized with an undefined value.

Let

1. let can not be re-declared. Let’s understand this using some examples.

Example:

function useLet() {
  let a = 10;
  let a = 20;
  console.log(a);
}
useLet();

Output: Uncaught SyntaxError: Identifier 'a' has already been declared

We can’t declare two variables with similar names using the let keyword in the same scope. But you can declare the variables with the same name in different scopes. See the below code.

let a = 10;
function useLet() {
  let a = 20;
  console.log(a);
}
console.log(a);
useLet();

Output:

10
20

In this code, I have declared a variable with the name “a” two times but in different scopes.

2. We can update the value of the let declaration in our code.

let color = "green";
color = "blue";
console.log(color);

Output: blue

In this code, I have updated the color value from green to blue.

3. Declarations made using let are block scoped or globally scoped. Block scoped means any piece of code that we have written in { }.

Let’s consider an example.

let techCompany = "Google";

function carCompany() {
  let company = "Ford";
  console.log(company);
  console.log(techCompany);
}

carCompany();
console.log(company);

Output: Ford, Google, Uncaught ReferenceError: company is not defined

In the above code, variable techCompany is globally scoped as it is declared outside the function and variable company which is declared inside function carCompany() is block scoped.

We have accessed the global variable techCompany inside the carCompany() function.

But, when I try to access the value of the “company” variable outside the function carCompany() then it will give ReferenceError. It is because let is block scoped and the value can be accessed within its block only.

4. In let declarations, initialization is not required. So, we can declare a variable without initializing any value to it.

let travel;

In this code, we have declared a variable “travel” without initializing any value to it. But in the case of const, we can not declare a variable without initialization.

If you print the travel variable in the console then it will show undefined because we haven’t assigned any value to it.

5. Similar to var, let declarations are also hoisted but the difference is let declarations are not initialized whereas in var it is initialized with undefined.

Let’s see an example below.

console.log(travel);
let travel;

Output: Uncaught ReferenceError: Cannot access 'travel' before initialization

So in the above code, I have declared a variable using let. Now, if I try to access the variable travel before the declaration then it will throw an error.

Const

There are some similarities and differences in let and const.

1. Similar to let declarations, const can not be redeclared within its scope.

2. Similar to let declarations, Declarations made using const are block or globally scoped.

3. Unlike let declarations, In const declarations, initialization is required. So, we can not declare a variable without initializing any value to it.

Example:

const travel;

Output: Uncaught SyntaxError: Missing initializer in const declaration

4. Unlike let declarations, We can not update the const declaration in our code.

const value = 1500;
value = 1501;
console.log(value);

Output: Uncaught TypeError: Assignment to constant variable.

But when we declare objects using const then in this case, we can update the properties of the object. Let’s consider an example.

const asia = {
  country: "India",
  city: "delhi",
};
asia.city = "mumbai";

console.log(asia);

Output: {country: 'India', city: 'mumbai'}

In this code, I have updated the property city to mumbai.

5. Similar to let declarations, const declarations are also hoisted but the difference is const declarations are not initialized but in the case of var it is initialized with undefined.

Facebook X Reddit Pinterest LinkedIn