In this blog, we are going to learn about the First Class function and Anonymous Function but with this, we are going to cover a few more topics as listed below.
most of the part of this blog will be about understanding below mentioned terms and
how they are used.
Function Statement
Function Expression
Anonymous Function
Named Function Expression
Difference between Parameters and Arguments
First Class Function
Function Statement: A function statement, also known as a function definition or a function declaration, is a block of code in a programming language that defines a named function. The function statement typically includes the function name, a set of input parameters, and the code that is executed when the function is called.
Understand that a function statement and function declaration both are the same so most of the time when you read some blog articles than in some blogs you may see a function statement and in some places, you will see a function declaration.
// This is basically a function statement or function declartion
function a() {
console.log("Function defination");
}
Function Expression: Function Expression is another way to define the function in javascript. In function expression mostly we don't give any name to a function and assign that function to a variable.
// This way of defining function is know as function expression
var a = function(){
console.log('DO SOMETHING');
}
a(); // line 1
b(); // line 2
// Function statement
function a() {
console.log("BE SOMETHING");
}
// Function Expression
var b = function() {
console.log("SAY SOMETHING");
}
We have declared function a() and function b() in the above example one thing to notice is that we have invoked the function before declaring them as we invoked at
line 1 and line 2 and after that, we are declaring it. What do you think will be the
output?
Here the program will output the error at line 2 after running function a() successfully.
Because we are assigning function to variable b and at the time of memory creation phase javascript assigns undefined value to variable b now once the memory creation phase is done javascript starts the code execution part and when it tries to run line number 2 then it sees that I have variable b but it's undefined it's not a function then why you guys are invoking me and it through the error.
BE SOMETHING // FROM LINE 1 OUTPUT
TypeError: b is not a function // FROM LINE 2 OUTPUT
Anonymous Function: Functions without names are known as anonymous functions.
Mostly used in the case of function expression where you are not giving a name to a function but assigning that function to a variable and accessing the function through that variable as we see in the above function b().
// Example 1
var a = function(){
console.log('I HAVE NO NAME');
}
// Example 2
function soft(param1){
console.log(param1()); // Because we will pass function as param 1
}
// passing function to another function as parameter
soft(function(){
console.log('DO EPIC')
})
// EXAMPLE 3 WHICH IS INVALID CASE
// It won't even allow you to run the program and will give you
// compile time error
function (){
console.log("THIS IS NOT RIGHT BRO HOW CAN SOME ONE INVOKE ME")
}
Named Function Expression: This is similar to function expression only difference is we can have the name of the function and at the same time we can assign that function to a variable also.
var a = function xyz(){
console.log('Yes i have name and also assigned to variable')
}
// Understand that to invoke the function still you have do like a()
// and not xyz()
a(); // Yep good it will work fine
xyz(); // This won't work like this man
Difference between Parameters and Arguments: These two word looks simple but is still very confusing sometimes and also this is the most common interview questions. So lets us understand in the simplest way we can.
Parameters: Whatever you pass between parentheses of a function at the time of function declaration is known as parameters.
Arguments: whatever you pass between parentheses of a function at the time of
function invocation is known as arguments.
// We have declered function a and passing two parameter param1 param2
function a(param1 , param2){
console.log(param1,param2);
}
a(5,10); // Invoked function a() and passing two arguments 5 and 10
First Class Function: In javascript, you can pass a function to another function you can return a function from another function and even can assign a function to the variable because of all these abilities javascript functions are also known as First Class Functions or First Class Citizens.
function a(param1) {
let output = param1() + 5 // 10 + 5
return function newVal(output){ // returning function from function
consolo.log(output); // 15
}
}
a(function(){
return 10; // Passing one function two another.
})
// Assigning function to variable
var last = function() {
console.log('See you again')
}
The last point to understand here is that all the above concepts will work the same with the arrow function also.
That's all about FIRST CLASS FUNCTIONS. And thanks to Akshay Saini for creating an incredible Namaste Javascript playlist this blog is just whatever learning I had from there.