Problem overview
The quiz shows a short program and asks what it prints:
function welcomeUser() {
console.log("Hey coder!");
}
console.log("Welcome back!");
welcomeUser();
The options are: Hey coder! then Welcome back! (A), only Welcome back! (B), Welcome back! then Hey coder! (C), or an error (D). The answer goes into a variable named answer, as a string holding one letter.
Approach: separate the definition from the main flow
The program has five lines, but they are not all executed in the same way. The first three are a function definition, and TypeScript stores the function without running its body. The last two are ordinary statements that run in order. Sorting the lines into these two groups gives the answer.
Step by step
- Line 1, the header, starts a function definition. A function named
welcomeUseris about to be declared. - Line 2 sits inside the curly braces. It is part of the body, so it is noted and not executed.
- Line 3, the closing brace, ends the definition. From here on, the code belongs to the main program again.
- Line 4 is a plain
console.log, so it runs now and printsWelcome back!. - Line 5 calls the function. The body runs and prints
Hey coder!.
The output is Welcome back! followed by Hey coder!, which is option C. The line with Hey coder! is written first in the file, but it is printed last because it only runs when the function is called.
The solution in TypeScript
let answer: string = "C";
/* Explanation:
First line of code is the function header, so a function is about to be defined.
Second line of code is placed inside the function's brackets ("{}") , so TS just notes that it's part of the function body without actually executing it now.
Third line of code is the closing bracket ("}"), so TS knows that the function definition is over and all the code coming after is actually part of the main program, not the function body anymore.
This means that the forth line "console.log("Welcome back!");" will be executed now and the output so far is:
Welcome back!
Fifth line is also part of the main program and so the function call will be executed.
So the code inside the function body (console.log("Hey coder!");) will get executed now and the final output is:
Welcome back!
Hey coder!
*/
Notes on the code:
- The variable is declared with
letand has the typestring. The annotation is only checked by the compiler and is erased from the generated JavaScript. - The answer is text, so
"C"needs quotes. - A block comment, between
/*and*/, can span several lines and has no effect on the program.
Running the quiz's code confirms the order:
Welcome back!
Hey coder!
Why not the other options
- Option A assumes the program prints in the order the lines appear in the file. That is true only for lines that are executed where they stand, and the function body isn't.
- Option B forgets the call. The call on the last line is what runs the body.
- Option D expects an error. Nothing is wrong here: the function is declared properly, and the call comes with parentheses and a matching name.
Edge cases and common mistakes
- Reading top to bottom as printing top to bottom. Each line has to be sorted into "defined" or "executed". A line inside a function body is only defined.
- Moving the call. If
welcomeUser();were placed above theconsole.log("Welcome back!");line, the output would reverse:Hey coder!first. Function declarations are hoisted, so a call above the definition would still work. - Moving the closing brace. If the brace came after the
console.log("Welcome back!");line, that line would become part of the function body, and the output would change toHey coder!followed byWelcome back!from the call, which is option A. - Indentation is not the signal. TypeScript finds the body through the braces. The indentation in the quiz only helps a human reader.
Testing your understanding
- Remove the last line, and the program prints only
Welcome back!. - Add a second
welcomeUser();at the end, andHey coder!appears twice afterWelcome back!.