In ES6, we can define variables using let and const keyword. These variables have similar syntax for variable declaration and initialization but differ in scope and usage. In TypeScript, there is always recommended to define a variable using let keyword because it provides the type safety.
let keyword is similar to var keyword in some respects, and const is an augmentation of let that prevents re-assignment to a variable.
We can declare a variable in one of the four ways:
1. Declare type and value in a single statement
2. Declare type without value. Then variable will be set to undefined.
3. Declare its value without type. Then variable will be set to any.
4. Declare without value and typ. Then variable will be set to any and initialized with undefined.
Let's understand all the three variable keywords one by one.
We can also declare a variable inside the function:
We can also access a variable of one function with the other function:
NOTE: Since var declarations are accessible anywhere within their containing module, function, global scope or namespace, some people call this var-scoping or function-scoping. Parameters are also called function scoped.
The let statement are written as same syntax as the var statement:
The key difference between var and let is not in the syntax, but it differs in the semantics. The Variable declared with the let keyword are scoped to the nearest enclosing block which can be smaller than a function block.
When the variable declared using the let keyword, it uses block scoping or lexical scoping. Unlike variable declared using var keyword whose scopes leak out to their containing function, block scoped variable not visible outside of its containing block.
Here, we have two local variables x and y. x's scope is limited to the body of f() while y's scope is limited to the containing if statement's block.
NOTE- The variables declared in a try catch clause also have similar scoping rules. For example:
Re-declaration and Shadowing
With var declaration, it did not matter how many time's we declared variables; we just got only one. In the below example, all declarations of x refer to the same x. This is perfectly valid. But there is some bug, which can be found by the let declaration.
Example without let keyword:
Example with let keyword:
Shadowing is the act of introducing a new name in a more nested scope. It declares an identifier that has already been declared in an outer scope. This is not incorrect, but there might be confusion, as well as it will make the outer identifier unavailable inside the loop where the loop variable is shadowing it. It can introduce certain bugs on its own in the event of accidental shadowing, while it is also preventing certain bugs.
The above example has a global variable name that shares the same name as the inner method. The inner variable will be used only in that function. Other functions will use the global variable declaration.
Shadowing usually avoided in writing of clearer code. While in some scenarios, if there may be fitting to take advantage of it, we should use it with the best judgment.
Hoisting of var
Note: Hoisting does not happen if we initialize the variable.
Hoisting of let
A variable declared with let keyword is not hoisted. If we try to use a let variable before it is declared, then it will result in a ReferenceError.
Note: According to the naming standards, the const variable must be declared in capital letters. Naming standards should be followed to maintain the code for the long run.
Value is: 10
What will happen when we try to re-assign the const variable?
If we try to re-assign the existing const variable in a code, the code will throw an error. So, we cannot re-assign any new value to an existing const variable.
SyntaxError: Identifier 'VAR' has already been declared.