The problem is that you are using tick
before its definition in one case and after its definition in the other case.
In the first case:
force.on("tick", tick);
function tick () { /* ... */ }
the function tick
is defined at parse time and is available to be passed as the second argument.
On the other hand in:
force.on("tick", tick);
var tick = function () { /* ... */ };
the variable tick
is defined at parse time (so JSHint does not complain), but it gets its value only at runtime. Its value is undefined
when force.on("tick", tick)
is executed.
The difference is more apparent when you consider the following example:
var f;
if (true) {
f = function () { return 1; };
} else {
f = function () { return 2; };
}
f(); // returns 1
versus:
if (true) {
function f () { return 1; }
} else {
function f () { return 2; }
}
f(); // returns 2, from the latest definition
See this question to understand the difference between using the var tick = function () ...
and function tick() ...
better.