In this article, we are going to cover:

• function statement
• function expression
• anonymous function
• named function expression
• first-class function
• callback functions
• Higher-Order functions

Function Statement aka Function Declaration

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

This type of declaration of the function is known as the function statements in javascript.

Function Expression

var sayHello = function(){
 console.log("Hello!");
}
sayHello(); //Hello!

When we assign the function to some variable it is known as function expression in javascript.

The major difference between the function statement and function Expression is during hoisting. if we call the function statement before even declare the output will be the same but in the case of function expression during the memory allocation phase the js engine considers it as variable and assign undefined. you can read more on hoisting in my previous blog Hoisting

Anonymous Functions

function (){

}

This is an anonymous function but it will result out to be TypeError saying that function statements required a function name. this is because it's just a function statement without the name. so if it gives an error what is the use of it??

Anonymous functions are used when we want to use function as a value

As you can see we used the anonymous function in a function expression to use function as a value for a variable sayHello

Named Function Expression

var sayHello = function abc(){
  console.log("Hello!!");
}
sayHello(); //Hello!!

It's like the function expression but instead of assigning the anonymous function, we assign it a function statement.

There is one side note you cannot call the function abc() it will result out to be an error because it was not declared as a function in global space. it was assigned to the variable

First Class Functions

First-class function is just the ability of functions to use it as a value

So that we can assign it to a variable:

var a= function (){
  console.log("Hello");
}
a(); // Hello

Pass it as an argument to another function:

function xyz(param1){
  console.log(param1);
}

xyz(function (){ .... });  // f (){}

Return it from another function:

function abc(){
  return function xyz(){
     console.log("Hello");
  }
}

abc()();//Hello

There is one statement about functions in the JavaScript world

Functions are First-Class Citizens in javaScript

The first-class citizens refer to the first-class functions

Callback function

As we know the functions are first-class citizens in javascript. so when we pass the function as an argument to another function, the function we pass as an argument is called a callback function.

function x(y){

}

x(function y(){});

In this code, the function y is the callback function. so why this function is known as a callback function? because this function y has not been called immediately and it will be called sometimes later in function x. it is the responsibility of x when function y will be called, that's why it is known as callback function 'cause it will call back later in code.

Callback functions are very important in javascript. as we know the javascript is the synchronous and single-threaded language that means js only runs the code in a specific order and performs one task at a time. so to perform the task asynchronously we use the callback functions.

setTimeout(function (){
  console.log("hello after 1sec");
}, 1000);

The function inside the setTimeout is also a callback function because it will be called sometimes later in code in this case after 1sec.

The functions we used in event handling are also callback functions.

document.querySelector("#btn").addEventListener("click", function (){
        console.log("button clicked");
});

Suppose there is a button with the id="btn". the function inside the click listener is the callback function because it only going to run after the button is clicked.

Higher-Order functions

The functions which take another function as an argument or functions which return another function is known as higher-order functions.

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

function y(x){
x();
}
y(x); //Hello!

In this program, the function y() is a higher-order function because it taking function x() as an argument and as we have seen earlier the function x is a callback function.

That's it for this article!