Introduction to Module Pattern in JavaScript.

The module pattern in JavaScript is a way to achieve privacy. But before we go on to discuss Module pattern, there are concepts we must understand. These are Scope, Closure, Immediately Invoked Functions (IIEFs), and JavaScript as first-class functions. In this article, I will focus on explaining some of these concepts, because there are the building blocks to understand what goes on, under the hood.

JavaScript as first-class functions:

This implies that JavaScript functions can be used just like every other data type, such as strings, objects, arrays, etc. In clear terms, it means JavaScript functions can:

1. Be stored in a variable.
2. Be returned from a function.
3. Be passed as an argument into another function.

For purposes of understanding module pattern, I would elaborate on JavaScript functions being returned from other functions.

Recall that a function must always return a value. Since functions in JavaScript are first-class functions, we can treat a function as a value. So, we can easily return a function from another function.

function alertThenReturn() {
  alert('Message 1!');

  return function () {
    alert('Message 2!');
  };
}
                                                     source:Udacity

Since alertThenReturn() returns that inner function, we can assign a variable to that return value and call it later.

const innerFunction = alertThenReturn();
innerFunction();

Scope:

When a function is run it creates a new runtime scope. This scope represents the context of the function, or more specifically the set of variables available for the function to use. These variables can be found in:

1. The function’s arguments.
2. The local variables declared within the function.
3. The variables from its parent function scope.
4. Global variables.

const num1 = 5;

function functionOne() {
  const num2 = 10;

  function functionTwo(num3) {
    const num4 = 35;

    return num1 + num2 + num3 + num4;
  }

  return functionTwo(0);
}
functionOne();
                                                     source: Udacity

In the code snippet above, functionTwo has access to the variables declared inside the

1. Global scope: num1
2. functionOne’s local variable: num2
3. functionTwo’s local variable and argument: num3 and num4.

Considering the above lines of code, it is important to mention scope chain

Scope chain: Whenever your code attempts to access a variable during a function call, the JavaScript interpreter will always start by looking within its local variables. If the variable isn’t found the search will continue looking up what is called the scope chain.

Using the above code as an example, when functionTwo is executed it would look for the variables within its local scope first, then it will continue the search up to the global scope.

Variable shadowing:

What happens when you create two variables with the same name and are within the same scope chain?

JavaScript won’t throw an error or otherwise prevent you from creating an extra variable, the variable within the local scope will temporarily shadow the variable in the outer scope. This is called variable shadowing.

Closures:

function alertThenReturn() {
  let alert = 'Message 1!';

  return function () {
    console.log (alert);
  };
}
const innerFunction = alertThenReturn();
innerFunction();
                                                   source: Udacity

When a function is declared inside a function but returned and run outside of where it was declared, it will still have access to the scope it was declared in because of closure. “Richard, from Udacity”

In more simple terms a closure is a combination of a function declared inside a function and its lexical environment - the codes inside the parent function. Let’s make some analogy, the nested function will close over on the variables within its parent’s scope - alert variable, in alertThenReturn function.

return function () {
    console.log (alert);
  };
nested function 👆

However, there is an exception. Nested functions do not close over variables that are passed in as arguments to their parent functions or variables defined within the nested function i.e: local variables.

There is the last concept IIFE, but I will write about it in the sequel, JavaScript Module pattern.

In conclusion, the concepts I have discussed in this article are the building blocks required to understand the JavaScript Module pattern under the hood. In the next article, I will write about how it works when all these concepts are put together.

Resources: Udacity https://classroom.udacity.com/courses/ud711