Types of Function in JavaScript

Today we are going to talk about the different types of functions we can see in JavaScript. Also, we will see you how to use each of them and what their use cases are.

1. Regular functions:

These functions are declared with the function keyword and a function name. These types of functions are hoisted, which means you can call these functions before their declaration.

Example of a hoisted function:

hello();
function hello() {
    console.log('hello');
}

The hoisted nature of these functions can be very useful for writing efficient and clean code.

2. Anonymous functions:

These functions are declared without any name. When you need to declare a callback function that you will not use later, you might use an anonymous function.

Example:

function() {
    // code goes here
}

This function does not have any name, so it is an anonymous function.

3. Function inside an expression:

JavaScript functions can be stored inside a variable.

const hello = function() {};
hello();

You can see an anonymous function is stored in a variable named hello. You can also store a named (regular) function in a variable if you want.

These functions are not hoisted, which means you cannot call them before they are declared.

1. If you want to restrict a function from being called before it is declared, you can use this type of function.
2. Since you can store a function in a variable, you can store different functions in a variable depending on conditions and use them with the same name. This JavaScript feature can be very powerful.

4. Arrow functions:

Arrow functions can be anonymous or assigned to a variable. They are also not hoisted.

Syntax:

const myFunc = (parameters) => {
    // code goes here
}

Arrow functions are easy to write. However, the most important difference between an arrow function and a regular function is that, unlike regular functions, arrow functions do not have their own this binding. They inherit the this binding from their outer scope, which makes the this keyword less confusing to use.

Example:

let age = 9;

function regularFunction() {
    const arrowFunction = () => {
        console.log(this.age);
    };
    arrowFunction();
}

const arrowFunction2 = () => {
    console.log(this.age);
};

arrowFunction2(); // output: undefined, because the arrow function cannot create a 'this' binding
regularFunction(); // output: 9, because the arrow function inherits the 'this' binding created by the regular function

5. Async functions:

JavaScript is a single-threaded language, yet it can exhibit multithreaded behavior. Functions like fetch() exhibit concurrent behavior, so if you want to bring the concurrent behavior of JavaScript into more single-threaded behavior, you can use async functions.

Async functions work with the await keyword:

async function func() {
    await fetch('url');
}
func();

The async/await forces the interpreter to wait until the execution of fetch() is completed. This ensures single-threaded execution of the fetch() call to the users.

6. Immediately Invoked Function Expressions (IIFE):

Often during web development, you may want to define a function and immediately call it. You can do this in JavaScript using IIFE.

(function() {
    // code goes here
})();

To write an IIFE, you need to surround the function definition with parentheses and put another pair of parentheses () to invoke that function.

You can also use them for creating a local scope in your code.

7. Generator functions:

We know functions return a value after they complete their execution. However, sometimes you may need to return multiple values from a function. The problem is that when a function returns a value, it immediately exits the function. To solve this, you can use a generator function.

Syntax:

function* generator() {
    for (let i = 0; i < 5; i++) {
        yield i;
    }
}

Calling the generator function will not execute the function body. Instead, it will return a generator object, which is an iterable object that you can use to get the yielded values.

Here’s how you can use the generator function:

const genObj = generator();

for (value of genObj) {
    console.log(value);
}

8. Method functions:

Method functions are functions defined inside an object or class. They are defined just like any other functions, but they are usually called “methods.” These functions create a this binding inside the object. The this keyword used in the methods refers to the object itself.