Start learning free

LESSON 34 OF 348 · FUNCTIONS I

Execution Flow in TypeScript: How Code Runs Line by Line

Lesson Read the full explanation

Note that the execution of a program always begins on the first line. The code is then executed one line at a time from top to bottom. This is known as execution flow and is the order a program in TypeScript executes code.

For example, this program:

console.log("It's a beautiful day.");

function sayHello() {
	console.log("Hello coders!");
  	console.log("Welcome to AlgoCademy!");
}

console.log("Students are joining.");
sayHello();
console.log("We'll learn about functions.");

prints:

It's a beautiful day.
Students are joining.
Hello coders!
Welcome to AlgoCademy!
We'll learn about functions.

This is how the TypeScript interpreter goes through this code line by line:

console.log("It's a beautiful day."); // <- Print "It's a beautiful day."


console.log("It's a beautiful day.");

function sayHello() { // <- A function sayHello() is about to be defined


console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!"); // <- This is part of the function. Not executing the print tho.


console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!"); // <- This is also part of the function. Not executing the print tho.


console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!");
} // <- The function definition is over. 


console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!");
}

console.log("Students are joining."); // <- Print "Students are joining.".


console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!");
}

console.log("Students are joining.");
sayHello(); // <- Function call of sayHello(). Executing the code inside function:
            // Print "Hello coders!"
            // Print "Welcome to AlgoCademy!"


console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!");
}

console.log("Students are joining.");
sayHello();
console.log("We'll learn about functions."); // <- Print "We'll learn about functions."

Assignment
Follow the Coding Tutorial and let's practice with execution flow!

Hint
Look at the examples above if you get stuck.

STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · FUNCTIONS I

    Indentation in TypeScript, explained

    What execution flow is

    A program starts on its first line and runs one line at a time, from top to bottom. That order is its execution flow. Function declarations are the one place where the flow looks different: the lines in a function body are not run when TypeScript reads them. They run later, each time the function is called.

    Take this program:

    console.log("It's a beautiful day.");

function sayHello() {
    console.log("Hello coders!");
    console.log("Welcome to the lesson!");
}

console.log("Students are joining.");
sayHello();
console.log("We'll learn about functions.");

    It prints:

    It's a beautiful day.
Students are joining.
Hello coders!
Welcome to the lesson!
We'll learn about functions.

    Tracing it

    1. console.log("It's a beautiful day.") runs and prints the first line.
    2. The declaration of sayHello is next. TypeScript notes that the function exists. The two print statements inside it are part of the body, so they are not executed now.
    3. The closing brace ends the definition. Everything after it belongs to the main program again.
    4. console.log("Students are joining.") prints the second line.
    5. sayHello(); is a call. Execution jumps into the body, prints Hello coders! and Welcome to the lesson!, then returns to the line after the call.
    6. The last console.log prints the final line.

    The key point is that the order of the definitions in the file doesn't decide the output. The order of the calls does. The function sits in the middle of the file, but its messages appear after the line that follows it, because the call is placed there.

    Braces and indentation

    TypeScript finds the end of a function body by its curly braces. Indentation, the spaces in front of the lines inside the body, doesn't change how the program runs. It is there for readers: it shows at a glance which lines belong to the function. Keep the body indented consistently, and keep the closing brace in line with the function keyword.

    The lesson's exercise

    The task is to produce the letters A to E, each on its own line, in order. The solution uses a class named Solution, with two methods. A method is a function that belongs to a class.

    1. Write sayHello. It prints B, C and D, one console.log per letter. It takes no parameters and is annotated : void, because it only prints.
    2. Write run below it. It prints A, then calls sayHello, then prints E. The call to sayHello sits between the two prints, which puts B, C and D between A and E.
    3. Call the other method through this. Inside a class, one method calls another with this.sayHello(). Writing just sayHello() would look for a separate function with that name, which doesn't exist here.
    class Solution {
    sayHello(): void {
        console.log("B");
        console.log("C");
        console.log("D");
    }

    run(): void {
        console.log("A");
        this.sayHello();
        console.log("E");
    }
}

    Calling new Solution().run() prints:

    A
B
C
D
E

    Although sayHello is written first, run decides the order. If run called this.sayHello() before printing A, the output would start with B.

    Why a class here

    The lesson's examples used a plain function, while the exercise wraps the code in a class. The execution rule is the same in both. The class declaration only describes the two methods and prints nothing. Output appears only when something calls run, and run then calls sayHello through this. Seen this way, the exercise is the earlier trace again, with the main program replaced by the body of run.

    Gotchas

    • Defining is not running. Nothing prints until run is called, and without the call to this.sayHello() inside it, only A and E would appear.
    • Methods versus functions. Inside the class there is no function keyword. The method name is followed directly by parentheses and the body.
    • Forgetting this. Inside a method, a bare sayHello() does not refer to the method of the same class, and the compiler reports that it can't find the name. The JavaScript it writes then stops with ReferenceError: sayHello is not defined when run is called.

    Key takeaways

    • Code runs top to bottom, one line at a time.
    • A function body is skipped over when defined and runs on each call.
    • The order of the calls decides the order of the output.
    • Indentation helps readers; braces tell TypeScript where the body ends.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free