VAR vs LET vs CONST in JavaScript | Everything that You Did Not Know

Difference between var, let and const in JavaScript is very important. A popular JavaScript Interview question. As a JavaScript developer, you will have to answer it in almost every JavaScript Interview.

- Difference between VAR, LET and CONST
Variable is used to store value in programming languages. It is declared with a unique name & then we assign it a value. VAR, LET & CONST are keywords, used to declare variable. Variable name is identifier & it has a value. We can declare a varaible in JavaScript by using one of three keywords e.g. var, let & const.

- What happens when you choose to use var, let or const to declare variable in JavaScript?
VAR has been there since the beginning of JavaScript. LET and CONST were introduced in es6 to overcome var limitations and to have more control over variables in JavaScript.

- Global Scope / Variable Scope
A variable declared with var is stored in global scope. let and const are not stored in global scope. They have local scope or block scope or function scope. Scope in JavaScript is a region where a variable can exist and be recognized by the JavaScript program. Three types of scopes are:

- Global Scope
- Block Scope
- Function Scope

Scope outside of block or function is global scope. Anything declared outside block or function has global scope. With JavaScript, the global scope is the JavaScript environment. In HTML, the global scope is the window object. Global variables defined with the var keyword belong to the window object:

If we declare three variables using var, let and const in global scope. Variable declared using VAR will attach itself to window object. If you assign a value to a variable that has not been declared using var, let or const keywords, it will also automatically become a GLOBAL variable. var has global scope but let and const don't have global scope.

- Block Scope
VAR doesn't have block scope. LET & CONST have block scope. let and const respect block scope limits but var don't. Outside block, variable declared with let is not available. Inside block after declaration, it is available. Inside block before declaration, it is also available. So before declaration, it is there but can not be used. Block scope identifies its presence at the top of block scope. LET is respecting block boundaries. So it has block scope. CONST has got exact behavior for block scope. let and const have block scope but var does not.

- Function Scope
var, let and const all have function scope. Outside function they are not available. Inside function, at the top they are recognized by function but can not be used. After function and above function, function call will output value from variable.

- Redeclaring / Reassigning variables
We have showed in video how do we declare a variable and assign values to that variable in JavaScript.

- Redeclaring Variable
var can be redeclared. let and const can not be redeclated. Redeclaring a JavaScript variable with var is allowed anywhere in a program. With let, redeclaring a variable in the same block or scope is NOT allowed. JavaScript const variables must be assigned a value when they are declared. With const, redeclaring a variable in the same block or scope is NOT allowed.

- Reassigning Variables
var and let can be reassigned. const can not be reassigned. The keyword const does not define a constant value. It defines a constant reference to a value. We can push properties in variable declared by using const. var can affect code inside and outside block. let and const have block scope, so inside block or function we can assign them different value and they will take it. Each function or block creates a new scope.

- Hoisting
Hoisting is JavaScript's behavior of moving all declarations to the top of the 'current scope'. Current scope means 'current script or the current function'. JavaScript only hoists declarations, not initializations. Variables defined with let and const are hoisted to the top of the block, but not initialized. Using a let variable before it is declared will result in a ReferenceError. In case of let and const, variable is in a "temporal dead zone" from the start of the block until it is declared. var is hoisted to global scope. let and const are not hoisted to global scope. With learning var, let, const difference, it is also important to know concepts of Hoisting, Scoping, Shadowing in JavaScript.

Video also covers following topics:
- Variable is used before assigned
- Can not find variable name
- Cannot access variable before initialization
- Block scoped variable used before it's declaration
- Variable is used before it's assigned

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#JavaScript #JS #var #let #const #hoisting #scope #variable #WebStylePress #programming

[vibheeshvelayudha]

Personally, i felt this was the only video where he explains intricately, well done, thank you!

[iqbal]

@24:30 you accessed global variable using window.wsp1
How can we access variables declared using let and const?
Let and const dont show up in window object and hance we cannot access them, but where do they go?
Thanks for the video.