Differences between Javascript let vs var

Variables are used to store value, in Javascript, the variable can store different types of data like number, string, boolean, function, object, and other data types. In Javascript, we can declare variables using var, let, and const. To understand the difference between Javascript let vs var, we have to understand the variable scope.

Same as other programming languages, in Javascript, each variable has a scope, that determines the visibility and availability of a variable across applications.

In this tutorial, we’ll learn the difference between Javascript let vs var and their scope. Why we should avoid using var for declaring a variable and what is an alternative to the var keyword.

Javascript let vs var

In Javascript, we have different ways of declaring and creating variables.

1. var: Old days for declaring function-level scope.
2. let: Is like a successor to var with block-level scope.
3. const: For declaring a constant variable with block-level scope.

Before ES6, in JavaScript, there was one way to declare a variable and, that is using the var keyword. In ES6, two additional ways to declare variables: let and const.

Block-scope: We can define block scope in JavaScript using curly braces ({}). A pair of curly braces can be placed anywhere in the code to define a scope block. We have used it many times, like for loop, while loop, if and else condition functions, class and any other curly brace pairs will have their own block scope. Variable declare with let and const have block-level scope.

Function-scope: Any variables declared with var and declare within a function are visible anywhere within that same function. It is not declared within any function, then we can access it at any level in the program is called the Global variable.

If a variable is declared with Javascript var vs let global, then we can access it from anywhere. If the let variable is not within in curly brace, then it is a global variable.

With ES2015, the language specification introduced the let and const keywords, which are lexically (block) scoped.

Lexical scope is sometimes called block scope. Variables defined between a set of braces are limited to the scope of those braces. Therefore, the scope of variables can be limited to looping and flow logic constructs. Javascript allows us to define lexical scope using the let and const keywords.

Example of Javascript let vs var

Let’s demonstrate, where we can and can’t use it.

1. The var, the variable can be used before it is declared and using the let variable before its declaration will show an error as below. As we can see that varNum has an output of 10, even a value is assigned after it is used.

2. The var can access from the window object, but this is not in the case of the let variable.

3. We can’t reassign the let variable value again, doing it will make the variable value undefined, but the var variable can be reassigned multiple times and its value will be the last assigned value.

Why the let is preferred over the var keyword

As we had learned that let has the block-level scope, that is inside the curly brace of any statement, eg { let num = 2; }. Block scope is limited to a particular scope of the block and accessing it outside its block scope, will show an error. This adds more cohesion and less coupling, which is needed to reduce the side effect.

Variable declared with var have the function scope, meaning they can be accessed anywhere in their containing function. Now, the Question comes, javascript when to use var vs let. The let has many advantages over var, so it provides all features of var with block-scope. Thus, whenever possible use either let or const and don’t use var at all which is not needed for all cases.

JavaScript allows us to declare a variable without using the var keyword, which is a bad practice. Worse, if we declare a variable without using var, JavaScript creates the variable in the global scope, as shown in the following listing.

let firstname = 'Chris';
getFullName = () => {
   lastName = 'Rock'; 
   fullName = firstname + ' ' + lastName; 
};

getFullName()
console.log(firstname + lastName); 
console.log(fullName);

-------------------------- Output  -----------------
ChrisRock
Chris Rock

Note: The variable lastName and fullName are both defined in the global scope by implication, as we declare variables without scope.

Now the same example is declared with the var keyword in the function and accessing it outside will generate an undefined error. As var is functional level scope.

let firstname = 'Chris';
var lastName;
getFullName = () => {
   var lastName = 'Rock'; 
   var fullname = firstname + ' ' + lastName; 
};

getFullName()
console.log(firstname + lastName); 
console.log(fullname);

----------------- Output  -----------------

Chrisundefined

HelloWorld.js:10
console.log(fullname);

Conclusion
We learned about the variable declaration, don’t use var, let, and const to provide better and more features. Both let and const are replacements and successors of var, and const variable declaration is just like let but immutable.

Related Articles

• JavaScript Functional Programming and its principle.
• Javascript array object: how to use it Methods?
• Javascript String replace using replace() Method