Develop Reference

Javascript Function not executing/returning value

I have a function and I want to see what the value of index is. It gives me 0 however. I thought that was wierd so I put a console.log in function() to see if it was executing or not and I didn't recieve an output which tells me that function() isn't getting called. Not sure what I'm doing wrong.
function jsTest() {
var index = 0;
var counter = 0;
var obj = {};
obj.index = index; //obj.index = 0 at this point
var func = function () {
for (index = 0; index < 10; index++) {
counter += 2;
console.log(counter); //Doesn't execute for some reason
}
obj.index++;
};
obj.func = func; //executes function()
this.index++;
return index;
}
var x = jsTest();
console.log(x);

obj.func = func;
doesn't actually call func, it assigns the property func for obj to be the function func. If you want to call func, you should add parentheses afterwards, like
obj.func = func();

Avoid defining a function in a loop when using an IIFE

I have the following following code:
for (i = 0; i < 5; i++) {
this.hands[0].cards[i].img.on('mousedown', (function (i) {
var j = i;
return function (event) {
self.hands[0].cards[j].holdCard();
};
})(i));
}
This is working fine for my needs but JSHint is complaining:
[L1164:C10] W083: Don't make functions within a loop.
How can I keep JSHint happy by rewriting this differently?

You can replace the IIFE with a separate function outside the loop:
function createHandler(j, self) {
return function (event) {
self.hands[0].cards[j].holdCard();
};
}
for (i = 0; i < 5; i++) {
this.hands[0].cards[i].img.on('mousedown', createHandler(i, this));
}
Useful reference: JSLint Errors Explanation (thanks to user1671639 for the link).

Javascript - Variable updating

This is probably an easy question but it's late at night and I can't get my head round this.
here's my code
$(document).ready(function () {
var items = getNumber();
for (var i = 0; i < items.length; i++) {
var test = items[i].action;
test();
}
});
function getNumber()
{
var items = [];
for (var i = 0; i < 5; i++) {
var num = i * 10;
items.push({ id: i, number: num, action: function () { alert(i) } });
}
return items
}
Could someone explain to me why the alert output is always 5? I want the alert parameter to be the index at the time it is added to the array. It seems like it is being dynamic.
If you could also post a solution how i could get this to work i would be extremely thankful

This is a common issue with JavaScript variable scoping: new variables are only introduced in a new execution context and thus, in the problematic code, i is shared across all the action callbacks.
Anyway, here is the corrected code following the standard idiom:
function getNumber()
{
var items = [];
for (var i = 0; i < 5; i++) {
var num = i * 10;
items.push({
id: i, number: num,
// _i is a new variable for each callback
action: (function (_i) {
// use separate (one per callback) _i variable
return function () { alert(_i) }
})(i) // pass in current value for loop
});
}
return items
}
Alternatively, if one doesn't like all the nesting, it's fine to use a "named" function to perform the same task. The key to point is that the closure is created (and returned from) a new execution context so that a different variable is closed-over:
function getNumber()
{
function mkAction (i) {
return function () { alert(i) }
}
var items = [];
for (var i = 0; i < 5; i++) {
var num = i * 10;
items.push({
id: i, number: num,
action: mkAction(i)
});
}
return items
}
Another approach is to use Function.bind from ES5:
function getNumber()
{
var items = [];
for (var i = 0; i < 5; i++) {
var num = i * 10;
items.push({
id: i, number: num,
action: (function (_i) { alert(_i) }).bind(null, i)
});
}
return items
}
(Note that Function.bind can be emulated using a new execution context/closure even without native browser support. See the MDC documentation.)
See also:
JavaScript closure inside loops – simple practical example
Passing functions to setTimeout in a loop: always the last value?
How do JavaScript closures work?

How can I prevent this infinite loop, if I don’t know content of function

How can I isolate my variable from variable in this function, if his creator forgot for var keyword?
for (var i = 0; i < 4; i++)
{
test();
}
function test()
{
i = 0;
}

Same idea than previous answer using scoping but a better way would be to use IIFE:
(function () {
for (var i = 0; i < 4; i++) {
test();
}
})();
http://jsfiddle.net/8vBc5/

put your for loop in a separated scope:
in a function.
function test(){
i = 0;
}
function trial(){
for (var i = 0; i < 4; i++){
test();
}
}
trial();
That way only the code and functions inside the trial function can access variables declared at that level.

Closures in Javascript: assigning local variable doesn't work

Just when I thought I understood closures...
The following code snippet:
function f() {
var a = [];
var i;
for (i = 0; i < 3; i++) {
a[i] = function () {
var x = i;
return x;
}
}
return a;
}
var a = f();
console.log(a[0]());
console.log(a[1]());
console.log(a[2]());
prints out 3, 3, 3. I don't understand why. I'm copying the value of 'i' to the local variable x, so there should be three x's: x0=0, x1=1. x2=2. How are all of them reading the final value of i?

Your problem is caused by each a[i] being, in fact, a closure. They all share the same i, which is evaluated when each a[i] is called, not when the loop executes. You need to create each closure with a separate context. For instance:
function f() {
var a = [];
var i;
for (i = 0; i < 3; i++) {
a[i] = makeClosure(i);
}
return a;
}
function makeClosure(i) {
return function () {
var x = i;
return x;
}
}

Even though the value of i changes in your for loop, it's still the same i variable. You need to shadow i in that scope and effectively pass it by value:
for (var i = 0; i < 3; i++) {
(function(x) {
a[x] = function() {
return x;
}
})(i);
}