Types of Functions in JavaScript
Types of Functions in JavaScript

As you all know JavaScript is been widely used now a days in all the fields, May be it’s FrontEnd or BackEnd as it’s is a dynamic programming language and can be easily be used to developer software that can be scalable in future.

In this JavaScript Article let’s check in how many types we can create a function in JS..

Types of Functions in JavaScript

To keep knowledge of different ways to create a functions in JavaScript is very much important for any developer to write clean, efficient and easily to read and maintain the code. Here are 6 Ways to create function in JS.

  • Named Functions.
  • Anonymous Functions.
  • Arrow Functions.
  • Immediately Invoked Functions Expressions (IIFE).
  • Higher Order Functions.
  • Constructor Functions.

Let’s Check each of them and it’s Syntax

1. Named Function

Named function in JS are defined by using function keyword, then comes name of the function. This Func can be declared anywhere in the code and are always hoisted to the top of the scope at the time of execution.

Example:

function greet(name) {
    return `Hello, ${name}!`;
}

2. Anonymous Functions

As the name itself define it has no name been given.

Example: 

const add = function(x, y) {
    return x + y;
};

You might be wondering, A function is been created (without name) and simply assigned to a variable which holds the complete function structure, Then how it can be anonymous function as the variable itself can be function name right?

Here in add variable we have simply assigned a anonymous function. The Function itself does not have a name, but it just defined as part of the assignment to the add variable.

Usually Anonymous function are commonly used when we need to use function for temporary reason or as an argument to another function (closures).

Another Function

document.addEventListener('click', function() {
    console.log('Document was clicked!');
});

3. Arrow Functions

In JS Arrow Function was introduced with ECMAScript 6 (ES6), Very helpful to write shorter function or one-lined function.

const functionName = (parameters) => console.log(parameters);

Another example for Arrow Functions

const add = (a, b) => a + b;

Note: Arrow Function don’t have their own this context as they are lack in prototype, and also make it not suitable for defining object constructors.

4. Immediately Invoked Functions Expressions (IIFE)

IIFE are those type of functions that executes immediately where they are defined, No need to separately call to run it.

(function() {
    // Code to be executed immediately
})();

5. Recursive Functions

Recursive functions are those that call itself. Here we need to apply some logic to avoid infinite loop of calling itself. They are commonly used for tasks such as tree traversal, factorial calculation, and solving mathematical problems.

Example:

function factorial(n) {
    if (n === 0) {
        return 1;
    } else {
        return n * factorial(n - 1);
    }
}

6. Generator Functions

This provide a powerful mechanism for asynchronous programming, generator function in javascript are used to control like pausing & resuming execution of a function. In generator function we have yield keyword that enables the creation of iterators.

function* generateSequence() {
    yield 1;
    yield 2;
    yield 3;
}

Example: 

function* generateSequence() {
    yield 1;
    yield 2;
    yield 3;
}

const sequence = generateSequence();

console.log(sequence.next()); // Output: { value: 1, done: false }
console.log(sequence.next()); // Output: { value: 2, done: false }
console.log(sequence.next()); // Output: { value: 3, done: false }
console.log(sequence.next()); // Output: { value: undefined, done: true }

In this example, generateSequence is a generator function that yields three values: 1, 2, and 3. When you call generateSequence(), it returns an iterator object. You can then use the iterator’s next() method to iterate over the values yielded by the generator.

Each call to next() returns an object with two properties: value, which contains the yielded value, and done, which indicates whether the generator has finished iterating. When the generator function has yielded all its values, subsequent calls to next() return an object with done set to true and value set to undefined.

RELATED ARTICLESMORE FROM AUTHOR