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!
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:
TypeScript1// 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!
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:
TypeScript1// 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.
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:
TypeScript1// 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.
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:
TypeScript1// 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"
.
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!