javascript function, function in javascript

A function is the main "Building Block" of any programming language. Because they allow the code to be called many times without re-writing it again. In javascript, the Function is just beautiful, and also we can say that function is the Heart ❤ of Javascript.

In this article we will cover:

What is Function?
Function declaration/ Function Statement
Function Expression
Function declaration VS Function Expression
Argument VS Parameters
Anonymous Function in Javascript
First Class Function

What is Function?

A function is a block of statements, which is used to perform a specific task.

Why do we use Function? As we know, A function is simply a “block” of code that we can use over and over again, rather than writing multiple times. So, if you want to execute the same block of code multiple times then the function is there for you. This makes our code more readable, and less redundant and also increases code reusability.

In Javascript there are multiple ways to create a function:

Function Declaration:

When a function is created with a function keyword and with a function_name is a function declaration. In function declaration there are four steps to create a function:

First, write function keyword.
Then write the name of the function.
Then a list of parameters between the parentheses and
Finally, the code of the function which also named "Body of the function".

function sum(a, b) {       //1. Function keyword 
   return a+b;            //2.Function Name
}                        //3. Parameter list
sum(2,3)                //4. Function Body

Function Expression:

When a function is assigned to a variable or function acts as a value is called Function Expression.

// Function expression
const welcome = function(){
    console.log("Hello, Hey Reader");
}
// Calling the function
welcome();

What is the difference between Function Declaration and Function Expression?

The difference between the function declaration and function expression is "Hoisting".

Let's See How:

Hoisting: Hoisting is the phenomena in javascript by which we can access variables and function even before we have initialized it without any error.

In the case of Function Declaration, when the javascript engine sees the function keyword they stored the whole code in the memory. or we can say an actual copy of the function is stored.
But in the case of Function Expression, when the javascript engine sees the const, let, or var keywords. They simply store undefined in the memory. And when we access it before the initialization they simply give us an undefined result.

Argument VS Parameter:

Parameter: A parameter is a variable defined by a function(method), that receives a value when function(method) is called(invoked).
Argument: An argument is a value that is passed to a function(method) when it is invoked.

For Example:

function add(a, b) {  
   console.log(a + b);
}
add(3, 5);

Here the a and b are parameters it receives the value when add function is called.

And 3 and 5 are the arguments. because it passed to add function when the function is called.

First Class Function:

In Javascript, functions are first-class citizens. It means that:

The ability to use function as a parameter.
Assign a function to a variable(Function Expression).
Return a function from another function.

This is why the function is the class-class citizen in Javascript.

Pass a function as an argument:

const greeting = function ( ) {
      return "Hello, Good morning ";
}

const person_name = function (fn , name) { // Pass a function into another function
     console.log(fn, name);  
}
person_name(greeting , "Haroon Hayat"); 
//output: Hello, Good morning Haroon Hayat

Assign function to a variable:

// Assign function to a variable OR function Expression
const welcome = function(){
    console.log("Hello, Hey Reader");
}
// Calling the function
welcome();

Return a function from another function:

function a(){
      return function b(){
             console.log("Return a function from another function");
           }
}
const c = a();
c()

Anonymous Function

Those function which has "No-name" is called an anonymous function. But if a function has "no-name" it throws an error. Then why do we use an anonymous function?

So, the anonymous function is used when a function is used as value OR Function Expression.

// Assign function to a variable OR function Expression
const welcome = function(){
    console.log("Hello, Hey Reader");
}
// Calling the function
welcome();

In the above function has no name but it still works properly because it is used as a value.

Summary

Functions are a block of statements, which is used to perform a specific task repeatedly.
We can declare functions with Function declaration or function expression.
The difference between function declaration and expression is Hoisting.
Function in javascript are First Class functions.

If you got any questions or doubts, feel free to ping me on Twitter: twitter.com/haron_hayat

I hope it was a great read for you. If you have any feedback please share it in the comment below.

Haroon Hayat's blog