Difference between var and let keywords in JavaScript

Sheonarayan
Posted by in JavaScript category on for Advance level | Points: 250 | Views : 1439 red flag
Rating: 5 out of 5  
 1 vote(s)

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.
Recommendation
Read Using jqLite and jQuery in AngularJS before this article.

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 undefined
Demo url

We 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 undefined

The 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 Narayan
Demo 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.


Recommendation
Read Single Page Application example download after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Nagarajasia on: 4/4/2016 | Points: 25
This is first time i heard about "Let" keyword in Javascript. Thank you.

Login to post response

Comment using Facebook(Author doesn't get notification)