Execution flow: top to bottom
A TypeScript program starts at its first line and runs one statement at a time, moving down. This order is called the execution flow. A loop changes the flow in one specific way: when the program reaches a for loop, it runs the loop's body again and again, and only then moves on to the line after the loop.
Seeing which statements belong to the body is therefore the most important skill with loops, and TypeScript has a simple rule for it.
The braces decide what repeats
The statements between the curly braces { } that follow the loop header are the body. Everything inside runs once per pass. Everything after the closing brace runs once, when the loop is over. Indentation helps people read the code, but the compiler looks only at the braces.
Here, both console.log calls are inside the braces:
let languages: string[] = ["Python", "Java", "JavaScript"];
for (let language of languages) {
console.log("I love " + language);
console.log("I want to get better at it");
}
So both messages are printed for every language, alternating:
I love Python
I want to get better at it
I love Java
I want to get better at it
I love JavaScript
I want to get better at it
Move the second call below the closing brace and its meaning changes:
let languages: string[] = ["Python", "Java", "JavaScript"];
for (let language of languages) {
console.log("I love " + language);
}
console.log("I want to get better at them");
I love Python
I love Java
I love JavaScript
I want to get better at them
Now the loop prints three lines, and the last message appears once, after the final pass. Code before the loop runs once, before the first pass. The following program shows all three places:
let fruits: string[] = ["banana", "apple", "kiwi"];
console.log("I'm hungry!");
for (let fruit of fruits) {
console.log("I'm gonna eat:");
console.log(fruit);
}
console.log("I love my life!");
I'm hungry!
I'm gonna eat:
banana
I'm gonna eat:
apple
I'm gonna eat:
kiwi
I love my life!
The for...of loop
The loop used above has this shape:
for (let item of items) {
// body
}
On each pass, item holds the next element of items, from the first to the last. After the last element the loop ends by itself, so you never write a counter or a stopping condition. Declare the variable with let, or with const if the body never reassigns it.
of is not in
TypeScript also has for...in, and mixing the two up is a common slip. On an array, for...in gives the indexes, and they arrive as strings:
for (let index in languages) {
console.log(index);
}
0
1
2
To get the values Python, Java and JavaScript, use of.
The exercise
The editor starts with an array, an opening message and a closing message, and a gap between them:
let languages: string[] = ["Python", "Java", "JavaScript"];
console.log("Today we'll learn about:");
// Write the for loop below:
console.log("Let's code!");
The program has to print the opening line, then each language on its own line, then the closing line. Approach it in this order:
- Decide which statements repeat. Only the printing of a language does, so only that goes inside the braces.
- Write the header
for (let language of languages), so thatlanguageholds one entry per pass. - Put
console.log(language)in the body. - Leave
console.log("Let's code!")where it is, after the closing brace, so it runs once at the end.
The finished program:
let languages: string[] = ["Python", "Java", "JavaScript"];
console.log("Today we'll learn about:");
// Write the for loop below:
for (let language of languages) {
console.log(language);
}
console.log("Let's code!");
It prints the five lines Today we'll learn about:, Python, Java, JavaScript and Let's code!, in that order.
Common mistakes
- Putting the closing message inside the loop. It would print three times, after every language.
- Using
ininstead ofof. The program would print0,1and2instead of the names. - Using a different name in the body. The variable in
console.log(...)must be the one declared in the loop header. - Forgetting braces. Without them a loop's body is only the single statement that follows the header, and any lines you add after it belong to the flow outside the loop. Always use braces.
Key takeaways
- A program runs top to bottom, one statement at a time; a loop repeats its body before the flow continues.
- The braces mark the body. Inside them, code runs once per pass; after them, once.
for (let x of array)visits each value in order;for...invisits the indexes.- To print something once before or after all the passes, keep it outside the braces.