By Chanchal Aidasani in Javascript Fundamentals — Sep 13, 2023

Javascript Mini Series: Let vs Const vs Var

Variables in Javascript are declared using the keywords var, let, and const. In Javascript, the var variable is an old way to declare a variable. In the new edition of Javascript, we use the let and const variable, which became delivered inside the ES2015 (ES6) replacement; now, the let and const variable is used more often in modern-day Javascript compared to the var variable.

Let, Const, and Var in Javascript

Javascript gives us a couple of approaches to declare a variable; however, which one should we use?

Suppose we created a function and we need a steady variable in the function, which means we need a variable to not be updated at all. If we can declare a var variable or let variable, then it may be updated; however, if we declare a const variable, it'll not be updated at all and will work nicely with our function.

What is the var variable in JS?

Var variable is the old way to declare a variable in Javascript; var variable has the function scope, but global scope while it's declared outside the function.

Example of a variable with function scope:

function myFun() {
  var myName = "my name";
  console.log(myName);
}
myFun(); //output => "my name"
console.log(myName); //output=> re

In the example above, we've got a function myFun(), and within the function, we declare a variable myName and print it at the console.

When we name the function, it effectively prints the variable myName on the console, but when we want to print the variable myName outside the function, it throws a ReferenceError because it's no longer reachable outside of the function.

When we declare a var variable outside the function, it will have a global scope and may have to apply everywhere inside the entire application.

What is the Let variable in JS?

The new version of Javascript (ES6) introduces two new techniques for declaring variables in Javascript, and one technique is the use of the “let” keyword to declare variables.

Here is an instance of a “let” variable declaration:

let myName = "my name";

In the instance above, we used the let keyword to declare a “let” variable and initialize a string called "my call". The “Let” variable introduces a unique function that does not “let” re-declaration of variables; in case you remember, re-declaration becomes a problem in the “var” variable; however, the “let” variable resolves this trouble.

Example of re-declaration in the let variable:

let myName = "my name";
let myName = "not my name";
console.log(myName); //output => SyntaxError: redeclaration of let name

The above instance shows the distinction between let, var, and const in Javascript. In the example above, we declared a variable myName and once more declared a variable with the equal call. While we attempted to print the variable on the console, it threw SyntaxError: redeclaration of “let” name.

What is the Const variable in JS?

The new edition of Javascript (ES6) introduces two new methods of declaring variables in Javascript, one of which is the use of the const keyword to declare constant variables.

const variable; Source: JavaScript in Plain English‌‌

Example of a const variable:

const myName = "my name";

Let variables introduce a unique function that allows variables to be constant. If you keep in mind that asserting a regular variable became a hassle in the var variable, however, the const variable solves this problem.

Let's see it in this example:

const myName = "my name";
myName = "not my name";
console.log(myName); //output => TypeError: invalid assignment to const 'myName'

The above example shows the distinction between let, var, and const in Javascript. In the instance above, we declared a variable myName and initialized a string cost of "myName", While we strive to replace myName, it throws a type error because we cannot update the cost of the const variable.

Difference Between Var, Let, and Const in Javascript

let vs var vs const; Source: Computer courses in Gurgaon

The following table summarizes the differences between let, var, and const in Javascript:

var	let	const
There is a function or a global scope for var.	The let has a block scope.	The const variable has a block scope.
It is hoisted to the top of its scope and has an undefined initialization.	It was also hoisted to the top of its scope but failed to initialize.	It was also hoisted to the top of its scope but failed to initialize.
It is possible to update or re-declare it.	It can only be updated, not re-declared.	It cannot be updated or re-declared.
It is an old method of declaring a variable.	It is a new variable declaration method introduced in ES6.	It is also a new variable declaration method introduced in ES6.
Can be declared without being initialized.	Can be declared without being initialized.	It cannot be declared without first being initialized.
It can be accessed without being initialized because its default value is "undefined."	Access is not possible without initialization, resulting in a reference error'.	It cannot be accessed without initialization, just as it cannot be declared without initialization.

Conclusion

In summary, "var" is an old way of declaring variables that are function-scoped and can be reassigned. "let" is a more recent manner of declaring variables; this is block-scoped and can be reassigned.

"const" is an even more recent manner of declaring variables; this is block-scoped and cannot be reassigned. In current Javascript, it's far more commonly advised to apply "let" and "const" instead of "var," as they provide higher scoping and make it less difficult to write maintainable code.

How much is a great User Experience worth to you?

Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.

Already have an account? Sign in.