Question on performance

[mazoku]

Is there any reason to call 

requestAnimationFrame(function() {

loopFunction();

});

and not 

requestAnimationFrame(loopFunction)

Why would anyone choose the first and not the second? 

[mattstyles]

Many callbacks from browser/DOM (such as `requestAnimationFrame`) bind the callback, in the case of `Element.addEventListener` this becomes the Element, in the case of `requestAnimationFrame` it'll be the window. Depending on your use-case this re-binding might be undesirable, e.g. consider the following (I'll use the time honoured OOP/inheritance example of cat speak, particularly relevant given your avatar ):

var cat = {
  name: 'mazoku',
  speak: function (str) {
    console.log(this.name, 'says', str)
  }
}

cat.speak('hello')
// mazoku says hello

requestAnimationFrame(cat.speak)
// undefined says 293878273.231

requestAnimationFrame(function () {
  cat.speak('hello')
})
// mazoku says hello

The above highlights 2 possible reasons you'd wrap in a function:

* You don't want the re-binding

* You want to call that function every tick, but supply your own parameters

You can get around the binding issue by ditching OOP-like strategies and just pass plain functions in, however, you'll still want to handle the case of passing variables in, thankfully, JS supports closure and it's a very powerful thing to have at your disposal, and would work great here as one possible solution:

function sayThis (str) {
  return function say () {
    console.log('hello', str)
  }
}

requestAnimationFrame(sayThis('world'))
// hello world

In this case `str` gets locked in the closure, this pattern is sometimes called a thunk, but, really, its just using closure.

[mazoku]

But doesn't this slow the stuff? One more function creation and call each frame?

[b10b]

Benchmark it and see.  I doubt it'll make an observable difference in isolation, and requestAnimationFrame is called quite infrequently when all things are considered.  As Matt says there are valid scoping reasons to wrap functions - and we can always re-reference a pre-wrapped function on subsequent calls (rather than creating a new wrapper function each call).

[mattstyles]

Yeah, V8 (and likely all other engines) are really good at optimising hot paths, this would surely be such a target for it so perf differences would be extremely negligible if noticeable at all.