javascript function with an argument calling without argument

Question

can somebody tell me, how it works for example

function animate(t) {   
    sun.rotation.y = t/1000;
    renderer.clear();
    camera.lookAt(sun.position);
    renderer.render(scene, camera);        
    window.requestAnimationFrame(animate, renderer.domElement);
};
animate(new Date().getTime());

as you see, animate() function has the argument "t". And we call this function with it. But inside the animate() func requestAnimationFrame called it without "t" and program works perfect..im confused

Answer 1

General case

Javascript does not require you to pass all the arguments in a function. If you don't pass an argument, the variable will simply default to undefined.

You also can pass more arguments than specified by the function, and then access them with the arguments object, an array-like object that holds all the arguments passed to the function. So in your example t is effectively a shorthand for arguments[0]. So you can have something like the following.

function sumTwoNumbers(){
 return arguments[0] + arguments[1]
}

sumTwoNumbers(2,3) //returns 5

or like this

function getTwo(a,b,c,d) {
   return 2;
}

getTwo(); //returns 2 with no errors

Your case

But inside the animate() func requestAnimationFrame calls it without "t"

It also should be noted that the function isn't being called without an argument there. 'animate' is being passed as an argument to another function (which will presumably call the function itself at some point). When a function is referred to without () afterwards, it is being passed as an object, not executed. Functions are also objects in JS and therefore can be passed to functions just like any other object. The following is completely valid

function a(x){
  return x+2;
}

function b(y,z){
   return y(z);
}

b(a,2); //returns 4

Answer 2

In javascript you can call a function with arguments, without arguments or more of arguments that you defined. The initiation arguments are stored in the array-like object called arguments. And all unpassed arguments will be undefined

Here is an example function:

function sum(a,b) {
    console.log(arguments);
    a = a || 0;
    b = b || 0;
    return a + b;
}

try this function in your console with diffrent arguments.

The console.log would be like this:

function sum(a,b) {
    console.log(arguments);
    a = a || 0;
    b = b || 0;
    return a + b;
}

>sum(2,4);
[2, 4]
6
>sum(2);
[2]
2
>sum(2,3,4,5);
[2, 3, 4, 5]
5

Answer 3

Actually, it isn't "working perfectly". There is a jump from the first frame to the second.

The first time animate() is called, the value of t is a large integer, for example:

t = 1368990399980

This, of course, is because when you called animate() , you passed in the returned value from Date().getTime() .

The second, and subsequent times, animate() is called, it is called as a callback from requestAnimationFrame() , and the value of t is quite different:

t = 414.41499999928055
t = 431.52399999962654
t = 447.76099999944563

This is because requestAnimationFrame() calls animate() and passes in it's own parameter as the first argument.

self.requestAnimationFrame = function ( callback ) {

    var currTime = Date.now();
    var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
    var id = self.setTimeout( function() { callback( currTime + timeToCall ); }, timeToCall );
    lastTime = currTime + timeToCall;
    return id;

};

BTW, notice that the values of t listed above are increasing in steps of approximately 16. This is why your object is animating.