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 successor to var with block level scope.
  3. const: For declaring 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 any where. If the let variable is not within in curly brace, then it is a global variable.

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

Example of Javascript let vs var

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

  1. In var variable can be used before it is declare and using let variable before it declaration will show error as below. As we can see that varNum has output 10, even value is assign after it 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 let variable value again, doing it will make the variable value undefined, but var variable can be reassigned multiple times and its value will be the last assign value.

javascript let vs var example

Why the let is preferred over var keyword

As we had learned that let has the block-level scope, that is inside 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 and is not needed for all cases.

We had learned about the variable declaration, don’t use var, let and const 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. Required fields are marked *

Scroll to Top