Javascript Tutorial – Different ways of declaring or defining a function in Javascript

9 different ways of declaring or defining a function in Javascript

In, one of our previous sessions, We had seen, What is a Function, and in this session, We are going to see, how can we declare a function in different ways.

  1. Function Declaration
  2. Function Expression
  3. Arrow Function
  4. Function Constructor
  5. IIFE (Immediately Invoked Function Expression)
  6. Generator Function
  7. Anonymous Function
  8. Recursive Function
  9. Higher Order Function

Function Declaration

This is a type of function which we have already discussed in our previous session. Let’s see the example and syntax for the same.

function add() {
console.log(2+3);
}

add();

This type of function will have 4 types which we already discussued in our previous session.

  1. Functions with no parameters and no return type
  2. Functions with parameters and no return type
  3. Functions with no parameters but with return type
  4. Function with parameters and with return type

Let’s see the example for one of them.

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

const sum = add(2,3);
console.log(sum);

Function Expression

Function Expression is a kind of Anonymous function.
Let’s see How to create this.

function() {
console.log(2+3);
}

Now, you see that there is no name in this function, then how can we call this type of function, So we do it this way.

const add = function() {
console.log(2+3);
}

add();

Now, this function has got a name add, and we can call it with that name.

This type of function will also have 4 types which we already discussued in our previous session

  1. Functions with no parameters and no return type
  2. Functions with parameters and no return type
  3. Functions with no parameters but with return type
  4. Function with parameters and with return type

Let’s see the example for one of them.

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

const sum = add(2,3);
console.log(sum);

Arrow Function

This is the most popular type of function.
This function is somewhat same like function expression.
We don’t need to write function keyword when we declare an arrow function.
We use arrow keys in place of function keyword.

const add = () => {
console.log(2+3);
}

add();

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

const sum = add(5,6);
console.log(sum);

Function Constructor

How do we create a Constructor in other languages like Java, We will use new keyword to create a Constructor. Same way, If we have to create a Function Constructor, We will need to use a new keyword.

Rules for creating a Function Constructor.

  1. Write new Keyword before Function().
  2. There will be arguments in the paranthesis.
  3. last argument will be the definiton or body of the function.
  4. First Argument will be the parameters that we need to use in the body.
  5. All the arguments are written in single codes. seperated by comma.

So, we will write a Function Constructor, something like this.

new Function('x', 'y', 'return x+y')

But again, we see, that there is no name for the function, so how to call this. So, we do it something like this.

const add = new Function('x', 'y', 'return x+y')

const sum = add(8,9);
console.log(sum);

Note – This type of function is not used much, but we must know for knowledge purpose.

IIFE (Immediately Invoked Function Expression)

A self invoking function is called IIFE (Immediately Invoked Function Expression). this type of function is written and invoked immediately, so, this is called the self invoking. This type of function will be executed itself. We don’t need to call it.

Write a paranthesis, write function keyword inside paranthesis and declare a function like a normal function. Come outside the paranthesis and write a paranthesis and put a semicolun.

(function() {
console.log("This is Self Invoking function")
})
();

So, You can see, We are not calling it, We are not giving any name to this function, Simple clear function. Let’s run this.

Generator Function

A function that returns an iterator object for generating a sequence of values is called Generator Function.

Rules for declaring a Generator Function – Use function keyword with wildcard and use a keyword called yield.

function* generateNumberSequence() {
yield 1:
yield 2:
yield 3:
yield 4:
}

const generator = generateNumberSequence();
console.log(generator.next().value);
console.log(generator.next().value);
console.log(generator.next().value);
console.log(generator.next().value);

Note – This is also not much important but just know this for knowledge purpose.

Anonymous function

Anonymous function is a type of function which has no name (Identifier).
Callback function and function expression are the example of such functions.
function expression, We have already seen.
Callback function, We will see in our coming sessions, when we will discuss about Asynchronization in Javascript.
For now, If you want to understand, What is an Anonymous function, Then we can simply say, that a function without any name is an anonymous function, Now, How can we run an anonymous function, because it doen’t have any name, So we can write an anonymous function inside a function, and how do we do that, Let’s see it.
So, Let’s say, We have an array and we want to print each and every element of the array using anonymous function, then we can write it something like this.

let num = [3, 5, 1, 2, 4]
num.forEach(function(ele) {
  console.log(ele);
})

Recursive Function

Recursive Function is a type of function which calls itself.

Let’s see the example of a Recursive Function.

function doSomething(n) {
  if(n === 0) {
    console.log("TASK COMPLETED!")
    return
  }
  console.log("I'm doing something.")
  doSomething(n - 1)
}

doSomething(3);

Higher Order Function

A function that takes 1 or more functions as an argument.
So, Let’s write a normal function first.

function addition(a, b) {
console.log(a+b);
}

Now, Let’s write a Higher Order Function.

function operate(funcName, a, b) {
funcName(a,b);
}

Now, Let’s call the Higher Order Function.

operate(addition, 5, 7);

Summary

We have covered below topics in this session

  1. Function Declaration
  2. Function Expression
  3. Arrow Function
  4. Function Constructor
  5. IIFE (Immediately Invoked Function Expression)
  6. Generator Function
  7. Anonymous Function
  8. Recursive Function
  9. Higher Order Function

Leave a Comment