Local variable lost in closure - javascript

The variable cont is being lost in the following:
__factory.setupMenu = function(cont,input,multiSelect,exclusive,popMenu){
var __menu = {multiSelect:multiSelect};
spotter.events.setEventTrigger(input,'change');
__menu.exclusive = {inputs:[],values:exclusive||[],simpleValues:[]};
alert(cont);//<-- is defined here
window.popSelectComponent= cont;//<-- saved it globally to test reference
return function(ajaxResult){
var data = ajaxResult.template.response||[];
var info = {},l=data.length;
while(--l > -1){
info[String(data[l].value)] = data[l].abbr||data[l].name;
}
var textTarget;
alert(window.popSelectComponent);//<-- this is defined as expected
alert(cont);//<-- is now undefined
alert(input);//<-- this is defined as expected
if(!(textTarget = cont.querySelector('[data-pop-selected]'))){textTarget = cont;}
if(!input.popSelectTemplate){
spotter.data.bindElementToInput(textTarget,input,function(content){
content = content.split(',');
var l=content.length;
while(--l > -1){
content[l] = info[content[l]];
}
content = content.join(',');
return (content.length ? content : 'ignore');
});
}
else{
var cont = document.createElement('SPAN');//<-- PROBLEM IS CAUSED HERE. HOISTING IS CAUSING CONT TO BE UNDEFINED AT CLOSURE START
cont.className="multi-select";
cont.appendChild(cont);
//removal function
var remove = (function(input){
return function(e){
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
if(input.value !== input.spotterPopSelectDefaultValue){
input.value = input.value.removeListValue(this.getAttribute('data-id'),',');
spotter.deleteElement(this);
if(input.value === '' && input.value !== input.spotterPopSelectDefaultValue){
input.value = input.spotterPopSelectDefaultValue;
input.eventTriggers['pop-select-change']();
}
}
};
}(input));
input.spotterPopMenuOptions = __menu;
input.addEventListener('pop-select-change',(function(cont, info, template){
return function(){
var HTML = '';
this.value.split(',').forEach(function(val){
HTML += template.replace('$[ID]', val).replace('$[NAME]', info[val]);
});
cont.innerHTML = HTML;
spotter.castToArray(cont.children).forEach(function(el){ console.log('option el',el); el.addEventListener('click',remove,false); });
console.log('input.spotterPopMenuOptions',input.spotterPopMenuOptions);
};
}(cont, info, input.popSelectTemplate.innerHTML)),false);
}
....
So running var func = __factory.setupMenu(...)({template:{}}) I am receiving an error message that cont is undefined while window.popSelectComponent is defined like expected. I tried changing the name of cont thinking I was overlooking something that was changing the value but that did not work either.
After running the function, I check cont in the context that initially created this closure and cont is still defined so it is not a matter of an object reference being lost as far as I can tell.

Perhaps a highly simplified example would make the problem more obvious:
var outer = function(theVariable) {
console.log("In the outer function, theVariable is", theVariable);
var inner = function() {
console.log("In the inner function, theVariable is", theVariable);
if (false) {
var theVariable = 2;
}
};
inner();
}
outer(1)
In the outer function, theVariable is 1
In the inner function, theVariable is undefined
As you have seen, the fact that a different variable with the same name has been declared (even though not initialized) in the inner function hides the properly initialized variable in the outer function that would have otherwise been visible.
You might think that because the variable is declared in a block, it would not affect other parts of the function. No, var is function scoped, not block scope.
This flaw has been addressed in modern versions of Javascript, and the var keyword has been superseded by let, which has the block scope you were expecting. var is kept for backwards compatibility, but you should not use it in new code.

Related

Javascript, Update variable on input change

I'm not very experienced with JavaScript (This is my first real thing I've made with it), so my syntax is probably horrendous. I'm trying to get 5 variables to update whenever the input box is changed, however for some reason, they just won't update! I've Googled for solutions but nothing seems to work
document.getElementById("name").addEventListener("keyup", updateName);
document.getElementById("id").addEventListener("keyup", updateID);
document.getElementById("quantity").addEventListener("keyup", updateNumber);
document.getElementById("buybase").addEventListener("keyup", updateBuy);
document.getElementById("sellbase").addEventListener("keyup", updateSell);
Here's a JSFiddle
http://jsfiddle.net/q1w6v12u/
Here's the live site
http://ts-mc.net/pricing/chest.html
You have declared all those variables as local variables(since you have used var inside the method), which exists only inside the methods in which they are declared, declare them as global variables.
So now you have a global variable and a local one which exists only inside the method, so any changes you have done to the variable inside the method will not get reflected in the variable which is in the global scope.
function updateName() {
ITEMNAME = document.getElementById("name").value;
}
Why are you declaring variables twice:
var ITEMNAME = "NULL";//first
function updateName() {
var ITEMNAME = document.getElementById("name").value;
^^^==========>second
}
Just do this:
var ITEMNAME = "NULL";
function updateName() {
ITEMNAME = document.getElementById("name").value;
}
To solve your immediate issue with variables not updating you could change your JS to this:
...
function updateName() {
ITEMNAME = document.getElementById("name").value;
}
function updateID() {
ITEMID = document.getElementById("id").value;
}
function updateNumber() {
NUMBER = document.getElementById("quantity").value;
}
function updateBuy() {
BUYCOST = document.getElementById("buybase").value;
}
function updateSell() {
SELLCOST = document.getElementById("sellbase").value;
}
function Replace() {
BUYCOST = BUYCOST * 4 * NUMBER;
SELLCOST = SELLCOST / 4 * NUMBER;
var DONE = BASE.replace(/ITEMNAME/igm, ITEMNAME);
var DONE = DONE.replace(/ITEMID/igm, ITEMID);
var DONE = DONE.replace(/NUMBER/igm, NUMBER);
var DONE = DONE.replace(/BUYCOST/igm, BUYCOST);
var DONE = DONE.replace(/SELLCOST/igm, SELLCOST);
document.getElementById("output").innerHTML = DONE;
}
The cause of the problem is due to you redefining your variables within function scope instead of using the ones already existing in the parent.
There are some issues with your HTML also, with not terminating your elements properly for example <input ... />

Why I can't pass parameter into .then function (AngularJS)?

I have this function
$scope.updateValue = function(key, selectedProductname, numberUsed){
var selectedKey = key;
var selectedProductname = selectedProductname;
var numberUsed = numberUsed;
var useageRef = ref.child('/useage/');
var updateObj = $firebase(useageRef);
var myData = {
productName : selectedProductname,
numberUsed : numberUsed
}
var decrementLocation = inventoryRef.child(key + '/amount')
updateObj.$push(myData).then(
decrementLocation.transaction(function (current_value, numberUsed) {
console.log(numberUsed);
return (current_value || 0) - 1;
})
);
}
I pass "numberUsed" into $scope.updateValue and use it inside myData and then push it to the server and there is no problem with that but when I use it at this line "decrementLocation.transaction(function (current_value, numberUsed) {" and then I try to console.log(numberUsed); the console says undefined. Why? and how can I use numberUsed in this line "decrementLocation.transaction(function (current_value, numberUsed) {" ? how to code it successfully?
There is a number of things going on here.
First of all, in the following code:
decrementLocation.transaction(function (current_value, numberUsed) {
console.log(numberUsed);
return (current_value || 0) - 1;
})
You are re-declaring numberUsed as the second parameter of the .transaction() callback function. Thus, whatever numberUsed was outside of this small function does not matter. If you want to use the var from the surrounding function, you would need to do:
decrementLocation.transaction(function (current_value) {
console.log(numberUsed);
return (current_value || 0) - 1;
})
Second of all, there is no closing ; to your .transaction() function. I don't think it will materially affect your operating here, but cannot be sure. This should be run through jslint/jshint.
Third, you are redeclaring numberUsed inside the entire surrounding $scope.updateValue() function.
$scope.updateValue = function(key, selectedProductname, numberUsed){
var numberUsed = numberUsed;
So you are declaring a new variable numberUsed, whose value will be, well, numberUsed, but it is a new var, so it should be set to undefined. If it is set to anything at all, that would be surprising. If you need the var, then you should do:
$scope.updateValue = function(key, selectedProductname, numberUsed){
var nu2 = numberUsed;
or something similar. But even then, why bother to redeclare the var? It is copied by value anyways.
A good linter will catch any of this.

Variable Scope - jQuery/JavaScript

I'm having a bit of trouble with variable scope within jQuery/JavaScript. I'll just give a code example demonstrating my issue as it's probably easier to understand than trying to explain with words.
var example_1 = function() {
row = 10;
}
var example_2 = function() {
something.click(function(){
var something_3 = function() {
alert(row);
}
something_3();
}
}
The problem is, the row variable cannot be accessed within the something_3 function. I have other variables from the example_1 function being accessed in the example_2 function, but when put in the something_3 function it no longer works. Thanks for any help!
Edit: Added extra code to show what works and what isn't. Row is defined within the Build function as are board and mines. Board and mines can be accessed but row cannot.
var build = function(row) {
row = typeof row !== 'undefined' ? row : 5;
board = $('.container');
mines = [1,2,3,4];
}
build();
var start = function() {
var tile = $('.container div');
tile.click(function() {
var this_index = $(this).index();
var has_mine = $.inArray(this_index, mines);
var scan = function() {
alert(row);
}
if (has_mine > -1) {
add_alert("Has mine, you're dead!");
} else {
scan();
$(this).html('Clear!');
}
});
var add_alert = function(msg) {
board.append("<span class='alert'>" + msg + "</span>")
$('body').append("<div class='blackout'></div>");
}
}
start();
var build = function(row) {
row = typeof row !== 'undefined' ? row : 5;
//[...]
}
rowis not being defined as a variable, but instead is a parameter. This way, it doesn't leak as a global variable.
Simply changing the name of parameter should work:
var build = function(rowValue) {
row = typeof rowValue !== 'undefined' ? rowValue: 5;
//[...]
}
However, you shouldn't be using implicitly global variable. Global variables are already bad enough.
Option one, declaring variables:
var row, board, mines;
var build = function(rowValue) {
row = typeof rowValue !== 'undefined' ? rowValue : 5;
board = $('.container');
mines = [1,2,3,4];
}
Option two, using the global identifier:
var build = function(row) {
window.row = typeof row !== 'undefined' ? row : 5;
window.board = $('.container');
window.mines = [1,2,3,4];
}
Multiple issues:
If you don't specify var in front of a variable inside a function it becomes a global variable
row doesn't get intialzed because you didn't call example_1(); yet
In an unrelated note, don't forget to use semicolons at end of the anonymous functions as it might be interpreted as self executing functions.
EDIT 2:
var build = function(row) {};
ok so your issue is the row variable is a parameter so isn't a global variable anymore. If you remove your row parameter / update variable name passed to build method, it will work.

error in making JSON in JavaScript

I am trying to make a JSON, but get a type error.
The error says, cannot set property 'apps' of undefined. This happens at the *.isFav = true
statement. If I remove the if statement it works ( the isFavt(*) statement).
Any help will be appreciated. Thanks!
pref.userid = username;
//systems
systems = [];
for(i=0;i<system.length;i++)
{
systems[i] = new Object();
systems[i].systemid = system[i];
systems[i].apps = [];
j = 0;
$('.save label').each(function ()
{
lst = $(this).text();
console.log(systems[i]);
systems[i].apps[j] = new Object();
systems[i].apps[j].name = lst;
systems[i].apps[j].href= findHref(lst.toLowerCase().replace(/ /g,'_'));
//seq
systems[i].apps[j].seq = j;
//check for favourites
if(isFavt(lst))
systems[i].apps[j].isFav = 'true';
else
systems[i].apps[j].isFav = 'false';
//check for default
if(isDef(lst) == true)
systems[i].apps[j].isDef = 'true';
else
systems[i].apps[j].isDef = 'false';
//subapps
j = j + 1;
});
}
pref.systems = systems;
return pref;
}
Most likely, your isFavt() function has a loop in it, that overwrites the i variable. JavaScript has no block scope and uses global scope if you do not declare your variables with var.
Replace
for(i=0;i<system.length;i++)
with
for(var i=0;i<system.length;i++)
and do the same in your isFavt function, because that is where the error comes from. Actually, do it with every variable you expect to be local to your function inside all your code.
Also, I highly recommend reading up on scoping in JavaScript.

javascript global var from ajax function

I'm using dajaxice to retrieve a json attribute - that I would like to be global. I'm not sure why my global var is always "undefined":
var recent_id;
$(function(){
recent_id = Dajaxice.ticker.get_home_timeline(get_home_timeline_callback);
alert(recent_id);
});
function get_home_timeline_callback(data){
if(data==Dajaxice.EXCEPTION){
alert('Error! Something happens!');
}else{
var parsed = JSON.parse(data.home_timeline);
var parsed_id = {'parsed_id':parsed[0].id_str};
console.log(parsed_id);
}
return parsed_id;
}
#dajaxice_register
def get_home_timeline(request):
home_timeline = oauth_req(
'http://api.twitter.com/1/statuses/home_timeline.json?count=1',
settings.TWITTER_TOKEN_KEY,
settings.TWITTER_TOKEN_SECRET
)
return simplejson.dumps({'home_timeline': home_timeline })
Is this a bad way to access a var to be used in another ajax function?
Seems like async issue. Modify your get_home_timeline_callback function as following
function get_home_timeline_callback(data){
if(data==Dajaxice.EXCEPTION){
alert('Error! Something happens!');
}else{
var parsed = JSON.parse(data.home_timeline);
var parsed_id = {'parsed_id':parsed[0].id_str};
console.log(parsed_id);
}
//debug
alert(parsed_id);
//since the value has come, now assign it to the global variable
recent_id = parsed_id;
}
It seems like the variable scope issue. The scope of the variable parsed_id is declared within the else statement within the { }, so its scope is within the else statement. And when you return the parsed_id outside the brackets it might be giving undefined.
Go through the scope of variables explanation here
Change your function as shown below.
function get_home_timeline_callback(data)
{
var parsed_id = "";
if(data==Dajaxice.EXCEPTION)
{
alert('Error! Something happens!');
}
else
{
var parsed = JSON.parse(data.home_timeline);
parsed_id = {'parsed_id':parsed[0].id_str};
console.log(parsed_id);
}
return parsed_id;
}
Now here the scope of the variable parsed_id can be accessed anywhere within function.
Hope this solves your problem if not sorry. This was my assumption that the scope might be affected.

Categories