JavaScript Function (ES6)

In the programming world, a function is a block of organized, reusable code that is used to perform a single, related action. We can simply think of it as a machine where we give some input and it gives us some output, that’s it. In JavaScript, a function is also an object that means it is a non-primitive data type. JavaScript function starts with the keyword called function .There have two basic ways to declare a function in JavaScript. One is function expression another is function statement. Let’s start with a sum() function that takes 2 parameters (input) and return their addition as output.

/// FUNCTION STATEMENT
function addTwoValue (a, b) {
    return a + b;
}
addTwoValue(3, 2); // 5
// FUNCTION EXPRESSION
var addTwoValue = function (a, b) {
    return a + b;
}
addTwoValue(3, 2); // 5

But there has a limitation. We don't pass more than two parameters in the function. If we want the addition of more than two values then we also need to modify the function. There comes the arguments keyword.

arguments :

This is a special keyword for the JavaScript function. It can receive all the parameters inside of it and we can read those by giving the index value. But it can't read outside the function. Noted that it’s not a proper array it is an array-like object. The push(), pop(), shift(), unshift() etc method can’t perform by it.

function addNumbers() {
    var sum = 0;
    for(var i = 0; i < arguments.length; i++){
        sum += arguments[i];
    }
    return sum;
}
addNumbers(1, 2, 3, 4, 5); // 15

Anonymous Function:

An anonymous function is a function without a name. An anonymous function is often not accessible after its initial creation. A function expression is similar to and has the same syntax as the anonymous function.

let greetings = function() {
    console.log('Hello There!');
};
greetings(); // 'Hello There!'

But most of the time the anonymous function is used as a call back function.

setTimeout(function() {
    console.log('Execute later after 5 second')
}, 5000);

Immediately Invoked Function Expression (IIFE):

If we want to create a function and execute it immediately after the declaration then we can use IIFE, which is also an anonymous function.

(function () {
    console.log('Immediately invoked function expression');
})();
// 'Immediately invoked function expression'

Arrow Function:

An arrow function is a new addition to JavaScript ES6. It is also known as Fat Arrow. This is one kind of Syntactic Sugar of our classical function. Arrow functions provide a more concise syntax for writing function expressions. They allow us to have implicit returns with a shorter syntax by removing curly brackets {} and return keyword. Let’s implement the addTwoValue() function with the arrow function.

const addTwoValue = (a, b) => a + b;
addTwoValue(2, 3); // 5

So it clearly shows the difference, how concise it is!

Call-Back Function:

If we passed a function as an argument into another function or return a function from another function then another function is known as a Call-Back function. That's why the JavaScript function is also known as Call-Back Function.

function explain_callBack(name, task) {
    console.log("Hello " + name);
    task();
}
function washHand(){
    console.log("Wash your Hands");
}
function takeShower(){
    console.log("Take a Shower");
}
explain_callBack("Abul", washHand);
// Hello Abul
// Wash your Hands
explain_callBack("Kabul", takeShower);
// Hello Kabul
// Take a Shower