This page looks best with JavaScript enabled

Learn Functions In TypeScript

 ·  ☕ 5 min read  ·  ✍️ Adesh

Overview

In this blog, we are going to learn about various kind of functions used in TypeScript. Functions are core of any programming language.

Functions are used to write readable, maintainable and reusable code of blocks in any programming language. Function is a set of statements in a block to perform specific tasks in any application.

Functions are declared once, and called many times in an application. Let’s have a quick look, how a function works?

How functions works?

These are the things related to functions, which defines how a function works in any application.

  • Defining a function

In order to use any function, first of all, we have to define that function. A function definition specifies what and how a specific task will be done. Let’s see how to define a basic function in our TypeScript.

Syntax

  • Parameterized function

We can pass any number of parameters in a function. Parameters are the values, which are passed by caller of a function to the function. The function then perform some operations on these passed parameter values.

Syntax

Example

  • Returning function

The function, which returns value to the caller function, are called Returning function.

Syntax

Example

  • Calling a function

To execute a function, we should call it. This process is called as function Invocation.

Syntax

FunctionName();

Example

So, In the above lines, we learned about the basics of functions. Let’s go into the details of function’s parameters. Basically, we  can pass three types of parameters into the function. These parameter types are following:

  • Optional Parameters
  • Default Parameters
  • Rest Parameters

Optional Parameters

Sometimes, we want to keep some parameters optional. Therefore, we can declare them optional parameter in a function. In order to make a parameter optional, append question mark (?) at the end of the parameter. The optional parameter must be the last parameter in a function.

Syntax

function functionname (param1[:type], param2[:type], param3[:type])

Example

In the above example, we declare city as optional parameter. Therefore, we have appended question mark (?) at the end of the parameter name. Also, if you notice, we declared it at the end of the parameter list.

There are 2 function calls.

  • In the first call, caller is passing only of 2 parameters like funcDetail(9876,"Victor").These are id and name parameter, and skipping the city parameter name.
  • In the second call, caller is passing all of 3 parameters like funcDetail(111,"John","New York City"). These are id, name and city.

Default Parameters

We can assign some default values to function parameter. If no value passed from caller function, then default value will be assigned to function parameter.

Syntax

function functionname(param1[:type],param2[:type] = default_value) { }

Example

In the above example, we defined secondnumber as default parameter. If no value is passed in secondnumber, then default value of 2 will be passed in function.

There are 2 function calls.

  • In the first call, caller is passing one parameter to function like multiply(1000)
  • In the second call, caller is passing both parameters to function like multiply(1000,4)

Rest Parameters

Sometimes, you want to send multiple parameters to a function. But, you are not sure about how many parameters you would send. So, using the Rest parameters, you can send as many as parameters of same type to a function.

To define a rest parameter, parameter name must start with three dots (…). This must be in the end of all parameters in a function.

Javascript will build an array of this Rest parameter, and allow you to work with this rest parameter.

Syntax

function functionname(param1[:type],…param2[:type[]]) { }

Example

In the above example, we have prefixed three dots(…) before nums parameter. And inside the function, it is converted to an array. We added the values of all array element, and print the sum of nums parameter.

There are 2 function calls.

  • In the first call, caller is passing 3 parameters to function like sumOfNumbers(1,2,3)
  • In the second call, caller is passing 5 parameters to function like sumOfNumbers(10,10,10,10,10)

Anonymous Function

Unlike normal functions, Anonymous functions does not have any function name. They are dynamically declared at runtime. Like standard function, anonymous function can accept inputs and return outputs. Anonymous functions are created using the function operator.

Anonymous functions can be assigned to a variable.

Syntax

Example

In the above example, we have created an anonymous function. myFunc is a variable, and it is holding function body. myFunc() is used to call this anonymous function.

Example - Passing parameters to anonymous function

Anonymous function can take and return the parameters like the normal functions.

Lambda (Fat Arrow) Function

Lambda function is a concise method to represent anonymous functions. It is also called Fat Arrow function. Fat Arrow function is represented by an arrow (=>). We don’t need to use function keyword in Lambda function.

Syntax

( [param1, parma2,…param n] )=>statement;

Example - Lambda function in a single line

In the above example, we have created our fat function in a single line. It is very concise and short. This function accepts a numeric input and add it to the 100.

Example - Lambda function in multiple lines

Lambda function can span to multiple lines as well. You can create a block of statements in lambda function.

Syntax

Example

Here, we created a multiple lines lambda function.

Lambda Function’s Syntax Variations

Parameter Type Inference

You can skip defining the datatype of a parameter. In this case, datatype of the parameter will be Any.

Example

No parenthesis for a single parameter

Example

Empty parenthesis for no parameter

Example

Summary

In summary, we learned about what are functions in Typescripts. How functions are constructed with different parameters. We learned about Anonymous function, without the function name. We learned about magic function of TypeScript. This is called Lambda or Fat Arrow functions, with different variations in their syntax.

I hope you enjoyed reading this blog.

Read more:

Share on

Adesh
WRITTEN BY
Adesh
Technical Architect