Functions are the basic building block of JavaScript. Even it is said that Functions are heart of JavaScript. So, to have a good hold on JavaScript, You must have a good hold over functions.

In this guide, We will cover -

1. What is a function?
2. Function declaration/ Function statement
3. Function Expression
4. Function statement vs Expression
5. Parameters and return statement
6. Arguments vs Parameters
7. First Class Functions
8. Anonymous Functions

What is a function?

A function is a block of statements, which is written to perform a particular task. Why functions? We often need to perform a task at multiple places in our code. In such a scenario, Functions are best suited.

So what we do is, write a function performing that particular task and use it wherever required. This makes our code less redundant and increases code reusability.

Function declaration

So how to tell JavaScript that we are interested in writing a function? The answer is using the 'function' keyword. Below is the syntax of declaring a function.

function functionName() {
    // function body
}

Just declaring a function doesn't do anything. We need to execute the function body to perform our task. To do so, we need to call the function. See example.

// Function declaration or Function Statement
function greet(){
    console.log("Good Evening");
}
// Calling the function
greet();

In the above code, greet() calls and executes the function hence "Good Evening" is logged.

Function declaration is also termed as Function Statement .

Function Expression

When we create a function and assigned to a variable like any other value then it is called function expression.

// Function expression
const greet = function(){
    console.log("Good Evening");
}
// Calling the function
greet();

Let me explain the above code a bit.

the function which has no name is assigned to the greet variable. Notice that the reference of the function is assigned not the return value ( will talk about return a bit later). As greet holds the function reference, we have used it to call the function.

We can give the function a name but that name can not be used to call the function from outside. Though we can use this name inside the function body itself.

// Named Function expression
const greet = function greetings(){
    console.log("Good Evening");
}
// Calling the function
greet();
// This will cause ReferenceError
greetings();

Function Statement vs Expression

There are two major differences

1. In function expression we can omit the function name but in function statement omitting function name will cause an error saying Function statements require a function name.

2. Function statements are hoisted but function expressions are not. If you don't know what hoisting is then simply remember function statement can be called before declaration but function expressions need to be declared before calling.

greet(); 
foo(); // cause error

// Function expression
var foo = function(){
    console.log("I'm foo");
}
// Function declaration/statement
function greet(){
    console.log("Good Evening");
}
greet(); 
foo();

Parameters and return statement

Many times a function requires some information to perform its task. In such cases, information is passed to functions via parameters.

A function can optionally return a value. When a function completes its execution or a return statement is encountered, control returns back to the line from where it was called.

See in action below.

function add(x,y){
    const result = x + y;
    return result;
}

const added = add(5,9);
console.log(added); // 14

Notice how result is returned from function add() and assigned to the variable added.

Arguments vs Parameters

Arguments are those which are passed while calling a function. Parameters are those which are used to receive the passed arguments.

In our example above, x and y are parameters while 5 and 9 are arguments. x receives 5 and y receives 9 as their values.

First Class Functions

In Javascript, functions are first-class citizens, meaning functions can be treated like any other variable. Such functions are called first-class.

• First Class Function can be assigned to a variable ( we have seen it above)

• It can be passed to other functions as an argument.

• It can be returned from other functions.

function foo(func){
    func();
}

function bar(){
    console.log("I'm bar");
}
foo(bar);

Notice function bar is passed to the function foo and function foo receives it in the func variable and calls it.

Anonymous Function

Functions not having a name are termed as anonymous. As you can see in the function expression.

Anonymous functions are used when we use functions as any other variable or when a function is bind with event listeners.

See an example below.

function foo(func){
    func();
}
foo( function(){
    console.log("I'm bar");
} );

Notice how an anonymous function is passed to the function foo.

Summary

• Functions are a code block that is written once and used as many times as we wish.
• Functions can optionally receive arguments and optionally return some value. An analogy to this could be a shopkeeper takes money from you and returns some things needful for you.
• Functions in JavaScript are first-class citizens. You can treat them as variables.

If you got any questions or doubt, feel free to ping me on Twitter twitter.com/faheem_khan_dev

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