Start learning free

LESSON 40 OF 348 · FUNCTIONS I

Parameters and Arguments in TypeScript: Fixing a ReferenceError

Practice Read the full explanation

Inside the code editor we've tried to define and call a function that takes a number as argument and prints the double of that number to the console.

So when we ran the code, we expected it to print:

20

but it seems like we made some mistakes because when we run our code we get a ReferenceError instead.


Assignment:

Your task is to fix our code such that no errors will be produced and it will print the desired output.

STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · FUNCTIONS I

    Buggy Code Non Existing Variable in TypeScript, explained

    What the code is supposed to do

    The function printDouble should take a number and print twice its value, so printDouble(10) prints 20. The starting code is:

    function printDouble(n: number): void {
        console.log(2 * num);
    }
    
    printDouble(10);
    

    It does not print 20. Instead the program fails with an error about a name that cannot be found. Your job is to fix the code so it prints the expected output.

    What goes wrong

    The function declares one parameter, n. When printDouble(10) runs, the value 10 is stored in n. The body, however, uses a different name, num, and nothing in the program defines num: it is not a parameter, not a variable declared inside the function, and not a variable declared outside it.

    A name must be declared somewhere the code can see. Inside a function body, you can use the function's own parameters, variables declared in the body, and names declared in the surrounding code. num is none of these.

    The TypeScript compiler spots the problem first and reports Cannot find name 'num'. It still writes the JavaScript, though, and that JavaScript runs. When the body reaches 2 * num, the engine looks for num, finds nothing and throws ReferenceError: num is not defined. The statement stops there, so no 20 is printed. Any line of the function before the failing one would still have run, and the error also ends the whole program at that point.

    Fixing it step by step

    1. Read the message. It names the identifier it could not find: num.
    2. Find that name in the code. It appears only in console.log(2 * num);.
    3. Compare it with the parameter. The function receives n, not num. The two names must match.
    4. Change one of them. The simplest fix is to use n in the body. Renaming the parameter to num would work equally well.

    The fixed code in TypeScript

    function printDouble(n: number): void {
        console.log(2 * n);
    }
    
    printDouble(10);
    
    /* Explanation:
    
    We got an error because inside the original function we used a variable "num", which is not the parameter "n", so it wasn't recognized.
    
    One fix is to use "n" instead of "num" in the line "console.log(2 * n);"
    
    Another possible fix is to change the parameter name to "num", like this:
    function printDouble(num: number): void {
        console.log(2 * num);
    }
    */
    

    The call printDouble(10) now stores 10 in n, the body computes 2 * 10, and 20 is printed. The block comment at the end is only text for readers and has no effect on the program.

    Some details about this code:

    • The parameter name is your choice. n and num are both fine. What matters is that the body uses the name that the parameter declares.
    • Types do not create names. The annotation n: number says what n may hold. It does not make any other name available.
    • Case matters. N and n are different names, so a body that used N would fail in the same way.
    • Parameters are local. n exists only inside printDouble. Using n after the function, at the top level of the file, would be the same kind of error.

    Common mistakes

    • Declaring a global num to silence the error. It would remove the error, but then the function would print a double of that variable, not of the argument. The call printDouble(10) would not print 20 unless that variable happened to hold 10.
    • Changing the argument. Passing a different number to the call does not help, because the problem is inside the function.
    • Renaming in only one place. If you rename the parameter to num but leave n somewhere in the body, the same kind of error appears for n.
    • Typos. A misspelled name such as nmu gives the same error. When an error says a name is missing, first check the spelling against the declaration.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free