I'm still getting to grips with some of the JavaScript variable handling and I'm a bit confused over this.
I have a variable declared in a file like this:
(function (myControls, $, undefined) {
var selectedLifeArea;
...
But when looking for these in Firebug they aren't listed under the myControls "namespace" as I expected, only the functions are listed. Why is that?
Your code is wrapped in it's own scope.
Try adding some breaks in the js debugger, then you can read the variables.
Here is a brief description:
var globalVariable;
(function () {
var localVariable;
// can access both `globalVariable` and `localVariable`
...
)();
// can only access `globalVariable`
Related
I've been seeing a number of people wrapping their controllers with:
function(){
//CODE
}();
What's the benefit / goal there?
That isn't really anything related directly to Angular, it is a JS pattern know as an Immediately Invoked Function Expression.
It is one of the most useful patterns in JavaScript, primarily because of:
Code Encapsulation
Since functions have closures in JS, we can use this pattern to create private data very easily:
var index = (function iife() {
var counter = 0; // <-- this is private, only available inside the closure of inner()
return function inner() {
return counter++;
};
})();
console.log(index()); // 0
console.log(index()); // 1
console.log(index()); // 2
console.log(index.counter) // undefined
We can also pass arguments into an IIFE, which allows us to control how we access the outside context of our IIFE. For example, to make sure $ is actually the jQuery object within your code:
(function ($) {
// here have access to the global jQuery as $ regardless of what window.$ is and
// how many libraries are trying to use $
})(jQuery);
By combining the two ideas above, IIFEs can also be used to implement the module pattern, which is the basis for how RequireJS and NodeJS separate code:
var myModule = (function iife(initData) {
// we can use initData here to initialize our module if necessary
var module = {};
// private vars ...
var privateVar1, privateVar2;
// private methods ...
function privateMethod() {
console.log('yeeey');
}
module.somePublicProperty = 1;
module.somePublicMethod = function() {
privateMethod();
};
return module;
})(/* pass initialization data */);
myModule.somePublicMethod(); // 'yeeey'
The reason you'll find a lot of JavaScript code wrapped in an anonymous function is to isolate it from other code on the page.
The following code will declare a variable called name on a global scope:
var name = "Hello World";
By using that code, any other script on the page attempting to use a variable called name could potentially get an unexpected value of "Hello World" because your script declared it as "Hello World".
By wrapping that code in an anonymous function, you keep the code from conflicting with other variables called name:
(function() {
var name = "Hello World";
})();
In the example above, name is now only available inside of the scope of the anonymous function. It is not global, and therefore cannot conflict with other code on the page.
By wrapping your Angular module in an anonymous function, you prevent your code from conflicting with other code.
Additionally, other people who may use your code won't have to worry about it changing their global scope.
IMHO it's not necessary, even superfluous, as most controllers are already functions:
'use strict';
angular.module('MyApp').controller('AboutController', ['$scope'
function ($scope) {
$scope.title = 'About Us';
}
]);
Everything #nem035 and #tcasey said is correct but it also have another side effect.
If you use tools like Grunt or Gulp it also allow you to have working dists to put in production.
If you do not use Immediate Invoke Pattern you'll most likely have minification problems like:
State X is already defined!
Unknown provider
. . .
I suggest you to wrap all your js modules with this pattern.
I hope I've been helpful.
There are many benefits of you immediately-invoked-function-expression short IIFE and it's best practice to use it. This way each of angular service or controller become isolate and you don't run into global variables as it can happened if you don't use IIFE.
read more about it
This question already has answers here:
Console access to Javascript variables local to the $(document).ready function
(8 answers)
Closed 6 years ago.
I'm using a shopping cart api to build an ecommerce website. The creators made an sdk and then you have to make your own .js file for some other functions.
While debugging I would insert a console.log(etc..) anywhere in my .js file so that I could debug object options and etc..
But I would like to be able to use the sdk as a live tool, so instead of having to edit my .js file with new console.log() lines, I'd rather just be able to type object.color_code and have the console output that string for the object color code. At the moment though it just gives me uncaught reference error, object is not defined.
I think this is because my custom .js file has all of it's script inside a $(function() { EVERYTHING }); SO, when I try to call anything in EVERYTHING from the console it says it's undefined, but if I just used console.log inside EVERYTHING it would work. So is there a way I can get around this?
Feel free to explain why it isn't working but I'd like a way to enable this, don't tell me there isn't a way, even if I have to prefix what I want with the .js file it's coming from each time, I don't mind
You were correct in that all of your variables inside the function are only being defined locally, and thus can't be accessed via the console. However, in Javascript there are at least two options for setting global variables from inside functions; If you use these to declare a variable you want to access from outside the function, it will work:
Assign a value to an undeclared variable: varname=value;
Assign the variable to the window object: window.varname=value; or window['varname']=value;
A possible workaround is to expose the object(s) that you want to debug in the global scope:
(function() {
var privateStuff = { foo: 'bar' };
// make privateStuff public for debugging purposes
window['debugObject'] = privateStuff;
})();
document.write(debugObject.foo);
If you want to expose several objects with rather common names that are likely to collide with existing ones, make sure to expose them within an object with an uncommon name rather than directly:
(function() {
var x = { str: 'this is' },
y = { str: 'a test' };
window['debugObject'] = {
x: x,
y: y
};
})();
document.write(debugObject.x.str + ' ' + debugObject.y.str);
If you're happy to change the source file then you could export whatever you want to access from EVERYTHING as a global.
$(function() {
//EVERYTHING
...
window.Ireply = window.Ireply || {};
window.Ireply.object = object;
...
});
console.log(Ireply.object); // some object
You can change a declaration like
$(function(){
var cart = {};
})
To
var cart;
$(function(){
cart = {}
})
Or
$(function(){
var cart = {};
window.cart = cart;
})
But you will want to avoid polluting global namespace. You will also want to be careful about using globals inside callbacks or loops where you can run into unexpected behaviors since local variables scope is often important to be kept local
I was probing my code for errors with JSLint and so far I managed to fix all bugs except the problem when my global application variable is undefined.
I was using this code before JSlint which worked properly:
var APP = APP || (function {
return {
init: function () {
}
};
}(window.document));
then I would call
APP.init();
to initialize. But JSlint doesn't like global variables so I changed my code to this:
(function (global){
var APP = {
init: function () {
}
};
return APP;
}(window.document));
This code passes the JSLint test with no problem, but then
when I call APP.init(); it says that APP is used before it was defined, which is true.
What would you recommend so that I don't use global variables but still create my application object, while my code passes JSlint test?
First code
In your original code, the actual error you would have gotten was
#1 'APP' used out of scope.
var APP = APP || (function() { // Line 1, Pos 11
It is not because JSLint hates global variables, but because it doesn't like the variable being assigned to it is defined in the same var statement.
Changing your code to use a different variable name would fix this problem
var app = APP || (function() {...}(..));
but then, one would expect that APP is already defined in the current scope. Otherwise you will get
#1 'APP' was used before it was defined.
Second code
It doesn't work because, APP is visible only inside the function object you created. It is not visible anywhere outside it. Since you want to define APP in the global scope, you just have to attach it to the window object, like this
(function(global) {
global.APP = {
init: function() {
}
};
}(window));
Then
APP.init()
will work fine.
Instead of going through all these, you can straight away define APP like this
window.APP = {
init: function () {
"use strict";
...
}
};
(function (global){
var APP = {
init: function () {
}
};
return APP;
}(window.document));
the above creates a scope/closure, so that only code inside your anonymous function can access the APP variable. JSHint has settings so you can set acceptable globals (such as jquery etc), I'd add APP to that and if the rest pass you know you only have that one variable/module as global. If you are using any 3rd party libs chances are you already have several global vars anyway
Before you give up on JSLint, know that it doesn't mind globals at all; it just wants you to declare them with a special format so that others reading your code know exactly what's going on.
The only "trick" here is if there's a chance your global APP isn't initialized yet and you really need to check for its "truthiness", as you do with APP = APP || (function.... Then you do need to use the window (or whatever your global object is -- it's different if you use Node, for example) prefix trick.
Here's how:
/*jslint white:true, sloppy:true, browser:true */
/*global APP */
window.APP = window.APP || (function () {
return {
init: function () {
window.alert('JSLint doesn\'t like empty blocks');
}
};
}(window.document));
APP.init();
And JSLint is happy!
I'm not against JSHint in theory, but that same flexibility that allows you to set all sorts of extra settings also tends to erode conformity, which is largely what I find the best benefit of a code linter to be. Give both a good, solid run, and see which you like best!
Someone on the RubyRogues podcast once said "Learn CoffeeScript because CoffeeScript writes better javascript than you do." Sorry, can't remember who said it...
So, I took a very simple WORKING javascript function:
togglingii.js
function pdtogglejs(id) { $('div .partybackground').removeClass("hidden"); }
Which is being called by this line:
Read More...
Then I converted it into this coffeescript:
toggling.js.coffee
pdtogglecs(id) ->
jQuery('div .partybackground').removeClass("hidden")
and changed the html to reference the pdtoggle*c*s instead of pdtoggle*j*s.
I can see BOTH of them just fine in my application.js file:
(function() {
pdtogglecs(id)(function() {
return jQuery('div .partybackground').removeClass("hidden");
});
}).call(this);
function pdtogglejs(id) { $('div .partybackground').removeClass("hidden"); }
;
(function() {
}).call(this);
However, only the pure javascript works. The coffeescript always returns Uncaught ReferenceError: pdtogglecs is not defined.
Based on other stackoverflow questions it must be some sort of namespace error. Probably because of the way pdtogglecs is, itself, inside of a function?? However, I have tried defining the coffeescript function with: window.pdtogglecs, this.pdtogglecs, root.pdtogglecs and the coffescript one always fails with that error.
What am I missing??
Thanks!!
You have two problems, one is a bit of CoffeeScript syntax confusion and the other is the namespace problem that you know about.
We'll start by sorting out your syntax confusion. This:
f(x) -> ...
is interpreted like this:
f(x)(-> ...)
So when given this:
pdtogglecs(id) ->
jQuery('div .partybackground').removeClass("hidden")
CoffeeScript thinks you're trying to call pdtogglecs as a function with id as an argument. Then it thinks that pdtogglecs(id) returns a function and you want to call that function with your -> jQuery(...) function as an argument. So it ends up sort of like this:
callback = -> jQuery(...)
returned_function = pdtogglecs(id)
returned_function(callback)
And that's nothing like your original JavaScript. You want to create a function named pdtogglecs which takes id as an argument and then runs your jQuery stuff:
pdtogglecs = (id) ->
# -----^ this is sort of important
jQuery('div .partybackground').removeClass("hidden")
You can see what's going on by looking at the generated JavaScript.
The namespace problem is easy and you can probably figure that out based on the other question you found. However, I'll take care of it right here for completeness.
CoffeeScript wraps each .coffee file in a self-executing function to avoid polluting the global namespace:
(function() {
// JavaScript version of your CoffeeScript goes here...
})();
That wrapper makes everything scoped to the .coffee file. If you want to pollute the global namespace then you have to say so:
window.pdtogglecs = (id) -> ...
You can also say:
#pdtogglecs = (id) -> ...
but I prefer the explicitness of directly referencing window, that also saves you from worrying about what # (AKA this) is when you're code is parsed.
I'm testing a js function that uses functions from other js files.
One of my external js files has a function defined as such:
functionname.functionextension = function () {.....}
when testing using jasmine, and calling functionname.functionextension, it complains that functionname is not defined. I think it believes that functionname is an object..
I know that one way to get around this is to modify the function name but I can't do that. Is there any other way?
Thanks
In javascript, all functions are objects. In the external js file, the function is probably defined like this:
var functionname = functionname || {};
functionname.functionextension = function () {
...
};
If you're getting a script error that functionname is not defined, there is either an error in the external javascript or you are not calling some initialization function that the external script requires to set up its objects.
It worked for me...u need to call function by its full name like functionname.functionextension() while calling.