Lesson 3
Mastering TypeScript Functions: Invocation, Composition, and Defaults
Introduction and Overview

Welcome back! Today's mission takes us on a journey into TypeScript, where we'll focus on invoking functions, invoking stand-alone functions within another function, and using default argument values.

In JavaScript, a function execution is triggered when the function is invoked or called, and this holds true in TypeScript as well. Additionally, we can combine the outputs of independent functions by calling them within another function. If a specific value isn't passed, we utilize default argument values. So, are you excited to understand these concepts in the context of TypeScript? Let's get going!

Understanding Function Invocation

A function springs into action when we invoke or call it. For instance, consider a function named sayHello. Invoking this function would look as follows: sayHello(). Here is an example:

TypeScript
1// Function is defined (like a blueprint for now) 2function sayHello() { 3 console.log("Hello!"); 4} 5 6// Function is invoked (blueprint turned into reality) 7sayHello(); // Output: Hello!

Function invocation in TypeScript is akin to giving out instructions — you invoke the instructions to produce the desired outcome!

Invoking Independent Functions Inside a Function

Often, we need to combine the effects of different functions. Invoking independent functions within another function proves handy in these situations.

Imagine having two separate functions, sayHello and sayGoodbye. If we were to create a new function called greet that calls both sayHello and sayGoodbye, it would look like this:

TypeScript
1// Defining independent functions 2function sayHello() { 3 console.log("Hello!"); 4} 5 6function sayGoodbye() { 7 console.log("Goodbye!"); 8} 9 10// Invoking them inside another function 11function greet() { 12 sayHello(); 13 sayGoodbye(); 14} 15 16// Calling the greet function 17greet(); 18/* 19Prints: 20Hello! 21Goodbye! 22*/

There you have it! By invoking sayHello and sayGoodbye within the greet function, both "Hello" and "Goodbye" display together.

Using Other Functions Results

While writing functions, it's common to use the result of one function in another. In these cases, you would call a function within another function.

Consider a function addNumbers that adds two numbers and another function calculateAverage that calculates the average of two numbers. To calculate the average, we first need the sum, so calling addNumbers within calculateAverage is necessary. Here's how we can accomplish this:

TypeScript
1// Define `addNumbers` function that returns the sum of two numbers 2function addNumbers(num1: number, num2: number) { 3 let sum = num1 + num2; 4 return sum; 5} 6 7// Define `calculateAverage` function 8function calculateAverage(num1: number, num2: number) { 9 // Call addNumbers inside calculateAverage 10 let sum = addNumbers(num1, num2); 11 let avg = sum / 2; 12 return avg; 13} 14 15// Test the function 16let average = calculateAverage(10, 20); // Output: 15

In our calculateAverage function, we call addNumbers which returns the sum of num1 and num2. We then use this sum to calculate the average.

Parameter Default Values

We've already covered this before but as a reminder, function parameters in TypeScript can have default values. If a parameter is not provided when calling the function, it uses the default value. Here's how it works:

TypeScript
1// Specify 'curious coder' as the default name 2function greetUser(name: string = "curious coder") { 3 console.log(`Hello, ${name}!`); // Use string interpolation to include the name in the greeting 4} 5 6// Call greetUser without providing a name 7greetUser(); // Output: "Hello, curious coder!" 8 9// Call greetUser with the name "Alice" 10greetUser("Alice"); // Output: "Hello, Alice!"

If no name is passed to greetUser, it uses the default name, "curious coder".

Lesson Summary and Practice

Impressive! You've mastered invoking functions in TypeScript, learned how to invoke independent functions within a function, and tackled using default argument values for function parameters.

Next up some exciting exercises coming your way to strengthen your understanding and proficiency. Remember, practice reinforces concepts! As we continue our journey with TypeScript, stay engaged and excited!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.