Question

I want to ask how many types of functions are there in JavaScript? I know about the anonymous function and the function with a name. Are there are any more different types of functions in js?

Answer 1

There are 3 types of functions in JavaScript:

• Named function
• Anonymous function
• Immediately invoked function expression. It runs as soon as the browser finds it.

Here are some examples:

//Regular (Named) function (EXAMPLE):

function dividedRegular(){
    var result = 3/4;
    console.log("Regular (Named) function in JS: 3 divided by 4 is:", result);
}

dividedRegular();

//Anonymous function (EXAMPLE):

var dividedAnonymous = function () {
    var result = 3 / 4;
    console.log("Anonymous function in JS: 3 divided by 4 is:", result);
}

dividedAnonymous();

//Immediately invoked function expression. It runs as soon as browser finds it (EXAMPLE):
(function(){
    var result = 3/4;
    console.log("Immediately invoked function in JS: 3 divided by 4 is:", result);
}())

 

Answer 2

The purpose of the named function is that we can define it in the code and then call it when we need it by referencing it's name and passing some arguments to it. Named functions are useful if we need to call a function many times to pass different values to it or run it several times. Here is an example:

//JS function with name
function findBiggestFraction(a, b) {
    var result;
    a > b ? result = ["firstFraction", a] : result = ["secondFraction", b];
    return result;
}

var firstFraction = 3 / 4;
var secondFraction = 5 / 7;

var fractionResult = findBiggestFraction(firstFraction, secondFraction);

console.log("First fraction result: ", firstFraction);
console.log("Second fraction result: ", secondFraction);

console.log("Fraction " + fractionResult[0] + " with the value of " + fractionResult[1] + " is the biggest");

The anonymous functions don't have names. They need to be tied to something: variable or an event to run. The same function from above but with anonymous function:

//JS anonymous function without a name

var theBiggest = function (a, b) {
    var result;
    a > b ? result = ["a", a] : result = ["b", b];
    return result;
}

console.log(theBiggest(3 / 4, 5 / 7));

Invoked function expression runs as soon as the browser encounters it. The benefit of this function is that it runs immediately where it's located in the code and produces a direct output. That means it is unaffected by code which appears further down in the script which can be useful. These functions are great for quickly populating a variable or argument in a larger function or a property in an object and are often hooked to event listeners for an immediate output.

The same function from above but with immediately invoked funcitonal expression:

var theBiggest = (function (a, b) {
    var result;
    a > b ? result = ["a", a] : result = ["b", b];
    return result;
})(3 / 4, 5 / 7)

console.log(theBiggest);

Answer 3

Here is an example of immediately invoked function expression (IIFE):

(function (count) {
    for (let i = 1; i <= count; i++) {
        console.log("+".repeat(i));
    }
})(4);

(function (x) {console.log(2 * x);})(5);

Answer 4

2 more examples from me for using IIFE:

(function (x) {console.log(2 * x);})(5);

The code below is an example of IIFE (immediately invoked function expression) and "closure": a state is closed inside:

let f =(function(){
    let x = 0;
    return function(){console.log(++x);}
})();