In my previous Article i was talking about the basics of functions ,how the function execution works and closures. In this article we will dive into deep and learn more on functions.

Let's Start

Functions statements

Function statement also known as function declaration both are same thing which defines a function with specified parameters.

For example

function play(){

console.log("lets play cricket");

}

play();  // calling the function

play();

function play(){

console.log("lets play cricket");

}

Output

lets play cricket

From the above code we execute the function before declaring it. It means that** hoisting** can be done in function statement.

Function expression

When we store a function inside the variable it is known as function expression.

var store=function (){

console.log("I m store inside the variable");

}

store(); // calling the function

store();

var store=function (){****

console.log("I m store inside the variable");

}

Output

Reference error store is not a function.

From the above code it gives an error which mean we cannot do hoisting inside the function expression.

The variable itself is hoisted but the function is not assigned into it until later on so we get an error, not because store doesn’t exist, rather because, the value in that variable is undefined (remember, undefined itself is a value in javascript) .Therefore when you try to invoke store you are told it is not a function - it doesn’t get a function stored in it until later.

Anonymous Function

A function without a name is known as anonymous function. Just like we did above if we see carefully in function expression we didn't write the name of that function .

An anonymous function is not accessible after its initial creation, it can only be accessed by a variable it is stored in as a function as a value. An anonymous function can also have multiple arguments, but only one expression.

var store=function play(){

console.log("playing with different functions");

}

store();

First Class Function

A programming language is said to have First-class functions when functions in that language are treated like any other variable. For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.

All these things we can done in JavaScript .

Assigning a function to a variable

const foo = () => {

console.log("foobar");

};

foo(); // Invoke it using the variable

Output

foobar

We assigned an Anonymous Function in a Variable, then we used that variable to invoke the function by adding parentheses () at the end.

Passing a function as an argument

function enquiry(){

return "what is your name ??" ; }

function permission(question,name){

console.log(question() + " "+ name);

}

permission(enquiry, "My name is jitender");

Output

what is your name ??/n My name is jitender

We are passing our enquiry() function as an argument to the permission() function, this explains how we are treating the function as a value.

Note -> First class function is also known as first class citizen.

Callback Function

As we know function are first class citizen and we can pass function to another function as an arguement which is then invoked inside the outer function to complete some task. It is Known as CallBack function.

function outer(){

}

outer(function inner(){

})

Here we pass inner() inside the outer function so inner is a callback function.

Callbacks are very powerful it gives us asynchrous environment .As we know javascript is a synchronous single threaded language it can do one thing at a time but by using callbacks we can change this synchronous behaviour to asynchronous.

Let's see with the help of an example.

setTimeout(function() {

console.log("when timer pass I will show my output");

} ,5000);

function outer(x){

console.log("outer");
x();
}

outer(function inner(){

console.log("inner");

})

Output

outer

Inner

when timer pass I will show my output

As we know javascript move from up to down and scan everything . In this case javascript starts from the above and when it see a setTimeout it takes that function in a seperate place and waits untill the timer expires. We know that javascript waits for none so it move to the next line were it encountered a function and moving forward when it calls the function along with the calling it also passes a function as an arguement and now inside the outer function first it prints outer and move forward then it execute the inner function and prints the inner function and when the 5000 milliseconds timer expire it execute that function.

Blocking the main thread

As we know we have only one call stack and all the things can be done by using this call stack only. So if any operations block this call stack that is known as blocking the main thread. Let's say we make a function which is doing a lot of heavy task. Untill and unless the given function is not complete we are not able to move further so rest of things is blocked for that particular time.

So if we don't have such functions that will pass to another functions as an arguement and executed later we didn't overcome this problem.

That's why callback is very powerful and very helpful to save us from this situations.

That's it from now.

Thank you