{ brackets: curly }

Function Declaration vs Assignment in Javascript

There are two common ways to create a function in Javascript:

// function assignment
var fA = function() { };

// function declaration
function fB() { };

On the surface, they both created a function — fA() and fB() respectively. Yet there are fundamental difference between the two that might yield unexpected results.

Let’s look at the following code:

var x = 10;

fA();  // undefined

var fA = function() {
    return x;
}

fB();  // returns 10

function fB() {
    return x;
}

The fA() call returns undefined, behaving as we would have expected, since the call occurs before the fA() function has yet to be defined. However, how’s the fB() call able to be executed and returns the value of x? That’s because Javascript hoists declarations. Hoisting means the parser will move all the var and function declarations to the top of their current scope (which is in the global scope in this case) before any execution occur.

After hoisting, the above codes are actually re-organized to the following execution order:

// variable declarations moved to the top with default value "undefined"
var x, fA;  

// function declarations are also moved to the top
function fB() {
    return x;
}

// the rest of the operations follow in sequential order

x = 10;

fA(); // undefined, as above

fA = function() {
    return x;
}

fB(); // returns 10

Even though x and fA are declared at the top, they’re initially assigned the default value of undefined. fB() was created as a declaration, so it is also moved to the top and making the function available immediately, while fA() is an assignment, which follow sequential order and the function didn’t get created until later on.

Function.call vs Function.apply

As we all know, Javascript is an object-based language, and almost everything is an object, so functions in Javascript are actually objects inheriting from the native Function class/object. This makes the native methods in the Function class call() and apply() available to all the declared functions.

But why are call() and apply() useful and when would we ever use them? Let’s start with this basic example:

var x = 1;

var f = function() {
    return this.x;
};

f(); // return 1

We have a simple global function f() that returns the value of its own variable x. However, when the function is called, it is returning the value of x in the global space, which is 1 in this case. That is because when we are not invoking the function as an new instance of an object, the this inside is still referencing the global object. (note: In ECMAScript 5 strict mode, this in global object no longer exists and is undefined instead.)

Now let’s put call() into the scenario:

var x = 1;
var o = { x: 2 };

var f = function() {
    return this.x;
};

f(); // return 1
f.call(o); // return 2

As you can see the native call() method lets you pass in an object to the function for its this pointer to reference to. When I called f.call(o), the this inside f() is then pointed to the o object at runtime.

The call() method also accept additional arguments and will pass those through to its function. For example:

var x = 1;
var o = { x: 2 };

var f = function() {
    return this.x;
};

var fA = function(m) {
    return this.x + ' from ' + m;
};

var fB = function(m1, m2) {
    return this.x + ' from ' + m1 + '. ' + m2;
};

f();    // return 1
f.call(o);    // return 2

fA('global');    // return '1 from global'
fA.call(o, 'o object');    // return '2 from o object'

fB('global', 'Nice!');     // return '1 from global. Nice!'
fB.call(o, 'o object', 'Cool!');    // return '2 from o object. Cool!'

call()’s counter-part, apply() pretty much behaves identically, except it accepts a single array of arguments for its second argument instead of an argument list.
Here is what the above codes would look like when apply() is used instead.

f.apply(o);    // return 2
fA.apply(o, ['o object']);    // return '2 from o object'
fB.apply(o, ['o object', 'Cool!']);    // return '2 from o object. Cool!'