Executing Functions from External Files: Global Variables, Functions, and Immediately Invoked Functions [JavaScript]

Calling functions defined in separate files is straightforward in JavaScript.

This is because, fundamentally, variables and functions defined outside of any function have a global scope.

Conversely, immediately invoked functions (IIFEs) are sometimes used to control global variables.

DEFINING GLOBAL VARIABLES AND FUNCTIONS

First, without overthinking it, variables and functions declared outside of any function are considered global and can be accessed from anywhere.

<script type="text/javascript">

var testMessage = 'test message';   // global
function testFunction() {           // global
    console.log('test function message');
    var localMessage = 'local message';    // local
}

console.log(localMessage);    // localMessage is not defined
</script>

The `localMessage` variable above is defined inside a function, so it can only be used within that function.

Everything else is defined globally and can therefore be used in other JavaScript files loaded at the same time.

While this isn't an issue for experienced programmers, a key point to remember is that variables and functions must be defined *before* they are used.

They are resolved in the order they are loaded, so they must be defined before being used within a file, etc.

WHEN YOU DON'T WANT TO DEFINE GLOBAL VARIABLES OR FUNCTIONS

When working in teams or frequently using external libraries, you may want to avoid leaving global definitions to prevent conflicts.

In such cases, you can use immediately invoked functions (IIFEs) to create seemingly local definitions.

When you want to avoid global scope

(function(){
    var testMessage = 'test message';    // local
    function testFunction() {
        console.log('test function message');    // local
        var localMessage = 'local message';      // local
    }
})();

console.log(testMessage);    // not defined
testFunction();    // not defined

When you want to define globally from within an IIFE

(function(){
    testMessage = 'test message';    // global
    testFunction = function() {
        console.log('test function message');    // global
        var localMessage = 'local message';      // local
    }
})();

console.log(testMessage);    // test message
testFunction();    // test function message

To explain the above, we've omitted the `var` keyword when declaring the variables.

By omitting `var`, the variables are defined as properties of the `window` object.

(function(){
    window.testMessage = 'test message';    // global
    window.testFunction = function() {
        console.log('test function message');    // global
        var localMessage = 'local message';      // local
    }
})();

console.log(testMessage);    // test message
testFunction();    // test function message

The `window` object is a global variable set for each browser screen (or tab).

SUMMARY

This topic is about variable scope. Understanding scope and striving for code with minimal global pollution will demonstrate your proficiency.

Furthermore, if you delve into concepts like constructors and prototypes, you can truly be considered an engineer skilled in handling variables and functions.

What does 'fn' in jQuery.fn mean? How to use $.fn [jQuery]

RECOMMENDED JQUERY BOOKS

Many jQuery books are outdated. However, jQuery itself continues to evolve.