Start learning free

LESSON 51 OF 348 · FUNCTIONS I

Quiz: Code After return in TypeScript

Quiz Read the full explanation

Quiz: What would this code produce if we were to copy-paste it in a code editor and run it?

function greetAndReturn() {
    return "How are you doing?";
    console.log("Hey bro!");
}

let question = greetAndReturn();
console.log(question);

Important Note:

Do not use an actual code editor to get the answer! It would defy the whole purpose of the quiz!

Pick your answer

Next lesson

TYPESCRIPT · FUNCTIONS I

Quiz Return 7 in TypeScript, explained

Problem overview

The quiz shows a function greetAndReturn with two statements: return "How are you doing?"; and, below it, console.log("Hey bro!");. The program calls the function, stores the result in question, and prints question. You pick which of four outputs it produces and save your letter in a variable named answer.

Approach

The key rule is that return leaves the function immediately. Statements are normally run from top to bottom, but when a return is reached, the value is sent back to the caller and the rest of the function body is skipped.

Walking through the program

  1. The call greetAndReturn() starts the body.
  2. The first statement is the return. The string "How are you doing?" goes back to the caller and the function ends right there.
  3. The console.log("Hey bro!") line is never reached. It sits after the return, so it does not run.
  4. The assignment stores the returned string in question.
  5. The last line prints question.

The program prints one line:

How are you doing?

That is option B.

Why the other options are wrong

  • A and C both print Hey bro!, which would only happen if that line ran. A line after return never does.
  • D prints only Hey bro! and leaves out the returned string, but the final console.log(question) does print it.

The solution in TypeScript

        let answer: string = "B";

        /* Explanation:

Remember, whenever JS hits a "return" statement inside a function, the value is being returned from the function
and the function call ends immediately after that. Even if there are more lines of code coming after the "return", they will not be executed.

In our case, when we call greetAndReturn(), the string "How are you doing?" is being returned and the function call ends.
Thus, the console.log("Hey bro!") will never get executed.

However, variable greeting will be assigned the returned string "How are you doing?", which will be printed to the console.
*/

The returned string is stored in the variable question and printed from there. The rule about return is the same in JavaScript and TypeScript, since TypeScript's types disappear when the code is compiled. The answer is a plain string, so the letter goes in double quotes.

What the compiler says about the dead line

Code that can never run is called unreachable. By default the TypeScript compiler accepts it without any error, and many editors show the line dimmed. A project can ask the compiler to be strict about it with the option allowUnreachableCode set to false, which makes it report error TS7027: Unreachable code detected. Even without that report, the behaviour at run time is fixed: the line is skipped.

Using return to stop early

The same rule is useful when you want it. A function often returns early when it already knows the answer, and the code below is the path for every other case:

function sign(n: number): string {
    if (n < 0) {
        return "negative";
    }
    return "zero or positive";
}

console.log(sign(-5), sign(0));

negative zero or positive

When n is -5, the first return runs and the second line is never reached. When n is 0, the if is skipped and the second return runs. In the quiz, the return is not inside an if, so it always runs and always cuts the function short.

Seeing the rule with a variable

Here is another way to observe it. The function below changes a variable after the return, and the change never happens:

let steps = 0;

function run(): string {
    steps = 1;
    return "done";
    steps = 2;
}

const result = run();
console.log(result, steps);

done 1

The assignment steps = 2 is dead code, so steps stays at 1.

To answer questions like this quickly, find the first return that would execute and cross out everything below it in that function. What remains is what runs, and in this quiz that is a single statement.

Common mistakes

  • Reading the function in order and running everything. Stop at the first return that executes.
  • Thinking the returned value is printed automatically. It is printed here only because the last line calls console.log(question).
  • Missing the order of effects. If the two statements were swapped, the output would be Hey bro! followed by How are you doing?.
Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
Start learning free