Types of functions in javascript

Functions are one of the fundamental building blocks in JavaScript. A function is a set of statements that performs a task. It will take data as input, process it, and return the result as output.

Function Declarations

It is also called as function statement and function definition. It is the most basic way to define a function. JavaScript function consists of a function keyword followed by name of the function, list of parameters within ( ) , and set of instructions within {...}

function sayHello() {
    console.log("Hello World!");
}

sayHello();

A function can have some parameters, which can be used inside the function for computation. We can supply values to parameters as arguments while calling the function.

It’s important to know the difference between parameters and arguments. A lot of people use it interchangeably but they are really different. A parameter is a variable used to define a particular value during a function definition. Function arguments are the real values passed to the function while calling it. Parameters are initialized to the values of the arguments supplied.

function sayHello(name) {
    console.log("Hello ", name );
}

sayHello("John");

Here name is a parameter of sayHello() function, and “John” is the argument passed to that function.

Anonymous Functions

An anonymous function is a function without any name.

function (){
    alert("Hello World!");
};

But we can not use it like this. To invoke and run an anonymous function we must have to assign it to a variable or pass it as an argument to another function.

var sayHello = function() {
    console.log('Hello World');
}
sayHello()

The above code is an example of calling an anonymous function by a variable. This type of declaration also called as function expressions. We have discussed more about it later.

Now let’s see how to use the anonymous function as an argument.

setTimeout(function () { 
        console.log(‘Hello World’) 
}, 1000);

In this example, we pass an anonymous function into the setTimeout() function. The setTimeout() function executes this anonymous function one second later.

IIFE (Immediately Invoked Function Expressions)

If you want to invoke an anonymous function and execute it immediately after its declaration then we can use Immediately invoked function expressions. Let’s see an example to understand how we can do so.

(function () {
    console.log("Hello World");
})()

This may seem confusing so let’s break it down.

First, the following defines an anonymous function

(function () {
    console.log('Hello World');
})

Second, the trailing parentheses ( ) allow you to call the function:

(function () {
    console.log('Hello World' );
})();

If you want to pass some arguments then you can do that by following way.

let person = { 
    firstName: ‘John’, 
    lastName: ‘Doe’ 
}; 
(function () { 
   console.log(Hello `${person.firstName} ${person.lastName}`); 
})(person);

Function Expressions

This allows us to define a function using an expression. By assigning a variable to a function. So here function acts as a value for the variable. This is also called as named function (because it has a name) and an anonymous function expression (because we are assigning an anonymous function to a variable).

var sayHello = function() {
    console.log('Hello World');
}
sayHello()

Named Function Expressions

When we assign a variable to a named function then it's called a named function expression.

var showMessage = function sayHello() {
    console.log('Hello World');
}
showMessage()

In the above example, we can see that the function has got a name as sayHello() but we can’t call it by sayHello() because it's not created on the global scope. So we can only access it by calling showMessage()

Arrow Function

Arrow functions are the modern way of defining functions. It does not require to use function keyword. In short, it's a shorter way of defining function expressions.

let square = (number) => {
    return number * number
}
sayHello(5);

We can make it shorter by omitting return keyword

let square = (number) => number * number
sayHello(5);

Generator Function

A generator function is a special type of function that can stop midway and then continue from where it stopped. In other words, you can suspend their execution do some other task, and then come back and continue from where you left.

The declaration of the generator function is a bit different from the normal function. Here we put a * symbol after the function keyword.

The generator function returns an object than to that object we can use next () method which will return an object that carries 2 important properties as value and done. Among them value contains the actual value and done specifies whether the execution of the generator function is finished or not.

Now let’s see an example.

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

const gen = generator(); 

console.log(gen.next().value); // 1
console.log(generator().next().value); // 2
console.log(generator().next().value); // 3

As you can see here we use yield keyword which is used to pause and resume the generator function. We can not use return keyword as it will terminate the execution.

I hope you found this article useful and learn something new. If you have any queries please leave them in the comment section.

Feel free to contact me at udit.tarini937@gmail.com.