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.
Table of Contents
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
.
Add comment