Passing an argument to function in Javascript but not declaring it, how does it work?

Question

If you don't have much time, tell me from where the 'newTime' argument gets its value in the code below. Look at the code below to understand. I don't understand how the line : requestAnimationFrame(newTime => animate(newTime,time)) works. The argument 'newTime' has never been declared and we don't pass a value to it manually either. The same problem occurs while i try to understand different array methods, usually an argument is passed and used inside the function but the value of argument is always unknown to me. For example this snippet `array1.map(x => x * 2);. We never pass the 'x' and we never know its value.

Here's the code:

    let cat = document.querySelector("img");
    let angle = Math.PI / 2;
    function animate(time, lastTime) {
    if (lastTime != null) {
    angle += (time - lastTime) * 0.001;
    }
    cat.style.top = (Math.sin(angle) * 20) + "px";
    cat.style.left = (Math.cos(angle) * 200) + "px";
    requestAnimationFrame(newTime => animate(newTime, time));
   }
   requestAnimationFrame(animate);

That's an arrow function definition; `newTime` is the *formal parameter* to the arrow function. The actual value when the function is invoked will be the timestamp passed by the browser. — Pointy, Jul 28 '18 at 16:33
And it's not just "arrow function magic"; you have the same thing with `requestAnimationFrame(animate)` -- there it's calling the `animate` function with a parameter also. — Heretic Monkey, Jul 28 '18 at 16:36
I know the arrow functions. I am from C background. Just don't know if we don't declare newTime and we don't pass newTime value manually, how does it gets in to the function and what value does it take? — Mazhar Ali, Jul 28 '18 at 16:36
@MazharAli The callback (arrow function) that is passed to `requestAnimationFrame` is called *internally* by `requestAnimationFrame` and is passed the parameter when it is called internally. Functions are first-class objects in JavaScript — Andrew Li, Jul 28 '18 at 16:41
And what will be the value of newTime first time it is called? — Mazhar Ali, Jul 28 '18 at 16:43
@MazharAli Whatever `requestAnimationFrame` passes to it (ie the timestamp in ms of when the callback is executed IINM) — Andrew Li, Jul 28 '18 at 16:51

score 0 · Answer 1 · answered Jul 28 '18 at 16:35

0

What you're seeing is an es6 anonymous function (some languages call these lambda functions) declaration. newTime is just the named parameter to that anonymous function.

requestAnimationFrame(newTime => animate(newTime, time));

is the same as

requestAnimationFrame(function(newTime){
    animate(newTime, time);
});

answered Jul 28 '18 at 16:35

PlatypusMaximus

54
8

What i want to ask is that whats the value of 'newTime'. It hasn't been declared and we don't pass it to the function manually either. Any other function with arguments is passed in some values. – Mazhar Ali Jul 28 '18 at 16:40
Without looking at the source of `requestAnimationFrame` I can tell you with a high degree of confidence it takes a callback as an argument and passes in a variable to that callback. That variable, (created and defined inside `requestAnimationFrame()`) is `newTime` – PlatypusMaximus Jul 28 '18 at 16:44
Yes, it passes newTime as a variable to a callback function. But what i don't know is what will be the value of that variable? – Mazhar Ali Jul 28 '18 at 16:47
Assuming they don't expose that variable to any shared scoped variables or allow more arguments to `requestAnimationFrame()` there is nothing you can do to control that without editing the source – PlatypusMaximus Jul 28 '18 at 16:53
@MazharAli have you looked at [the documentation for `requestAnimationFrame()`?](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) – Pointy Jul 28 '18 at 16:53

Passing an argument to function in Javascript but not declaring it, how does it work?

1 Answers1