Start learning free

LESSON 42 OF 348 · FUNCTIONS I

Why Parameters and Arguments in TypeScript

Lesson Read the full explanation

Now that we've learned about function parameters and arguments, let's see why they are so important in our prgrammers' life:

Consider this: Three students named Andy, Mike and Sally made a mistake. And so their teacher asked each of them to write an apology on the whiteboard.

We can put the apologies in a program like this:

console.log("This is Andy");
console.log("Andy made a mistake");
console.log("Andy suffers the consequences");

console.log("This is Mike");
console.log("Mike made a mistake");
console.log("Mike suffers the consequences");

console.log("This is Sally");
console.log("Sally made a mistake");
console.log("Sally suffers the consequences");

That's decent. But what if we want to change the students' names?

We would have to go through the whole program and change each individual name with the new one.

And if we dealt with 10 students instead of 3 and if the apology text consisted of more than 3 lines, this would quickly get out of hand.

The story with functions:

This is where functions with parameters shine. We can write a function that takes in a student's name as argument and prints the specific aplogy for that student.

Then, we'll just call the function for each individual student:

function printMessage(name) {
	console.log("This is", name);
	console.log(name, "made a mistake");
	console.log(name, "suffers the consequences");
}

printMessage("Andy");
printMessage("Mike");
printMessage("Sally");

Changing the story:

Need to change the students' names? We only change the arguments in the function calls.

Need to change the aplogy text a little bit? We only change it inside the function instead of changing it in the whole program.

function printMessage(name) {
	console.log("This is the apology of", name);
	console.log(name, "made a mistake and so", name, "suffers the consequences");
}

printMessage("Andrei");
printMessage("Paul");
printMessage("Mary");

Assignment
Follow the Coding Tutorial and let's write some functions.

Hint
Look at the examples above if you get stuck.

STEP 1 OF 5
    Ctrl + Enter to check

    TYPESCRIPT · FUNCTIONS I

    Why Parameters And Arguments in TypeScript, explained

    The problem: the same code with different data

    Imagine three students, Andy, Mike and Sally, each told to write an apology on the whiteboard. Without functions, the program repeats the same lines three times, changing only the name:

    console.log("This is Andy");
console.log("Andy made a mistake");
console.log("Andy suffers the consequences");

console.log("This is Mike");
console.log("Mike made a mistake");
console.log("Mike suffers the consequences");

console.log("This is Sally");
console.log("Sally made a mistake");
console.log("Sally suffers the consequences");

    This works for three students. Now imagine ten students and a longer text, or the need to change one name. Every edit means finding the right lines in a long file, and a missed one produces a wrong output with no error to warn you.

    A plain function does not solve this on its own. A function without parameters does the same thing on every call, and these blocks differ by the name. We need a function whose behaviour depends on the data it receives.

    The solution: parameters and arguments

    The parameters of a function are the inputs it declares. The arguments are the values a call supplies for them. The repetitive program becomes one function plus one call per student:

    function printMessage(name: string): void {
    console.log("This is", name);
    console.log(name, "made a mistake");
    console.log(name, "suffers the consequences");
}

printMessage("Andy");
printMessage("Mike");
printMessage("Sally");

    The text is written once. The parameter name stands for "whoever this call is about", and each call fills it with a different argument.

    How console.log joins several values

    The code above passes several arguments to console.log, separated by commas. It prints them on one line with a single space between each pair. So console.log(name, "made a mistake") with "Andy" prints Andy made a mistake. That means you do not need to type the space yourself, as you would with +. Compare:

    console.log("My name is", "Ann");  // My name is Ann
console.log("My name is" + "Ann"); // My name isAnn

    Changing the story

    With parameters, the two kinds of change are separate. To change who is apologising, change the arguments in the calls and leave the function alone. To change the wording, edit the function once and every call is updated:

    function printMessage(name: string): void {
    console.log("This is the apology of", name);
    console.log(name, "made a mistake and so", name, "suffers the consequences");
}

printMessage("Andrei");
printMessage("Paul");
printMessage("Mary");

    Note that the parameter can be used more than once inside the body; each use sees the same value for that call.

    The lesson's exercise

    The exercise starts with three comments and asks you to build a function that introduces a person:

    1. Define the function. Under // Function goes here:, write function introduceYourself(name: string, language: string): void. It has two string parameters, and void says it returns nothing.
    2. Print the name. Inside the body, call console.log("My name is", name);. Two arguments are passed to console.log, and it puts a space between them, so with "Andy" it prints My name is Andy.
    3. Print the language. On the next line, use the same pattern: console.log("I code in", language);.
    4. Introduce John. Under // Introduce John here:, outside the function, call introduceYourself("John", "Python");. Arguments are matched to parameters by position: "John" goes to name and "Python" to language.
    5. Introduce Mary. Under the last comment, call it again with "Mary" and "JavaScript". Only the arguments change; no print statement is repeated.

    The finished program:

    // Function goes here:
function introduceYourself(name: string, language: string): void {
    console.log("My name is", name);
    console.log("I code in", language);
}

// Introduce John here:
introduceYourself("John", "Python");

// Introduce Mary here:
introduceYourself("Mary", "JavaScript");

    The output is:

    My name is John
I code in Python
My name is Mary
I code in JavaScript

    Common mistakes

    • Swapping the arguments. introduceYourself("Python", "John") compiles, because both parameters are strings, and prints My name is Python and I code in John. When types are the same, only you can check the order.
    • Using the wrong parameter name in the body. If the body says lang but the parameter is language, the compiler cannot find the name.
    • Adding spaces with commas. With comma-separated arguments, console.log adds the space. Writing "My name is " with a trailing space would give two spaces in a row.
    • Passing too few or too many arguments. The compiler checks the count of arguments against the parameters, and reports an error when they differ.

    Key takeaways

    • Parameters let one function handle many cases, which removes copy-and-paste code.
    • The definition lists parameters with their types; each call supplies arguments in the same order.
    • Change the data by changing the arguments; change the behaviour by editing the function once.
    • Parameter types are checked while compiling and erased from the program that runs.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free