Within my Google Script Project I got two GS files Code.gs and other.gs.
code.gs looks like
var globalSettings = {};
settings();
function settings(){
other();
globalSettings.fileName = "file";
console.log("settings was executed");
}
function primary(){
console.log("primary was executed");
}
other.gs looks like
function other(){
console.log("other was executed");
}
when I run the function primary I get
ReferenceError: other is not defined
settings # Code.gs:5
(anonymous) # Code.gs:1
when I move the function other to the file code it works. Could someone explain why? Is there any way the other file could be anywhere in the project?
Explanation:
Everytime you call a function (in any script in your project), the global variables are automatically executed.
This is why if you define var globalSettings = {} as a global decleration, every time you run any function in the project, all the global calls will be executed and therefore globalSettings will be set to an empty object and this is why I don't use global variables.
The global call other and the function decleration other need to be in the same gs script in order to work. Or you could simply call other from within the functions settings or primary and in this way other can stay in a separate script.
For example this would work perfectly fine:
code.gs
// define global variables
var globalSettings = {};
// adjust global variables here as a helper function
function settings(){
other();
globalSettings.fileName = "file";
console.log("settings was executed");
}
// main function to be executed
function primary(){
settings(); // call settings
console.log(globalSettings.fileName);
console.log(globalSettings.date);
console.log("primary was executed");
}
other.gs
// make additional adjustments to the global variables
function other(){
globalSettings.date = "today";
console.log("other was executed");
}
Suggestion:
A better idea to make sure you don't execute your global declerations, is to use the Class PropertiesService class to store some script or user data and then you can retrieve them either globally or locally (inside the functions) and this will make sure you won't execute them accidentally upon every execution as it is the case for the global declerations.
Related
Following is a sample code created based on the scenario. showData() function is defined inside a javascript load function. I wanted to call showData() from another file maybe on a button click. I know this will work if the showData is made global. It's not possible to make the function global, as in this scenario it's a dynamically generated code. Is there anyway in JS that allows to call such functions ?
// Not possible to change the structure of this file as its coming dynamically
window.addEventListener("load", function() {
showData(); // 1st time call
function showData() {
console.log('starting execution')
}
});
// Calling from another file
showData(); // 2nd time call - not possible
No.
The function is declared inside another function. Its scope is that function.
Unless you change that code to make it a global, it isn't accessible from outside the containing function at all.
If the structure of the code can't be changed, perhaps you could try attaching your function to the global window object, like:
window.addEventListener("load", function() {
// attached to window
window.showData = function() {
console.log('starting execution')
};
window.showData(); // 1st time call
});
// Calling from another file
window.showData();
But make sure the second call (from the other file) has a little bit of a delay (remember the eventListener has to be attached to the window first, before the function becomes available).
You could try:
// second call
setTimeout(function() {
window.showData();
}, 1000);
I read some JS module design patterns recently. I came across this small code snippet as below.
(function(window) {
var Module = {
data: "I'm happy now!"
};
window.Module = Module;
})(window);
Still not quite understand this code well, my questions are:
How to use/call this module outside this particluar JS file? Need I
assign a variable to this module? e.g. var module1 = (...)(...);
Could anyone explain what the window parameter here stands for?
Is it a good practice to have two/three such kind of modules in the
same file?
The main reason to create an anonymous function in this case is to prevent global object pollution. It's not really a module pattern.
The problem arise when you declare a variable. Without the function scope, the variable will be added to the global object (window). If you were to declare the variables within a function. It would add the variable to the function scope without polluting the global object window.
What happen is that a javascript file could add a variable named foo and on a different file use that variable named foo too. Unless you really want to have a variable shared by two javascript files, it would probably create conflicts and bug that are difficult to fix.
For example: a.js
var foo = "one"
b.js
var foo = "two"
c.js
alert(foo)
In this case, the alert box might show either "one" or "two", depending of the order in the javascript files are included.
But having this a.js:
(function () {
var foo = "one"
})()
b.js
(function () {
var foo = "two"
})()
c.js
(function () {
alert(foo)
})()
This would create an error as you cannot alert a non declared variable.
One way to detect undefined variables, is to make sure to execute the javascript code in strict mode.
To do that, add the string "use strict" at the top of the file or function.
function () {
"use strict"
...
}
Undeclared variable will raise errors and it should be possible to fix the code that way.
Also, if you forget to declare a variable with the var keyword, it might end up adding the variable to the global scope even if the code is scoped into a function. The only way to prevent global scope pollution is to run the code in strict mode.
In the code snippet that you provided, the module with name Module is explicitly added to the window object. You can access the window object from any place in javascript unless the window name is ghosted by an other variable.
Now, back to the modules. If you want to define modules, it can be done in many ways. As an exemple, you could create an object on the window object called modules. In this object, you'll insert your modules.
module.js
window.modules = {}
foo.js
(function (window) {
var module = {}
...
window.modules.foo = module
})(window)
This variant isn't super good as you have to manually add the module to the modules object. You have to manually modify the window object, and that can be subject to errors.
modules.js
window.modules = {}
function define(name, constructor) {
var module = {exports: {}}
constructor(module)
window.modules[name] = module.exports
}
function require(name) {
return window.modules[name]
}
foo.js
define("foo", function (module) {
module.exports.one = function () {
return 1
}
module.exports.plus = function (a, b) {
return a + b
}
})
bar.js
define("bar", function (module) {
module.exports = function () {
var foo = require("foo")
return foo.plus(foo.one(), foo.one())
}
})
This is a module definition that looks a bit like module defined with http://requirejs.org/. It is quite basic as it doesn't take into account module dependencies so if bar is loaded and used before foo. Then the require method won't be able to return the module.
Also, if you want to store modules without having them visible into the global scope, you can only define the require and define method on the window object and hide modules into an anonymous scope like this:
(function (window) {
var modules = {}
function define(name, constructor) {
var module = {exports: {}}
constructor(module)
modules[name] = module.exports
}
function require(name) {
return modules[name]
}
window.define = define
window.require = require
})(window)
This way, define and require are the only function that can give you access to modules. Other modules won't be able to modify other modules without requiring them first. This can be useful when using third parties script that could conflict with your module system.
In fact this is not a module, but a Self-Invoking Ananymous function or an Immediate function which gets an object in parameter and assign a Module property to it:
The page window is a parameter passed to this function.
So an object named Module containing a data property is assigned to window.
JavaScript Self-Invoking Functions:
A self-invoking expression is invoked (started) automatically, without being called.
Function expressions will execute automatically if the expression is
followed by ().
You cannot self-invoke a function declaration.
You have to add parentheses around the function to indicate that it is
a function expression
So As you can see Immediate Functions can't be called as its name states it will be immediately executed and by its self, no other function or scope can execute it.
For better reference take a look at :
Javascript Self Invoking Functions.
Self-Invoking Functions section in JavaScript Function Definitions.
And concerning your last question about its benefits and good practices as shown on the given Article reference:
Where to use self-executing functions?
One obvious situation is when you want to auto-run a function like I
showed in above example but that is trivial. If you are in a situation
where you want to run a piece of code repeatedly like updating
something in the database based on user interaction or fetching
records from database every 10 seconds or you want to load new stories
via ajax similar to how facebook does on its homepage or some other
similar situation, one would normally go for setInterval function
something like this:
setInterval(doStuff, 10000);
Above, doStuff function will get called every 10 seconds. That is the
normal approach most developers seem to go with. However, there is a
huge problem with that.
The setInterval will call doStuff function exactly at specified time of 10 seconds again and again irrespective
of whether doStuff function actually finished doing what it is
supposed to do. That is bad and will certainly get you into unexpected
results.
That is one example of where setInterval is "bad" and should be
avoided.
This is exactly where self-executing functions come in handy. We can
do the same task with the help of self-executing function along with
setTimeout like this:
function foo(){
// your other code here
setTimeout(foo, 10000);
}();
This code will also repeat itself again and again with one difference.
setTimeout will never get triggered unless doStuff is finished. A much
better approach than using setInterval in this situation.
Calling it from another file:
And if this function is on another file it will be called automatically if this file is included.
Why do we use Self-Invoking Functions in JavaScript?
And if you ask yourself why do we use these functions, self-invoked function are used to manage Variable Scope.
Take a look at the answer here for further information.
I am working on a JavaScript library while I need to load different modules accordingly, I use the callback to load different scripts:
Just add the main script in the page:
<script type="text/javascript" src="main.js"></script>
main.js:
(function () {
var actionForT2 = function (fun) {
fun && fun.apply(this);
}
var loadCallback = function (name, obj) {
if (name == "t2") {
actionForT2(obj);
}
}
window.__jsload = loadCallback;
var loadJs = function (js) {
var head = document.head || document.getElementsByTagName('head')[0];
var script = document.createElement("script");
script.setAttribute("src", js);
script.setAttribute("type", "text/javascript");
head.appendChild(script);
}
loadJs("js/t2.js");
})();
t2.js:
__jsload('t2', function () {
console.info("t2 loaded");
console.info(loadJs);
})
Now the t2.js will be loaded as expected. And I got the output:
t2 loaded
ReferenceError: loadJs is not defined
That's to say, the loadJs function is not accessed for the function defined in t2.js, then I wonder if I can change the Runtime context of the loaded function, for example, when the loaded function is being called:
fun && fun.apply(this);
Is it possible to make the call of fun under the context of current anonymous function, then all the defined variables, functions like the loadJs and etc can be accessed by fun without export them to the window?
Why I am interested in this kinds of solution is that I found google map use the callback, for example, when using google map v3, the following script will be loaded to the page:
https://maps.gstatic.com/maps-api-v3/api/js/18/3/main.js
Then another module map will be loaded:
https://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/3/{map}.js
While when deep in to the codes, I found that the {map}.js can access the variables defined in the main.js. But I can not find the how the magic happen.
Is it possible to change function runtime scope…I wonder if I can change the Runtime context of the loaded function, for example, when the loaded function is being called
No. Javascript is lexically scoped, so scope is entirely dependent on where functions are created in the code, not where they called from or how they are called
> fun && fun.apply(this);
That will only set one parameter of the function's execution context, its this parameter.
There is general confusion about the term context. In ECMA-262 (the standard for the language underpinning javascript) context is used exclusively in execution context, which is the entire environment inside a function and includes its this parameter.
The call and apply methods allow you to specify the value of a function's this, that's it, they have no other effect on the execution context (which is why this should never be called "context"). They do not have any effect on identifier resolution, which proceeds based on scope regardless of the value of this or where a function has been called from.
You might find the following article interseting: Identifier Resolution, Execution Contexts and scope chains.
You could make it global. Since you already have window.__jsload you could attach it there.
__jsload.loadJs = loadJs;
// // access like this :
// console.info(__jsload.loadJS);
Or you could pass it to your callback when you call it from __jsload.
__jsload('t2', function (loadJs) {
console.info("t2 loaded");
console.info(loadJs);
}
I am learning node.js and JavaScript. Following is the code. I found the var http is outside the function start2. I am wondering why it works? Since we only exports function start2, right?
Is this some concept about closure? (I've tried put the var http inside the start2. It works for sure.)
var http = require('http');
function start2(){
function onRequest(request,response){
console.log("Request recieved");
response.writeHead(200,{"Content-Type":"text/html"});
response.write("<h1>Hello world</h1>");
response.end();
}
http.createServer(onRequest).listen(8888);
console.log("Server has started.");
}
exports.start=start2;
You could put var http = require('http'); inside your function but most often that's not how people code it. People place it at the top like you have it. Why? This is a call to the module system to load module http. Most often, you want to do this once and make it available for your entire file. If you are doing to use this module multiple times in your file you don't want to call require again and again.
If a module it is rarely used and perhaps expensive to load, then it may make sense to have the require call inside a function, instead of paying the cost of loading it each and every time:
function calledUnderExceptionalCircumstances() {
var expensive = require('expensive');
expensive.foo();
}
In the code that you have attached, require loads a module into the global scope. Since you have defined function start2 in the same scope, due to closure, var http is available inside function start2.
In the second code snippet you have provided, due to closure, the reference to the variable env_var1 is made available inside f1, which is getting re - assigned.
If at all, instead of directly re - assigning env_var1 if you are redefining env_var1 as var env_var1, var env_var1 becomes a local variable and it's scope is confined within f1 and inside f2, it would print "aaa" instead of "bbb" as you would have expected.
Hope this helps.
i'm following along a book and I have 2 javascript files. Both are in the HTML file as:
<script src="playlist_store.js"></script>
<script src="playlist.js"></script>
however, when I try to call a function from playlist_store.js inside of playlist.js chrome debugger says "uncaught reference error. loadPlaylist is not defined. loadPlaylist() is the function from playlist_store.js
I thought there might be a typo somewhere but I don't think there is. Does playlist.js actually need to somehow import or include / require the playlist_store.js ? Is the browser not smart enough to somehow link them so the functions in one you can call from another?
Defining a function like follows
function myaction () { }
is a named (private) function.
It is better to write a (private) function assigned to a variable:
var myaction = function () { };
Now what you need is a function, that is assigned to a variable in the global object:
myaction = function () { };
// or strict:
window.myaction = function () { };
It is now a global (public) function, so you can use it outside of your defining .js.
Beware that the first example, a function statement doesn't have a semicolon. Using the function operator as in the other examples, you need a semicolon.