Type Of Functions In Javascript

This article is about learning the types of functions available in JavaScript and their use case. You will be able to create different types of functions and their proper use, which function is better to use in which scenario

There are four simple ways to create functions in the javascript

1. Function as a Statement
2. Functions as an expression
3. Functions as an arrow function (most commonly used in React)
4. Function using function constructor

You can write your code using any of these function definitions. These four have some different advantages that will help you to write the code efficiently and increase the readability of the program.

For example

If you write the function as a statement that is hosted at the top of the execution context, it is always a function expression that can immediately be invoked without creating a separate scope.

An arrow function that doesn't have its own object.

So, if you have a better understanding of these functions, you can write better-optimized code.

Function as a statement

function printName(name) {
    return "My name is " + name;
}

var name = printName("Amar");
console.log(name);

// Output: My name is Amar

You can use any primitive type as well as any complex object.

The main advantage of using this type of function is that it is hoisted at the top of the execution context, which means we can use the method call before it is declared at the bottom of the page.

var name = printName("Amar");
console.log(name);

function printName(name) {
    return "My name is " + name;
}

This works as a value with primitive data types and as a reference for the non-primitive data types.

For example, update the person object in function as a statement.

function updatePerson(person) {
    person.name = "Sultan";
}

var person = {
    name: "Amar",
    age: 20
};

console.log(person.name + " " + person.age);
updatePerson(person);
console.log(person.name + " " + person.age);

Function as an expression

As its name suggests, this way, you can create your function by an expression function that can be declared as an assignment. You can create a function and assign it to a new variable.

var name = function printName(name) {  
    return "My name is " + name;  
}

We can create a function as an expression with a name as well.

var printName = function(name) {  
    return "My name is " + name;  
};  
  
var name = printName("Amar");  
console.log(name);

The name of the function in the function expression is local to the function body and very useful for the recursion.

Let's take an example of the factorial of a number.

var calculate = {
    factorial: function fact(n) {
        if (n <= 1) {
            return 1;
        } else {
            return n * fact(n - 1);
        }
    }
};

var result = calculate.factorial(5);
console.log(result);

// output: 120

One of the most important features of the function as an expression is that it can directly be invoked as soon as it is defined, which is also known as an immediately invoked function expression.

Arrow Function

The main advantage of these types of function writing was to use shorter and smarter syntax. This increases readability. It doesn't have its own object.

for example

var add = (num1, num2)  => {  
      return num1 + num2 ;  
}  
   
var result = add(3, 5);  
console.log(result);  

This function supports rest parameters and default values, Arrow functions don't have this context they can not be used as constructors.

You define rest parameters by passing in an argument prefixed with [...]

var logStuff = (arg1, arg2, ...moreArgs) => {
    console.log(arg1);
    console.log(arg2);
    console.log(moreArgs);
};

// In this example...
// arg1 = 'Amar'
// arg2 = 'Ronit'
// moreArgs = ['Shivani', 'Tino', 'Roger']

// Output: Amar, Ronit, Shivani, Tino, Roger

Function as a constructor

A function constructor is used to create the dynamic functions. It takes the argument and function body as a string, which is why it's a risk from a security point of view.

For example

var add = Function("num1", "num2", "return num1 + num2");
var res = add(2, 3);
console.log(res);

// Output: 5