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]