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