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 ParametersDefault ParametersRest 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.
