In this post, we shall learn the difference between 'var' and 'let' keywords of JavaScript. WE shall learn what, why and when about let and var keywords and also const keyword of JavaScript.
Introduction
With the improvement being made in the JavaScript, new keywords have been introduced. In this article, we shall understand what, why and when about keywords such as 'let' and 'const' and will also understand the difference between 'var', 'let' and 'const' keywords.
All these three keywords are used to declare variables in JavaScript. Let's learn them one by one.
'var' keyword of JavaScript
A person knowing a little about JavaScript must be knowing the '
var' keyword. It is used to declare a variable in JavaScript like below.
var name = 'sheo';
var age = 25;
In below code snippet, we have declared a variable
name that has been used in
getName() function to return the
myName variable value.
function foo() {
var name = 'sheo';
return function getName() {
var myName = name + ' narayan';
return myName;
}
}
var getName = foo();
alert(getName());Scope of 'var' keyword in JavaScript
The scoping rule of var keyword in JavaScript is different in comparison with other programming languages such as C#, C++ etc.
In below code snippet, we can see that when the Test function is being called with 'true', the alert shows 'Sheo' even if the name variable has been declared inside the if block. If this would have other programming language, we might have got 'undefined variable error' as the name variable scope was limited to if block. However, JavaScript treats this differently and access the variable and value that was set in the if block.
But if the same Test function is called with 'false', as the variable has not been declared either in the function or within the if block, the in alert shows 'undefined'.
function Test(t)
{
if (t)
{
var name = 'Sheo';
}
return name;
}
alert(Test(true)); // shows Sheo;'
alert(Test(false)); // shows undefinedDemo urlWe get this behavior because var declarations are accessible withing their containing function, module, namespace or in global scope.
This type of variable scoping can cause a lot of confusion and is prone to error in big programs. Similar to this, there can be overwriting of the variables while working with nested loops like below
for (var i = 0; i < 3; i++) {
for (var i = 0; i < 2; i++) {
alert(i)
}
}Demo url
In the above code, we can see that the value of i is being overridden and this loop runs only twice.
All above examples are enough to understand that var keyword has some problem while working in big programs and even in small programs because of scoping and other flexible features of this keyword.
'let' keyword of JavaScript
To overcome the scoping issue and flexibility (for not good reason in some cases) that comes with 'var', 'let' keyword has been introduced. The way we declare variable with 'let' is same as 'var' however this is better managed in terms of scope.
let name = 'sheo';
let age = 25;
Scope of 'let' keyword in JavaScript
Unlike 'var' keyword, the 'let' keyword uses block-scoping ie. variable declared within block is accessible only within that block. Like in below function, fullName variable declared with 'let' keyword is not accessible outside the if block.
The first alert function shows 'sheo narayan' as alert but the second alert shows 'fullName' is undefined error in the debug window of the browser.
function getName(t) {
let name = 'sheo';
if (t) {
let fullName = name + ' narayan';
return fullName;
}
return fullName; // will throw error
}
alert(getName(true)); // shows 'sheo narayan'
alert(getName(false)); // 'fullName' is undefinedThe same applies to the try catch block of the JavaScript that is used to handle error.
try
{
}
catch (ex)
{
alert(ex); // works well
}
alert(ex); // throws error'let' with block-scoped and function-scoped variable
A let variable can be declared both in block-scoped and function-scoped. In below example, lastName is the parameter of Test function as well as it is also declared as separate variable inside the if block and both works perfectly alright.
function Test(t, lastName)
{
if (t)
{
let lastName = ' narayan'
return lastName;
}
return lastName;
}
alert(Test(true, '')); // shows narayan
alert(Test(false, 'Narayan')); // shows NarayanDemo url
Re-declarations of variables
'var' re-declaration
Re-declaring variable with var keyword refers to the same variable irrespective of how many times we have declared that variable.
var name = 'sheo';
var name = 'sheo';
function getName()
{
var name = 'sheo';
}'let' re-declaration
Re-declaring variable with let keyword stops us from doing so as it throws error
let name = 'sheo';
let name = 'narayan'; // error - Let/Const redeclaration
'const' keyword of JavaScript
In terms of scoping, const keyword is same as let however it's value can't be changed once it is assigned.
In below code snippet, we have declared myAge and person variable of type const. When we try to re-assign values, it throws error. However the const type object property value can be changed as shown below.
const myAge = 9;
const person = {
name: "Sheo",
age: myAge
}
alert(person.name + ' ' + person.age);
// Error
myAge = 10; // error
person = { // error
name: "Sheo Narayan",
age: myAge
};
// however the const object property value can be changed
person.name = "Narayan";
person.age = 60;
alert(person.name + ' ' + person.age);
Conclusion
In this article, we have seen different ways of declaring variable and their pros and cons. It is always recommended to use let keyword to declare variable so that the chances of confusion and value overriding and mistakes can be avoided.
Hope this article was informative, do let me know your comment or feedback. Thanks for reading.