Scoping in JavaScript

What is a scope?

(function() {
    // this is a scope
})();

function util() {
    // this is a scope
}

var util = function() {
    // this is a scope
}

A scope in JavaScript is created by a Function

Global scope

var global = 'Global scope';

// or

window.global = 'Global scope';

Local scope

(function() {
    var local = 'Local scope';
})();

function simpleFunction() {
    var local = 'Local scope';
}

Public & private

var globalVar = 'Global Variable';

(function() {
    console.log('globalVar: ', globalVar);
    var localVar = 'Local scope';
})();

console.log('localVar: ', localVar);
console.log('globalVar: ', globalVar);

What wil be the error?

Public & private

var globalVar = 'Global Variable';

(function() {
    console.log('globalVar: ', globalVar);
    var localVar = 'Local scope';
})();

console.log('localVar: ', localVar); // undefined
console.log('globalVar: ', globalVar); // 'Global Variable'

// Uncaught ReferenceError: localVar is not defined

The answer is:

Public & private (advanced)

var globalVar = 'Global Variable';

(function() {
    var localVar = 'Local scope';

    (function() {
        var childVar = 'Child scope';

        console.log('childVar: ', childVar); // 'Child scope'
        console.log('localVar: ', localVar); // 'Local scope'
        console.log('globalVar: ', globalVar); // 'Global Variable'
    })();

    console.log('childVar: ', childVar); // undefined
    console.log('localVar: ', localVar); // 'Local scope'
    console.log('globalVar: ', globalVar); // 'Global Variable'

})();

console.log('childVar: ', childVar); // undefined
console.log('localVar: ', localVar); // undefined
console.log('globalVar: ', globalVar); // 'Global Variable'

What is the Module Pattern?

What is the Module Pattern?

It is a JavaScript Design pattern that gives more structure (with private and public methods) to a JavaScript application.

JavaScript Module

var Module = (function () {
  // code
})();

Private & Public Methods

var Module = (function () {

    var _privateMethod = function() {
        // Private method
    }

    return {
        publicMethod: function() {
            // Public method
        }
    }
    
})();

Call private methods

var Module = (function () {

    var _privateMethod = function() {
        // Private method
    }
    
})();

Module._privateMethod(); // undefined

Call public methods

var Module = (function () {

    // ... methods

    return {
        publicMethod: function() {
            // Public method
            return 'JavaScript Module Pattern';
        }
    }
    
})();

Module.publicMethod(); // 'JavaScript Module Pattern'

Use private methods

var Module = (function () {

    var _privateMethod = function() {
        // Private method
        return 'JavaScript Module Pattern';
    }

    return {
        publicMethod: function() {
            // Public method
            return _privateMethod();
        }
    }
    
})();

Module.publicMethod(); // 'JavaScript Module Pattern'

Declare a module in 2 ways

Locally scoped Object Literal

var Module = (function () {
    var localObject = {};

    var _privateMethod = function() {
        // Private method
    }

    localObject.publicMethod = function() {
        // Public method
    }

    return localObject;
    
})();

Revealing Module Pattern

var Module = (function () {

    var methodOne = function() {
    }

    var methodTwo = function() {
    }

    return {
        publicMethodOne: methodOne,
        publicMethodTwo: methodTwo
    }
    
})();

How to use a Module in another Module?

var Module = (function () {
    var localObject = {};

    var _privateMethod = function() {
        // Private method
    }

    localObject.publicMethod = function() {
        // Public method
    }

    return localObject;
    
})();

var Module2 = (function (Module) {
    var localObject = {};

    var _privateMethod = function() {
        // Private method
        Module._privateMethod();
    }

    localObject.publicMethod = function() {
        // Public method
    }

    return localObject;
    
})(Module);

Why use the Module Pattern?

Why use the Module Pattern?

• It gives (more) structure

• Prevent overriding of variable

• Make code (more) readable

• Makes multiple JavaScript files easier

• Anymore?? 🚀