JavaScript Var vs Let

Differences Between JavaScript var vs Let

JavaScript is a scripting language that declares its variables in different types using keywords such as let, const or var. let and const have the same characteristics in terms of lexical scope. Lexical scope is defined as the visibility of the variables’ values across the defined or enclosed block, which holds valid values and can be accessed.

JavaScript lexical scoping is also called Static scoping or Closures which is a powerful concept. In JavaScript, var has no block scope; if declared in a class, it is visible to the entire scope from top to bottom, whereas let doesn’t allow its variable value to be accessed outside the enclosed block. ‘var’ declarations are processed when the function execution starts. This is similar to that of a concept called Hoisting (rising to the top) of the function.

The ‘let’ statement was introduced in the ECMAScript standard version 6, often called ES6 or ES 2015. ECMAScript is the organization for maintaining the standard global versions of JavaScript to maintain its adaptability across all the web browsers and its environment to make all the major internet giants be in line.

In JavaScript, suppose a variable is declared in conditional for() loop, then it is available as global and outside of this loop, whereas let will not allow this and confines the let declared variable to be accessed inside the for loop only. Re-declaring variable using let causes Syntax Error during the compilation process.

Head to Head Comparison Between JavaScript Var and Let (Infographics)

Below are the Top 8 comparisons between JavaScript Var and Let:

Key Differences between JavaScript Var vs Let

Let us discuss some of the major differences between JavaScript Var and Let:

1. A variable is the name of the storage for a value assigned to identify its location. In JavaScript, a variable can be declared using let or var. ‘var’ declaration scope is global irrespective of its declared scope or location, whereas the variable declared using let statement is block-scoped or enclosed scope.
2. In most of the older version code, var could be found for most of the variables declared in most of the JavaScript code. ‘var’ hoists the variable value to the entire scope, whereas the let statement will not hoist the value.
3. ‘var’ declaration was available since the beginning of JavaScript, and the let statement was recently introduced in the ES6 (ES 2015) version of JavaScript to enforce block scoping functionalities.
4. ‘var’ declared at any scope level becomes global whereas let scope is block-scoped where a block can be defined as code enclosed between flower braces { }.
5. ‘var’ declared variables in JavaScript initializes the default value of the variable to be undefined once it is declared in the scope, whereas let declared variables also loads the default value is undefined.
6. var does not have a lexical scope; instead, it has a global scope, whereas let has to block scope, which can be implicit or explicit based on the let statement’s placement. If let statement exists inside the block scope, then it becomes lexical scoping.
7. In the scope of windows object, var variables can be used, whereas let statement declared variables cannot be used in this scenario.
8. It is no safer to use the type of on the identifiers declared using the let statement, which the case is different for the var declared variables.
9. In terms of performance comparison, var is faster and let is slower inside the loops while running or executing the code.
10. Re-declaring var declared a variable in the same function or scope gives rise to Syntax Error whereas let declared variable cannot be redeclared.
11. The mistakes and confusion of value overriding inside the scope can be avoided by using let declared variable and is recommended to use wherever possible and not in all the cases.
12. In JavaScript, a variable using var can be declared as var a = 1; whereas a variable using let statement can be declared as: let a = 1; the only difference to be observed between the var and let in javascript is the scoping block and declaration or re-declaration.
13. The name of the variables declared has some limitations to be followed before declaring such that its name should start with only letters, digits, $ or _ signs. The statements var and let in javascript should also not be used as the name of the identifiers while declaring the variables.

Comparison Table Between JavaScript Var and Let

Following is the comparison table between JavaScript Var and Let.

Basis Of Comparisons	JavaScript Var	Let
Definition	Var is the old declaration method of variable	Let is recently introduced form of variable declaration
Usage	Mainly used to declare variables in JavaScript programs	Same as var but provides the additional functionality of enforcing the block scope accessibility
Declaration	It can be declared anywhere, and the variable is hoisted	Can be declared anywhere and confined to block scope
Accessibility	Global access	Block scope access or lexical scoping
Mode	In strict mode, var allows a variable to be re-declared in the same scope.	let does not allow the re-declaration of the same variable again
Browser Support	All browsers support var	Few browsers won’t support let statement
Hoisting	Global variables are hoisted	Block scoped variables are actually not hoisted
Compatibility	Supported by all browsers and JS runtime environments	Transpilers such as Babel can be used to convert it to older versions to provide support in all browsers

Conclusion

The usage of var in JavaScript has a lot of space to errors during the execution of code. The var declaration’s global scope causes a decrease in the usage of the same identifier across different locations in the same class or file. This reduces the reusability of the code. The declaration of a variable using var behaves similarly to that of let but with the only difference of lexical scope across the code.

The declaration of a variable using ‘let’ causes the variable to be accessed across the enclosed scope resulting in the identifier to be declared and used again outside the blocked statement or expression scope. Var can’t be replaced with let as it has its own usages across different scopes. Let should only be used where block scoping is of primary importance, and hoisting is not needed in the execution scope.

Recommended Articles

This has been a guide to the top differences between JavaScript Var vs Let. Here we discuss the key differences between the JavaScript Var vs Let with infographics and a comparison table. You may also have a look at the following articles to learn more –

1. Java vs Node JS
2. Python vs JavaScript
3. Java and JavaScript
4. HTML5 vs JavaScript