In this guide we are going to talk about how to use loops in typescript. Now earlier on in the course I implemented a very basic while loop and I'm going to recreate that right here and say var and X is going to be a type number and all start off by saying that it's going to be set to 0 and then I'm going to create a while loop and I'm going to say well X is less than 10. Then I just want to console log the value of x and then remember I have to increment this so that we don't run into an infinite loop. Now if I come back to the terminal. And run this code.

var x : number = 0;

while (x < 10) {
  console.log(x);
  x++;
}

You'll see that it prints out the values 0 through 9 so everything is working there. However this is not really the way that you're going to want to build a loop in in typescript much like Ruby and much more modern languages there are more advanced ways to perform iterating and looping and that's what we're going to talk about in this guide.

So I'm going to comment all of this out so that you have access to it but then show you a better way of doing this because there are times where you want a very dead simple loop like this while loop. However usually when you're looping over something you are going to be looping over some type of list or array or a data structure. So Typescript has two of these that are very powerful. One of them is for in. And then the other one is for of. And this is the first time I've ever worked in a language that has a for of loop. If you if you've come from another language that has something similar might be familiar. However if you're coming from Ruby or Python or language like that you're going to see a pretty significant difference between these two.

Both of these allow you to loop through. Arrays and lists and various data structures but they give some pretty different behavior. So I think it's important to set that up. So now I'm going to come above both of these and create an array. So I'm going to say let. And we're going to go to our baseball players array and here I'm going to say it's a number array and that's it. I want to put some things inside of it. So we're going to just give some player numbers here. And that is our array.

let players : number[] = [3, 10, 4, 5, 1];

FOR IN

Now for looping through this the syntax for it is for and then inside of this we have to declare a iterator variable. So if you're familiar with the Ruby syntax of development then this would be like declaring a block variable. But here it's an iterator variable and the way you declare that is by saying Let and then whatever variable name that you want to give. So here I'm going to say let player in, Players. So the way that this is, is players is the actual array that we have right here and player is the iterator variable and we're declaring it by saying Let and then Player in players. So now we pass in curly braces and this is going to loop over this set of items. So if I do console log here and simply pass in player. This all should work. So if I type tsc. And node 014_loops you can see that it prints out 0 1 2 3 and 4. Now you may be a little bit confused on this because technically here we didn't have those values. We have 3 10 4 5 and 1. So this is a very big difference between for in and for of I'm going to go all create this statement using for of so that you can see the difference here. And I am also going to place a console log just so we can separate these out. So say console log for of. And come up here and say for and just so we can easily see the difference.

Console.log(“For/In”);
for (let player in players) {
  console.log(player);
}

FOR OF

OK so now I have the syntax for a for of statement is for. And then this part's the same but instead of in I'm going to say of. And now if I come here clear. Compile the code. And now if I run this you'll see the difference the for in iterates and simply provides the index values for whatever collection we're going in. The for of statement on the other hand actually gives us the values. So that is a very important difference and it's a cool thing that typescript offers that a lot of languages don't offer it right out of the box so anytime that you want to grab. The actual values you're going to want to use a for of statement whenever you want to have the value of the index. That is when you're going to want to use a for in statement. So I definitely recommend for you to play around with these a little bit more because if you've never used this kind of syntax or this kind of looping mechanism before it might seem a little bit odd.

Console.log(“For/Of”);
for (let player of players) {
  console.log(player);
}

However I think once you actually get used to it you'll appreciate the ability to have two ways of doing this. And once we get into some of the more advanced components of the language you're going to be able to see how we can use these type of looping mechanisms in order to work with. Hash data structures and different things like that which is really what you're going to be doing when you're gonna be creating a real world application. So say that you get a json API that contains a full set of nested key value pairs for some type of database query you're going to be able to use these different looping mechanisms for iterating through grabbing the values and printing that out in the screen. So this is how to use three different types of looping tools in typescript.

Resources

• Source code