Javascript definition functions
I am learning Javascript with Khan Academy. I am looking at: http://www.khanacademy.org/cs/speed-circles/964929070
there is a line that reads "var draw = function () {...}", does it define a function called draw? Or does the draw variable call some function (which I can't see)?
Thank!
source to share
In JavaScript, functions are objects, like arrays and -logical-objects. As you may have already figured out that these objects can be assigned to many variables, but as soon as you change one of these variables, they all change. This is because JS always assigns a value by value, but a variable is never assigned an object directly: it is assigned an object reference:
var obj = {iam: 'an object'};
var reassign = obj;
console.log(obj);//shows object
console.log(reassign);//surprize, shows the same thing
reassign.bar = 'foobar';
console.log(obj.bar);//logs foobar, the variable obj has gained the same property, because it is the same object.
The same goes for functions being objects, they can be assigned to variables / properties all over the place, but it will still be the same object / function:
var foo = function()
{
console.log('I am an object');
};
var second = foo;
second();//logs I am an object
console.log(second === foo);//logs true, because they both reference the same thing
Why then might you ask if the anonymous function is an assignable variable and not just a function declaration as you would expect? Well:
function foo(){}
before any code runs, JS moves all function declarations and variable declarations to the very top of the scope, but in your case, you're not just defining a function or declaring a variable: JS has to do something too: assign a reference to the variable. The function will not be raised:
var foo = function()
{
console.log('foo');
};
foo();//logs foo
foo = function()
{
console.log('bar');
};
foo();//logs bar now
If foo was undefined before assignment, you would get an error. If any code precedes the above code, JS will raise the declaration of the variable foo, but that value will be undefined.
What is the point? This will be useful when you start playing around with closure or if you need the function to be different depending on branch ( if (x){ foo = functionX} else { foo = functionY;}
). These are just 2 reasons why you want to avoid lifting the area ... but the most important reason for all ATM machines should be to override the function on the fly
source to share
Note that in process.js (as used by this Khan academy demo) the draw function is automatically called in the reference document frame .
This bit of code overrides the default (empty) paint implementation so that this code is called every frame.
Han Academy has a tutorial on this use of the paint function here .
source to share
function () { ... }
creates a function value. That is, something that can be passed as easily as a number, or any other object in javascript.
It then links it to the name draw for future reference.
He could also write
function draw() {
...
}
For these purposes, they are equivalent.
source to share