javascript - d3js tick function definition -

i encountered problem can not seem understand, why if define tick function this;

function tick () { /* */ } 

it works fine , in mode

var tick = function () { /* */ } 

doesn't work. problem?

working example of first http://jsbin.com/omokap/10/edit

working example of second http://jsbin.com/isobul/1/edit

the problem using tick before definition in 1 case , after definition in other case.

in first case:

force.on("tick", tick);  function tick () { /* ... */ } 

the function tick defined @ parse time , available passed second argument.

on other hand in:

force.on("tick", tick);  var tick = function () { /* ... */ }; 

the variable tick defined @ parse time (so jshint not complain), gets value @ runtime. value undefined when force.on("tick", tick) executed.

the difference more apparent when consider 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, latest definition 

see this question understand difference between using var tick = function () ... , function tick() ... better.