Basic Function Types in JavaScript

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

function functionName(parameters){
   ...functionBody
}

Example

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.

addNumber(2,3); // Returns 5 

The parameters are optional for a function, we will be able to create functions without giving any parameter.

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.

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

const functionName = function(parameters){
   ...functionBody
}

Example

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

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.

const addNumber= a => a + 100

addNumber(2); // Returns 102

If the function has multiple parameters, the parameters should be enclosed in parenthesis.

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.

const addNumber = a => { 
   const sum = a + 100;
   return sum;
}

addNumber(2); // Returns 102

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.

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

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

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