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.

letvar
Variables declared using the let keyword are block-level scoped.Variables declared using the var keyword are function level scoped.
Redeclaring the let variable again with the same variable name will show an error. We can redeclare var with the same variable name again and again.
The let variables are more predictable, because of the block-scoped.If we didn’t use careful with var variables, it may lead to bugs.
Using let variable before is declare show errors likes, ReferenceError: Cannot access ‘letNum’ before initializationThe var variable can be used before it is declared, we have to be careful to not use that variable before it has been assigned a value.
Variable with let declaration can’t access from window object.Variable declare with var can access from window object like this.
var num =10;
console.log(window.num) //10
Javascript let vs var

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.
javascript let vs var example 1

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

Javascript let vs var example 2

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.

javascript let vs var example

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

Spread the love

Leave a Comment

Your email address will not be published.

Scroll to Top