What the code is supposed to do
The program should print 1 and then 2, each on its own line. The code you start with prints them in the opposite order:
function printNumbers(): void {
console.log(1);
}
console.log(2);
printNumbers();
Running it produces this:
2
1
Your job is to find out why the order is reversed and fix it.
What goes wrong
TypeScript runs a program from top to bottom, one statement at a time. Walk through the starter code in that order:
function printNumbers(): void { ... }only defines the function. Nothing is printed, because a definition does not run the body.console.log(2);is a plain statement at the top level of the file, so it runs immediately and prints2.printNumbers();calls the function, which finally runs its body and prints1.
The mistake is the position of console.log(2);. It sits after the closing brace, so it is not part of the function. It is an ordinary statement that happens to appear between the definition and the call. The call happens last, so 1 comes out last.
Braces decide, not indentation
Look at how the starter code is laid out. The line console.log(1); is indented, and console.log(2); is not. Indentation is a helpful hint for the person reading, but the compiler ignores it. What belongs to a function is whatever sits between its opening { and its closing }.
That works in both directions. If you indented console.log(2); by four spaces but left it after the closing brace, it would still run on its own, before the call. If you removed the indentation from console.log(1); but kept it inside the braces, it would still belong to the function.
Fixing it step by step
- Find the statement that is in the wrong place. The output shows
2first, so the line that prints it runs before the function call. - Move it into the function body. Put
console.log(2);inside the braces, afterconsole.log(1);. Statements in a body run in the order they are written, so1comes before2. - Keep the call at the bottom. The function must be called exactly once, so each number is printed once.
The fixed code in TypeScript
function printNumbers(): void {
console.log(1);
console.log(2);
}
printNumbers();
Now the only top-level statement that prints anything is the call. It runs the body, which prints 1 and then 2.
A few details are worth knowing:
- The return type
void. It says the function returns no useful value; it only prints. Types are checked while compiling and then removed, so the program that runs is plain JavaScript. - Defining is not running. If you deleted the call
printNumbers();, the program would print nothing at all. - Calling more than once. Each call runs the whole body again. Calling
printNumbers();twice would print1,2,1,2.
Another way to see the execution flow
Statements outside any function run in file order. Statements inside a function run only when the function is called, and at that moment execution jumps into the body, runs it to the end and then returns to the line after the call. In this example:
console.log("before");
printNumbers();
console.log("after");
placed after the fixed function, the output is before, 1, 2, after.
Common mistakes
- Relying on indentation. A line that looks like part of a function is not part of it unless it is between the braces.
- Moving the wrong line. Moving
console.log(1);out of the function, or moving the call to the top, gives yet another order or a different program. Onlyconsole.log(2);needs to move. - Adding a second call. Calling the function twice prints the numbers twice, which is not the expected output.
- Dropping the closing brace. Without
}the function body never ends, and the compiler reports an error.