Types of Functions in JavaScript

As most of you would be familiar with what are functions in JavaScript , most common definition of a function you might have heard,

“Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure — a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.”

a basic example:

function sum(a,b){
  return a+b;
}

we will be discussing the most common terms used for functions and their types in JavaScript

Function Statement vs Function Expression vs Function Declaration

functions statement in JavaScript is the syntactical representation of a function or a way of creating a function

function print(){
   console.log("hello");
}

function expression , when a functions is assigned as a value to a variable .

const sum =function add(a,b){
   return a+b;
}

the major difference between the two is of hoisting .

//here we are calling funtion before declarations
print()// will console the proper output
sum(1,2) // will generate a TypeError that sum is not defined


function print(){
   console.log("hello");
}

const sum =function (a,b){
   return a+b;
}

As you can see the error will be thrown in case of “sum” although it is a function expression but sum will be treated as a normal variable and undefined will be assigned initially until the line is executed , but in case of “print” during memory creation phase function is assigned to “print” .

function declaration is same as functions statement

Anonymous Functions

Functions without a name is anonymous function

function (){
  console.log("anonymous function")
}

the above code will throw a Syntax error when executed , “ Function statements require a function name”, since it is being written as a function statement it should have a name. Anonymous Function are used as a function Expression usually or while passing the function as a callback function.

Named Function Expression

Function expression where function is written with a name is called Named function expression

// function expression using anonymous function
const sum = function (a,b){
   return a+b;
}
// named function expression
const sum = function add(a,b){
   return a+b;
}

Note: In Named function expression , from above example if add() is called separately it will throw a Reference Error “add not defined” ,because since it is now assigned as value to a variable no memory allocation will be done beforehand for that function in the global scope.

Arrow Function

It is generally a cleaner way of creating JavaScript functions and it is similar to the function expression. It does not use the function keyword in its syntax. For multiple-line statements, curly brackets are used. The arrow function statement can implicitly return values , this means if it is a one liner return is not needed

const sum =(a,b)=>{
   a=a*10
   return a+b;
};
const sum =(a,b)=>a+b;

First Class Functions OR First class Citizens

The ability to use functions as an argument in another function or return as a value known as First class function/First class Citizens .

// function is returned as a value
const test=function (){
   return function a (){
      console.log("function a");
    }
}

// function is passed as an argument
function add(){
   return a+b;
}

const sum=function (add,a,b){
   return add(a,b)
}
console.log("sum",sum(1,2));

If you’d like to be in the know, subscribe, clap, like and share. Cheers!