TypeScript Function and Function Expression

Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.

A function is an independent block of code that performs a specific task, while a function expression is a way to store functions in variables.

// Create a function named greet()
function greet(): void {
    console.log("Hello World!");
}

// Store a function in the displayPI variable
// This is a function expression
let displayPI = function(): void {
    console.log("PI = 3.14");
}

// Call the greet() function
greet();

// Call the displayPI() function
displayPI();

// Output:
// Hello World!
// PI = 3.14

Create a TypeScript Function

We can create a function in TypeScript using the function keyword and specifying a return type:

function greet(): void {
    console.log("Hello World!");
}

Here, we have created a simple function named greet() that prints Hello World! on the screen.

Our function contains the following parts:

• Function Keyword - The function keyword is used to create the function.
• Function Name - The name of the function is greet, followed by parentheses ().
• Return Type (Optional) - The data type of the value that is returned by the function. The return type of greet() is void, which means it doesn't return any value.
• Function Body - The code that is executed when we call the function. In our case, it is console.log("Hello World!");

Call a Function

Previously, we declared a function named greet():

function greet(): void {
   console.log("Hello World!");
}

If we run the above code, we won't get any output. But why?

It's because creating a function doesn't mean we are executing the code inside it. In other words, the function is ready and available for us to execute whenever we choose.

And if we want to use the function, we need to call it.

Here's how we can call the function:

greet();

As you can see, we call a function by writing the function name (greet) followed by parentheses ().

Example 1: TypeScript Function Call

// Create a function
function greet(): void {
    console.log("Hello World!");
}

// Call the function
greet();

console.log("Outside function");

Output

Hello World!
Outside function

In the above example, we created a function named greet(). Here's how the control of the program flows:

Here,

1. When the greet() function is called, the program's control transfers to the function definition (the place where we've defined the function).
2. All the code inside the function is executed (Hello World! is printed).
3. The program control then jumps to the next statement after the function call (Outside function is printed).

TypeScript Function Arguments

Arguments are values you pass to the function when you call it.

// Function with a string parameter called 'name'
function greet(name: string): void {
    console.log(`Hello ${name}`);
}

// Pass argument to the function
greet("John");

// Output: Hello John

In the above example, we passed "John" as an argument to the greet() function.

Notice the name variable declared inside parentheses:

function greet(name: string): void {
    // Code
}

Here, name is a function parameter, which acts as a placeholder to store the function argument.

In other words, the argument "John" is stored in the name parameter.

Remember: A function argument is the value we pass to the function, while a function parameter is a placeholder that stores the argument passed to the function.

Pass Different Arguments to the Function

We can pass different arguments in each call, making the function reusable and dynamic.

function greet(name: string): void {
    console.log(`Hello ${name}`);
}

// Pass "John" as argument
greet("John");

// Pass "David" as argument
greet("David");

Output

Hello John
Hello David

Example 2: TypeScript Function to Add Two Numbers

We can also pass multiple arguments to a single function. For example,

// Function with two arguments
// We haven't specified the return type to make the code clean
function addNumbers(num1: number, num2: number) {
    let sum = num1 + num2;
    console.log(`Sum: ${sum}`);
}

// Call function by passing two arguments
addNumbers(5, 4);

// Output:
// Sum: 9

In the above example, we have created a function named addNumbers() with two parameters of number type: num1 and num2. Here,

• num1 takes the value of the first argument, 5.
• num2 takes the value of the second argument, 4.

The function then adds the values of num1 and num2 and the result is printed as output.

The return Statement

We can return a value from a TypeScript function using the return statement.

// Function to find square of a number
function findSquare(num: number) : number {

    // Return the square of num
    return num * num; 
}

// Call the function and store the result
let square = findSquare(3);

console.log(`Square: ${square}`);

Output

Square: 9

In the above example, we have created a function named findSquare(). The function accepts a number and returns the square of the number.

Since the square of a number is also a number, we've specified the return type of findSquare() as number.

Here's how our program works:

1. First, we passed 3 as an argument to the function.
2. So, the function returns the square of 3 (which is 9) to the function call. Thus, the return value is stored in the square variable.
3. Finally, the code after the function call is executed. In our case, it's the code to print the value of square.

This process is shown in the image below:

// Function without explicit return type
function findSquare(num: number) {

    // Return the square of num
    return num * num; 
}

// Call the function and store the result
let square = findSquare(3);

// Print the data type of the return value
console.log(typeof square);

// Output: number

// Define a function defining the return type explicitly
function findSquare(num: number) {

    // Print the square
    console.log(num * num); 
}

// Call the function
findSquare(3);

// Output: 9

// Create a function without defining the parameter type
function greet(name): void {
    console.log(`Hello ${name}`);
}

// Pass string "John" as argument
greet("John");

// Pass number 5 as argument
greet(5);

Hello John
Hello 5

The return Statement Terminates the Function

Any code written in the function after the return statement is not executed. For example,

function display(): string {

    console.log("This will be executed.");

    return "Returning from function.";

    console.log("This will not be executed.");
}

let message: string = display();
console.log(message);

Output

This will be executed.
Returning from function.

In this example, the display() function doesn't execute the second console.log() statement inside it.

This is because the function execution stops at the return statement. So, the following code is never reached:

console.log("This will not be executed.");

This is what actually happens:

1. First, the function prints This will be executed. to the screen.
2. Then, it returns the string "Returning from function." to the function call.
3. Finally, the function terminates its execution.
4. The return value is then stored in the message variable and printed.

TypeScript Library Functions

TypeScript can utilize JavaScript's built-in functions that can be directly used in our program. We don't need to create these functions; we just need to call them.

Some common TypeScript library functions are:

To learn more about library functions, visit JavaScript Library Functions.

Example 3: TypeScript Library Function

// Math.sqrt() computes the square root
let squareRoot: number = Math.sqrt(4);
console.log(`Square Root of 4 is ${squareRoot}`);

// Math.pow() computes the power
let power: number = Math.pow(2, 3);
console.log(`2 to the power of 3 is ${power}`);

// toUpperCase() converts text to uppercase
let band: string = "Iron Maiden";
let bandUpper = band.toUpperCase();
console.log(`Favorite Band: ${bandUpper}`);

Output

Square Root of 4 is 2
2 to the power 3 is 8
Favorite Band: IRON MAIDEN

Here,

Function Expressions

In TypeScript, a function expression is a way to store functions in variables. For example,

// Store a function in the square variable
// The function takes an argument of number type
// And, it returns a number value
let square = function(num: number): number {
    return num * num;
};

console.log(square(5));  

// Output: 25

In this example, the function that calculates the square of a number is assigned to the square variable.

We then used this variable to call the function expression using the code square(5), where 5 is the function argument.

Note: Like with functions, we need to use parentheses () with the variable name to call a function expression.

// Declare a variable of Function type
let square: Function;

// Turn square into a function expression
square = function(num: number) {
    return num * num;
};

console.log(square(5));  

// Output: 25

Also Read:

• TypeScript Default Parameters
• TypeScript Arrow Function