What the code is supposed to do
The program should define a function welcomeUser and call it, printing two messages in this order:
Hey coder!
Welcome back!
The code you start with prints the messages the other way round:
welcomeUser();
function welcomeUser(): void {
console.log("Welcome back!");
console.log("Hey coder!");
}
Running it prints Welcome back! first and Hey coder! second. Your job is to fix the code so the output matches the target.
What goes wrong
There are two things to look at, and only one of them changes the output.
The order inside the function
The statements in a function body run from top to bottom, in exactly the order they are written. The body prints Welcome back! on its first line and Hey coder! on its second, so that is the order of the output. This is the real bug. The fix is to swap the two console.log lines.
The call above the definition
The call welcomeUser(); comes before the declaration. In TypeScript, as in JavaScript, function declarations are hoisted: the function is available to the whole scope before execution reaches the line where it is written. That is why the starter code runs and doesn't fail. The position of the call doesn't cause the wrong output.
It is still better to define a function before calling it. A reader going through the file from the top meets the definition first and knows what the later call does. This lesson asks for that tidier order as well.
Why order matters more broadly
Two different orders are involved here, and it helps to keep them apart. One is the order of statements inside a function, which decides what a single call prints. The other is the order of the declaration and the calls in the file, which decides when each call happens. In this program a single call happens, so only the first kind affects the output. In a larger program with several calls, both matter.
Fixing it step by step
- Swap the two prints. Put
console.log("Hey coder!");first inside the body andconsole.log("Welcome back!");second. - Move the call below the definition. Delete the call from the top and write
welcomeUser();after the closing brace. - Keep exactly one call. Calling twice would print the pair twice.
The fixed code in TypeScript
function welcomeUser(): void {
console.log("Hey coder!");
console.log("Welcome back!");
}
welcomeUser();
/* Explanation:
There are two problems with the original code:
1. Although calling a function before defining it works in TypeScript,
it's a good practice to call a function only after defining it.
For Code Quality reasons, we'll move the function call after (below) the function definition in our code.
2. The statements inside a function are executed in the exact order we write them.
That's why "Welcome back!" gets printed before "Hey coder!" in the console.
We have to swap the console.log() statements' order inside our function.
*/
Details worth knowing:
- Hoisting applies to declarations. A function written with the
functionkeyword can be called above its definition. A function stored in aconstvariable, such asconst f = () => {}, can't: calling it before that line fails at run time, because the variable doesn't hold the function yet. - The
voidannotation says the function returns nothing. It is removed when the code is compiled and doesn't change what runs. - Comments between
/*and*/are ignored by the program.
Common mistakes
- Fixing only the call position. Moving the call below the function leaves the output in the wrong order. The two prints must be swapped as well.
- Changing the text. Rewording a message gives different output and fails the check. Only the order of the two lines changes.
- Calling the function twice. The output is then four lines.
- Dropping the call. Without
welcomeUser();the function is only defined, and nothing prints.
Checking your fix
Run the code in the editor above. The output should be the two lines Hey coder! and Welcome back!, in that order, once.