What the code is supposed to do
The program should print two lines:
Hey bro!
How are you doing?The function greetAndReturn is meant to print Hey bro! itself and then give back the string "How are you doing?". The code at the bottom stores that string in question and prints it. At the moment only the second line appears.
function greetAndReturn(): string {
return "How are you doing?";
console.log("Hey bro!");
}
const question: string = greetAndReturn();
console.log(question);
What goes wrong
Statements in a function run from top to bottom, but return ends the function on the spot. The moment execution reaches return "How are you doing?";, the value goes back to the caller and the function is over. Anything written below the return is unreachable: it is never executed.
So console.log("Hey bro!") never runs. The caller receives the string, stores it in question, and prints it. The output is the second line only.
The line is not wrong, only in the wrong place. The compiler can point it out when the option allowUnreachableCode is set to false, reporting error TS7027: Unreachable code detected. By default it only greys the line out in editors, so a run of the program is what tells you something is off.
Fixing it step by step
- Find what is missing.
Hey bro!is absent from the output, and the only line that prints it is the one afterreturn. - Move the
console.logup. Put it before thereturn, so it runs first. - End with the
return. It stays the last statement, because nothing after it could run.
The fixed code in TypeScript
function greetAndReturn(): string {
console.log("Hey bro!");
return "How are you doing?";
}
const question: string = greetAndReturn();
console.log(question);
The order of events is now: the call starts, Hey bro! is printed inside the function, the function returns the question, question is assigned, and the last line prints How are you doing?. That gives the two lines in the right order.
Why the order of the lines is right
The function prints its line while it is running, which happens during the call on the line const question: string = greetAndReturn();. The second print comes later, from the final line. So Hey bro! is always written before How are you doing?: the first happens while the function runs, and the second only after the function has finished and its result has been stored.
A function can have both effects
This function does two separate things: it has a side effect (printing) and it produces a result (the returned string). Neither replaces the other. The side effect has to happen before the return, because the return is the exit. Here is a version with a variable that shows the rule more plainly:
function count(): number {
let total = 0;
total = total + 1;
return total;
total = total + 100; // never runs
}
console.log(count());
1The unreachable line in count would have added 100 to total, but it is skipped, so the call gives 1. The same thing happens to the console.log in the buggy version.
Common mistakes
- Putting any code after
return. This covers more than printing: an assignment, a counter update or a cleanup placed belowreturnnever happens either. - Removing the
return. Then the call gives backundefined, and the last line printsundefinedinstead of the question. - Printing the question inside the function too. That would show
How are you doing?twice. - Returning early on purpose. A
returninside anifis a normal way to stop a function early. The code below it is skipped only when that branch runs.
Checking your fix
Run the code in the editor above. You should see Hey bro! on the first line and How are you doing? on the second.