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

In JavaScript programming, you can declare the variables using three keywords: var, let, and const. So what is the difference between let, var, and const in JavaScript?

In this post, we will look at the differences between these keywords.

The basic difference between let, var, and const in JavaScript.

var	let	const
can redeclare a variable	can’t Redeclare	can’t Redeclare
can change variable	can Reassign	can’t Reassign
Function & Global Scope	have Block Scope	have Block Scope
hoisted to the top of their scope and initialized with a value of undefined	hoisted to the top but not initialized	hoisted to the top but not initialized

Also, Read the JavaScript rest operator and all types of loops in JavaScript.

The var keyword

When a var variable is declared outside of a function, its scope is global. This means that any variable declared with var outside of a function block is accessible globally(across the window).

When var is declared within a function, it is function scoped. This signifies that if you define variables within the function can only be available within the function.

var globalVar = "This value is global";

function newFunction() {

  var scopedVar = "This value is accessable inside of this function";
  console.log(scopedVar);
  console.log(globalVar);

}
 console.log(scopedVar); // gives an error

newFunction()

You may redefine and change variables of the var keyword.

You can change the var variables and redeclare as well. This will not result in an error.

Consider the following example, in which we are redeclaring the name variable.

var username = "John";
var username = "Doe";

Consider the following example, in which we are changing the name variable.

var username = "John";
username = "Doe";

When Should You Use the JavaScript var Keyword?

From 1995 to 2015, the var keyword was used in all JavaScript code. In 2015, the let and const keywords were added to JavaScript. You must use var if you want your code to run in earlier browsers.

The let keyword

The let keyword first appeared in ES6 (2015). The variables defined with let keyword cannot be redeclared. Declare the variables before using them. The variables using the keyword let have Block Scope.

You can change let variables but not you may not re-declare them.

let username = "John Doe";

let username = "Doe";

// SyntaxError: 'username' has already been declared

let username = "John Doe";

username = "Doe";

console.log(username); // output will be 'Doe'

The let keyword has block-level scope.

JavaScript had just Global Scope and Function Scope prior to ES6. let and const are two crucial new keywords introduced in ES6. In JavaScript, these two keywords offer Block Scope.

Variables specified within a block are not accessible from outside the block:

{
  let username = "John Doe";
}

// you may not use username here

The const keyword

The const keyword appears in ES6. You can not re-declare or re-assign variables with the const keyword. const declarations, which are similar to let declarations and they can only be accessible within the block in which they were declared.

It is not possible to reassign a const variable. This indicates that the value of a const-declared variable remains constant inside its scope.

You cannot change or declared it again. So, if we declare a variable using const, we cannot do either of the following:

const username = "John Doe";
const username = "Doe";  // Shows an error

const username = "John Doe";
username = "Doe";  // Uncaught TypeError: Assignment to constant variable

When should you use JavaScript const?

As a general guideline, unless you know the value will change, always declare a variable using const.