Start learning free

LESSON 43 OF 348 · FUNCTIONS I

Create a Function with Parameters in TypeScript

Practice Read the full explanation

We've written this code:

console.log("My name is Andy");
console.log("I code in Python");
console.log("I have a dog");

console.log("My name is Mike");
console.log("I code in Java");
console.log("I have a cat");

console.log("My name is Sarah");
console.log("I code in JavaScript");
console.log("I have a parrot");

Write the same code in a better way by creating and calling a function with parameters printMessages()

STEP 1 OF 2
    Ctrl + Enter to check

    TYPESCRIPT · FUNCTIONS I

    Exercise Create Function With Parameters in TypeScript, explained

    Problem overview

    The starting program introduces three people with nine console.log calls. Each group of three lines has the same shape: a name, a language and an animal. The task is to get the same output from a function named printMessages that takes those three values as parameters, and to call it three times.

    The expected output is:

    My name is Andy
I code in Python
I have a dog
My name is Mike
I code in Java
I have a cat
My name is Sarah
I code in JavaScript
I have a parrot

    Approach

    Compare the three groups. The words My name is, I code in and I have a never change. Only the name, the language and the animal do. The unchanging text belongs in the function body, and the three values that change become parameters. Each call then supplies one person's values as arguments.

    Step by step

    1. Write the signature. The function takes three parameters, all strings: name, language and animal. After the parentheses comes : void, because the function prints and returns nothing.
    2. Print each sentence. Join the fixed part and its parameter with +. Each fixed part ends with a space ("My name is "), so the words don't run together.
    3. Call it for Andy. Pass "Andy", "Python", "dog". Arguments are matched to parameters by position, so the order must be name, language, animal.
    4. Call it for Mike and Sarah. Use "Mike", "Java", "cat" and "Sarah", "JavaScript", "parrot".

    The solution in TypeScript

    // Define and implement the function printMessages here:
function printMessages(name: string, language: string, animal: string): void {
    console.log("My name is " + name);
    console.log("I code in " + language);
    console.log("I have a " + animal);
}

// Call printMessages 3 times here:
printMessages("Andy", "Python", "dog");
printMessages("Mike", "Java", "cat");
printMessages("Sarah", "JavaScript", "parrot");

    Some details worth knowing:

    • Each parameter has its own type. The annotation : string is written for every parameter. Writing it once at the end, as in name, language, animal: string, would annotate only animal.
    • The compiler checks the calls. Passing a number where a string is expected, or giving two arguments instead of three, is reported as an error when the code is compiled. The annotations are then erased, so nothing is checked at run time, and the JavaScript still runs: a call with two arguments leaves the third parameter as undefined.
    • Parameters are local. name, language and animal exist only during one call. The next call starts with fresh values.

    Why this is better

    The original program has nine lines of printing, and the new one has three. More important is what changes when the data changes. Adding a fourth person means one more call, not three more lines of printing. Rewording a sentence, say turning I have a into My pet is a, means editing one line inside the function instead of three scattered through the file.

    It also helps to trace one call by hand. During printMessages("Mike", "Java", "cat"), name holds "Mike", language holds "Java" and animal holds "cat". The three console.log calls then build My name is Mike, I code in Java and I have a cat. When the call finishes, those three values are gone, and the next call starts fresh.

    Edge cases and common mistakes

    • Wrong argument order. Because all three parameters are strings, printMessages("Python", "Andy", "dog") compiles and prints My name is Python. Check the order against the signature.
    • Missing space. "My name is" + name prints My name isAndy. The space must be in one of the pieces.
    • Quoting a parameter. "My name is " + "name" prints the word name for every call. Write the parameter without quotes.
    • Different text. The sentences must match exactly, including the article in I have a.
    • Calling with the wrong number of arguments. The function declares three parameters, so each call must pass three arguments. With two, the compiler reports Expected 3 arguments, but got 2.

    Testing

    Try a fourth call such as printMessages("Lena", "C++", "fish");. It should print My name is Lena, I code in C++ and I have a fish. That proves the function works for any values, not only the three in the task. Remove it before submitting.

    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free