Variable Scope in TypeScript : Global, Local & function

The variables have a scope or visibility. The scope of a variable determines which part of the program can access it. We can define a variable in three ways, so as to limit their visibility. One is the local variable or block variable, which has the scope of a code block (block scope or local scope). The second one is a function variable or class variable which has the function/class scope. The last one is the global variable, which can be accessed anywhere in the program (global scope).

The scopes are important. without scopes, the variables will be visible everywhere. This forces us to keep track of the names of all declared variables so that we do not accidentally reuse one. And if a variable has the wrong value, you have to scan the entire code base for the bug, because the value may have been altered by any statement.

Variable Scope

The Typescript variable can be in three scopes depending on how & where you have defined them.

  1. Global Scope
  2. Function Scope or Class Scope
  3. Local Scope or Block scope

Global Scope

Define the global variable outside of any function/ class or code block and they become part of the global scope. We can use them anywhere within the program.

The following example shows a variable, globalVar defined outside of any function or code block. You can access it anywhere in the code.

Function Scope

The function or class variables defined inside the function/class etc are function scoped. They are available to use anywhere within the function. You cannot use them outside the function.

In the following example, the variable fnVar is defined inside the someFn function. This makes it function scoped. You can access it from within the someFn. You can also, access it from the code block or nested function within the someFn

Nested function

The example below defines a fnNestedVar inside the nested function. We can access this variable only within the nested function and its nested functions and code blocks. But not from the parent function or anywhere outside the nested function.

Local scope or Block Scope

The local variables are declared inside a code block. They are also known by the name block variable

The code block is a section of source code clearly delimited using the curly braces. For example inside the if/try/catch/while/for block.

The example below shows a localVar declared inside the if condition. The scope of localVar ends where the curly braces of the if condition ends. Outside the code block, you cannot access it.

var is an exception

The keyword var is an exception to the above rule. var supports only global & function scope. So if you define a variable inside a code block, it is scoped to enclosing function and not to the code block.

That is the main reason why let exist. To bring the local scope to the Javascript. The let is part of the ES2015 or ES6 specification.

For Example, take the above example and change let to var. You can see that the localVar is not accessible outside the code block and also in the nested function.

Declaring the variable

There are three keywords, that you can use to declare a variable in Typescript. They are let, var or const keyword. The scoping rules differ between them.

The var supports function & global scopes as shown in the example above.

The let & const support all three scopes.

The following is demonstrates the use of all three scopes. The first example uses var to define and the second example uses let.

The var scope example

The let scope example

Example using for loop

In the following example, we use the var keyword to declare the variable i, which inside the code block. But since var is function scoped, we can access the i even outside the for loop. Hence it is accessible to the console.log, which is outside

Now change from var to let. The compiler emits an error TS2304: Cannot find name ‘i’.

Summary

The Typescript variables have three scopes. Global, Function and local. Using var you can create global & function variable. While We use let & const to all the three.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top