Javascript defining functions

Question

I've been learning Javascript with Khan Academy. I'm looking at : http://www.khanacademy.org/cs/speed-circles/964929070

there is a line that reads "var draw = function() {...}" is he defining a function called draw? Or is the variable draw calling some function (which I don't see defined)?

Thanks!

Answer 1

Yes, a function expression is being assigned to the variable named draw . You can even call it:

var draw = function() {
    console.log('xyz');
};

draw(); // 'xyz'

Answer 2

In JavaScript, functions are objects, just like arrays and -logically- objects are. As you may have found out already these objects can be assigned to a multitude of variables, but as soon as you change one of these variables, they all change. That's because JS always assigns by value, but a variable is never assigned an object directly: it's assigned a reference to an object :

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 applies to functions, being objects, the can be assigned to variables/properties all over the place, but it'll 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, you might ask is an anonymous function being assigned to a variable, instead of just declaring a function as you'd expect? Well:

function foo(){}

is hoisted , prior to running any code, JS moves all function declarations and variable declarations to the very top of the scope, but in your case, you're not simply defining a function, or declaring a variable: JS has to do something, too: assign a reference to a variable. The function won't be hoisted:

var foo = function()
{
    console.log('foo');
};
foo();//logs foo
foo = function()
{
    console.log('bar');
};
foo();//logs bar now

If foo were undefined prior to the assignment, you'd get an error. If any code preceded the code above, JS would hoist the variable declaration of foo, but it's value would still be undefined.

What's the point? This will prove useful when you start playing with closures, or if you need the function to differ, depending on a branch ( if (x){ foo = functionX} else { foo = functionY;} ). These are just 2 reasons why you'd want to avoid scope hoisting... but the most important reason of all ATM has to be redefining a function on the fly

Answer 3

Note that in processing.js (as used by this Khan academy demo), the function draw is automatically called every frame reference doc .

This bit of code overrides the default (empty) implementation of draw so that the given code is called every frame.

Khan academy has a tutorial about this use of the draw function here .

Answer 4

function draw(){ return "Sample"; };

var draw = function(){ return "Sample"; };

are same meaning.

Answer 5

function () { ... } creates a function value. That is, something that can be passed around just as easily as a number, or any other object in javascript.

He then binds it to the name draw for future reference.

He could as well have written

function draw() {
    ...
}

For these purposes they are equivalent.