Basic Function Types in JavaScript
Published: 2021-08-29 07:58:04

A function is a piece of code to perform a specific task. Function is a important concept in programming as it allows modularity in programming and it enables the reusability of code.
In order to execute a function, it should be called or invoked.

### Functions in JavaScript

JavaScript has multiple ways to define functions. The most commonly used among them are: 
* **Function Declaration**
* **Function Expression**
* **Arrow Functions**

#### Function Declaration
##### Syntax
``` javascript
function functionName(parameters){
   ...functionBody
}
```
##### Example
``` javascript
function addNumber(a,b){
   return a+b;
}
```
The above example is a function to add two numbers. And it can be invoked by providing the function name followed by parenthesis. Inside the parenthesis, we will provide the argument values to be passed to the function.
``` javascript
addNumber(2,3); // Returns 5 
```
The parameters are optional for a function, we will be able to create functions without giving any parameter.
``` javascript
function logger(){
   console.log('This is a logger function');
}

logger();
```
##### Optional Parameter
While defining the function, it is possible to set default values to the parameters, in such cases, while invoking, if the user doesn't provide any arguments the default value will considered.
``` javascript
function addNumber(a=2,b=2){
   return a+b;
}
addNumber(3,3); // Returns 6
addNumber(3);   // Returns 5
addNumber();    // Returns 4
```
#### Function Expression
In this type, function is written as an expression and the value generated by that expression is stored in a variable. In function declaration, the function can be invoked even before it is defined. But this is not possible in the case of function expression. This is will be explained in detail in Hoisting.
##### Syntax
``` javascript
const functionName = function(parameters){
   ...functionBody
}
```
##### Example
``` javascript
const addNumber = function(a,b){
   return a+b;
}
```
#### Arrow Function
An Arrow Function expression has a shorter syntax. It is written similar to the function expression but instead of the function key word, it uses an arrow symbol(=>).
##### Syntax
``` javascript
const functionName = (parameters)=>{
   ...functionBody
}
```
If the arrow function body is having only one line of code, it will return the value implicitly. And, the braces can be omitted too.
Also, if it having only one parameter, parenthesis can also be avoided.
``` javascript
const addNumber= a => a + 100

addNumber(2); // Returns 102
```
If the function has multiple parameters, the parameters should be enclosed in parenthesis.
``` javascript
const addNumber = (a,b) =>  a + b

addNumber(2,3); // Returns 5
```
If the arrow function is body is having multiple lines of code, the code should be wrapped in braces and for returning data, the return keyword has to be explicitly provided.
``` javascript
const addNumber = a => { 
   const sum = a + 100;
   return sum;
}

addNumber(2); // Returns 102
```
``` javascript
const addNumber = (a,b) => { 
   const sum = a + b;
   return sum;
}

addNumber(2,3); // Returns 5
```
And if there is no parameter, the empty parenthesis or underscore should be provided.

``` javascript
const greet = () => console.log('Hi!')

greet(); // Prints 'Hi!' in the console
```
``` javascript
const greet = _ => console.log('Hi!')

greet(); // Prints 'Hi!' in the console
```


*PS: There are some more types of function in JavaScript like Function constructor, Getter and Setter Function, Generator Function etc. We will continue on them in our next post*