DEV Community

Cover image for Exploring several types of javascript functions
George Hadjisavva
George Hadjisavva

Posted on

Exploring several types of javascript functions

Returning Functions

In Javascript functions are objects , so they can be used as return values . Therefore functions doesn't need to return some sort of data or array as result of its execution. A function can also return more specialised function or it can generate another function on demand , depending of inputs .

Here's a simple example ,functions does some work and then returns another function , which can also be executed

var login = function () {
    console.log("Hello");
    return function () {
        console.log("World");
    }
}

//Using login function
var hello = login(); //log hello
hello(); // log world 
Enter fullscreen mode Exit fullscreen mode

lets see another example ..

var setup = function () {
    var count = 0 ;
    return function() {
        return (count +=1);
    };
};

//usage
var next = setup();
next(); //returns 1
next(); //returns 2
next(); //returns 3
Enter fullscreen mode Exit fullscreen mode

in this example setup wraps the returned function , it creates a closure and you can use this closure to store some private data which is accessible by the returned function only in the scope.

Self-Defining Functions (Lazy function)

Functions can be defined dynamically and can be assigned into variables. You can override the old function with the new one if you create a new function and assign it to the same variable that already holds another function.In this case function overwrites and redefines itself with a new implementation.
To simplify this lets see a simple example

var helpMe = function () {
    alert("help me")
    helpMe = function() {
        alert("Please , Help me")      
    };
};

//Using the self-defining function
helpMe(); // help me
helpMe(); // Please, Help me

Enter fullscreen mode Exit fullscreen mode

Self-defining functions pattern is very useful when your function has some initial preparatory work and it is require to do it only once .
Using this pattern can improve the performance and efficiency of your application .

Immediate Functions(Self-invoking or Self-executing)

The immediate function pattern is syntax that enables you to execute functions as soon as it is defined .Heres an example :

(function () {
    alert("Help");
}())
Enter fullscreen mode Exit fullscreen mode

This pattern is just a function expression (either named or anonymous) which is executed immediately after its creation . The term immediate function term is not defined in the ECMAScript Standard.

Steps for defining immediate function
  • You define a function using a function expression
  • You add a set of parentheses at the end, which causes the function to be executed immediately
  • You wrap the whole function block in parentheses (only if you don't assign the function to a variable

Think the scenario when your code has to perform some setup tasks when the page initially loads ex : creating objects . This needs to be done only once , so creating reusable named function is unnecessary . Thats why you need immediate function , to wrap all the code in its local scope and not leak any variables to the global scope

Passing parameters to immediate function

You have the ability to pass arguments to immediate functions

//Prints : 
//Hello Joe , today is Nov 9 2022 23:26:34 GMT-0800

(function (name,day){
    console.log("Hello" + name + " Today is " + day )
},("Joe",new Date()));
Enter fullscreen mode Exit fullscreen mode

usually the global object(this) is passed as an argument to the immediate function so its accessible inside of the function without having to use window

Note: Avoid passing to many parameters to an immediate function because it could make the function unreadable and difficult to understand ..

Returned Values from immediate Functions

Immediate function can return values and these returns values can be assigned to variables

var result = (function() {
    return 5+5;
}());
Enter fullscreen mode Exit fullscreen mode

You can achieve the same results by omitting the parentheses that wrap the function , because they are not required when you assign the return value to a variable

var result = function() {
    return 5+5;
}();
Enter fullscreen mode Exit fullscreen mode

Immediate functions can also be used when you define objects . A good example to use Immediate function to instantiate object is , lets say you need to define a property that will never change during the life circle of object but before you define it needs to perform a bit of work and the returned value will be the value of property .

Benefits of the Immediate functions
This pattern helps you wrap an amount of work you want to do without leaving any global variables behind. All the defining variables will be local to the self-invoking functions without worry about the global space.
The pattern also enables you to wrap individual features into self-contained modules .

Top comments (0)