What the code is supposed to do
The function welcomeUser should take a person's name and print a welcome message for that person. It is called twice, once for Andy and once for John, so the expected output is:
Welcome, Andy!
Welcome, John!
The code you start with compiles and runs without any error, but the output is wrong:
Welcome, Andy!
Welcome, Andy!
Here is the starting code:
function welcomeUser(name: string): void {
console.log("Welcome, Andy!");
}
welcomeUser("Andy");
welcomeUser("John");
What goes wrong
Look at the two calls: the arguments are different, "Andy" and "John". Both are passed correctly, and each call stores its argument in the parameter name. The problem is inside the function.
The body is console.log("Welcome, Andy!");, a fixed string that never mentions name. A parameter is only a place to hold a value. It has an effect only if the body reads it. Here the function receives "John" on the second call, ignores it, and prints the same constant text as before.
No error appears because ignoring a parameter is legal. The compiler has no way to know that the text "Andy" inside the string was meant to be the value of name. It is just characters inside quotes.
Fixing it step by step
- Notice what repeats. Both lines of output are identical, so the printing line gives the same result for every call.
- Separate the fixed part from the changing part.
"Welcome, "and"!"stay the same on every call. Only the name changes. - Build the message from three pieces. Join the fixed text
"Welcome, ", the variablenameand the fixed text"!"with the+operator. The name goes outside the quotes, so the program uses its value. - Leave the calls alone. They are already correct.
The fixed code in TypeScript
function welcomeUser(name: string): void {
console.log("Welcome, " + name + "!");
}
welcomeUser("Andy");
welcomeUser("John");
/* Explanation:
Notice that in the original function we didn't actually use our parameter "name".
And so the function printed "Welcome, Andy!" no matter if we passed "Mike" or "Sally" etc. to it.
The fix is to use the parameter "name" with string concatenation to dynamically construct the message:
console.log("Welcome, " + name + "!");
*/
Now the first call prints Welcome, Andy! and the second prints Welcome, John!.
A few details about this code:
- The
+operator joins strings. When one side is a string,+concatenates. Becausenameis annotated as astring, the result is a string too. - Quotes make text, no quotes make a variable.
"name"is the four letters n, a, m, e.namewithout quotes is the parameter's value. Writingconsole.log("Welcome, name!")would printWelcome, name!for every caller. - Spaces are part of the text. The space after the comma lives inside
"Welcome, ". If you leave it out, the output readsWelcome,Andy!. - Template literals work too.
console.log(`Welcome, ${name}!`);prints the same text. The lesson uses concatenation.
Common mistakes
- Fixing the calls. Changing the arguments cannot help, because the function ignores them.
- Putting the variable in quotes. The output then contains the word
nameinstead of a person's name. - Forgetting the exclamation mark or comma. The output has to match exactly, including punctuation.
- Looking for an error message. A program can run without errors and still give wrong output. Compare the output with what you expect, line by line, and find the first place where they differ.
Testing
A good check is to add a third call with a name the function has never seen, such as welcomeUser("Mike");. A correct function prints Welcome, Mike!, because the text comes from the argument. The buggy version would print Welcome, Andy! yet again. Remove the extra call before submitting, since the lesson expects exactly two lines.
Tracing the call by hand helps too. At the start of the second call, name holds "John". Ask what in the body reads name. In the starting code the answer is nothing, and that is the bug.