Execute functions in external files: global variables, functions and immediate functions [JavaScript]

Calling a function defined in a separate file is easy with JavaScript.
Basically, the scope of the definition of a function or variable written outside the function is global.
Conversely, you might use an immediate function to control global variables.

Define global variables / functions

Here, without thinking about anything, variables and functions outside the function can be accessed from anywhere as global.

<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 above variable localMessage is defined inside the function and can only be used inside the function.
Others are defined globally, so they can be used with other JavaScript files that are loaded at the same time.
If you’re used to programming, that’s fine, but the caveat is that you use variables and functions, which you have defined before.
It will be resolved in the order in which it is read, so it must be defined before it can be used in a file or the like.

If you don’t want to define global variables / functions

If you are working with multiple people, or if you are using a lot of external libraries, you may not want to leave the definition globally to avoid duplication.
In that case, use an immediate function or the like to define it in a pseudo-local manner.

If you don’t want to be global

(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

 

If you want to define globally from within an immediate function

(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

In the explanation above, the variable definition var is omitted.
By omitting var, it is defined as a property of the window object.
You can also explicitly describe it as follows.

(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

window is a global variable set for each screen (tab) of the browser.
Click here for details
Web technology for developers Web API Window

Summary

It’s about the scope of variables.
From here, if you understand the constructors and prototypes, you can say that you are an engineer who is good at handling variables and functions.
I would like to introduce that area in the future.
Please see the related articles below.
What does fn in jQuery.fn mean? How to use $.fn [jQuery]


Leave a Reply 0

Your email address will not be published.

1 × one =