01 - Define Functions

Two Ways to Define Functions

There are two different ways to define functions in JavaScript. The first way is to name explicitly, as shown below:

 function helloWorld() {
    console.log("Hello world.");
}

helloWorld();

// Output:
// Hello world.

In the code above, a function renamed helloWorld is defined. When it's invoked, a line of "Hello world." is logged into the console.

We can also define an anonymous function. Since a function in JavaScript is also an object, the anonymous function can be assigned to a variable name. The function then can be invoked via the variable name. The following is an example:

var helloWorld = function () {
    console.log("Hello world.");
}

helloWorld();

// Output:
// Hello world.

There is a striking differences between the two ways to define functions. An explicitly named function can be invoked ahead of its definition, as shown in the example below:

helloWorld();

function helloWorld() {
    console.log("Hello world.");
}

// Output:
// Hello world.

The function helloWorld is defined when the code is loaded, so it can be invoked even though the function call appears ahead of its definition.

The same scenario does not work for anonymous functions. For example, an error will be thrown in the sample below:

helloWorld(); // TypeError: undefined is not a function

var helloWorld = function () {
    console.log("Hello world.");
}

The anonymous function gets defined when the code is loaded, but the variable helloWorld won't be defined (be assigned to the anonymous function) when the line of code get executed. Therefore, when we try to call the function via the variable name helloWorld, the value of the variable is still undefined.

Immediately Invoked Function Expression

A function can be invoked immediately when it's defined. The following is an example:

(function() {
    console.log("Hello world.");
})();

// Output:
// Hello world.

In the code above, an anonymous function is defined. There is a pair of parentheses after the function definition, which indicate that the function is invoked immediately. 

An immediately invoked function expression is a widely used design pattern in JavaScript. The singleton pattern can be implemented based on an immediately invoked function. The following is an exapmle:

var Singleton = (function() {
    function SingletonClass() {
    }
   
    var instance = new SingletonClass();
   
    return {
        getInstance: function() {
            return instance;
        }
    };
})();

var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();
console.log(instance1 === instance2);

// Output:
// ture

Inside the outer anonymous function, a constructor SingletonClass is defined, and an instance of SingletonClass is created. In the returned instance of the anonymous function, an instance of SingletonClass is returned in the member function getInstance. Notice that the constructor SingletonClass is defined inside an anonymous function, no one else can invoke the constructor to create new instances.

Outside the anonymous function, the returned instance is assigned to a variable name Singleton, then the unique instance of SingletonClass can be accessible via the function Singleton.getInstance. If the function Singleton.getInstance is invoked for multiple times, only one instance of SingletonClass will be returned, so instance1 and instance2 are identical. It demonstrates that requirements of the singleton pattern have been fulfilled.

Immediately invoked functions can also be utilized to keep private variables inaccessible. More details will be discussed in other posts later.