Typescript variable scope

In this lesson, we will cover a different type of variables and scopes.

1. Replace content of onStartup function:

onStartup(){
  function count(){
    for (var i = 0; i < 9; i++){
      console.log(i);
    }

    console.log('Counted: ' , i);
  }

  count();}
}  

2. And serve our application, what you will see?


Note that although our i variable was declared inside a for loop, it is accessible for console.log() function which is outside of for code block. Why?

This is because we have declared our variable as var. In JavaScript, all variables declared like that have scope to the nearest function, which in our case is count().


3. Let's change var, to let:

for (let i = 0; i < 10; i++){

Now scope of our variable is changed to local:


4. Let's have a look at the error which occurred in line 22 after we change the scope of our variable:


and if we save the file, we will see an error in the console during compilation:

ERROR in src/app/app.component.ts(22,31): error TS2304: Cannot find name 'i'.

Remember when we talked about compile-time errors? This is a beautiful example, compiler spots this error and informs us that we are trying to access a variable which isn't accessible within current scope before we even tried to run our code in a browser. Actually, thanks to Visual Studio we can see an error even before we request CLI to compile our project. The editor shows us errors in a real-time, that's a really awesome feature which will save you a lot of time.