Javascript–Invoking Functions (Apply & Call)

Yesterday we were having a discussion about how we can extend Backbone.js so that we can have a separate controller with action methods the way we have in ASP.NET MVC rather putting the callbacks to be executed based on route matching in the Backbone.Router.One point which I mentioned casually is , “Javascript” does not sophisticated reflection like C# so that we can build a Router/Action Selector/Action Invoker/Controller sort of a pipeline.Later I thought that was very casual statement and not a very correct one.The kind of language Javascript is we do not need that kind of reflection and Javascript offers various ways to dynamically invoke functions.In this post we will explore different mechanisms of invoking functions in Javascript. We will start with the following simple code.

Here the “execute” function calls “func” and the function “func” defined in T is executed. Now let’s try to tweak the function “execute” in such a way so that it will accept a object  and a function name as parameter and execute that function defined in that object.

Here we are using the “apply” function of Javascript which is available for any function object. The definition of apply is as shown below:

apply([thisObj[,argArray]]) where

• thisObj is the object that will be used as "this" i.e. object on which the function will be invoked
• argArray is the argument array used to pass argument values to the function which is invoked

“obj[func]” retrieves the function object based on the function name from the hash of “obj” and then “apply” is invoked on that function object.

As a next step let’s modify our function to accept few parameters.

The parameters are passed using the array “p”.

There is another Javascript function “call” which can be invoked on any function object to bind a particular object to it. This is defined as:

call([thisObj[, arg1[, arg2[,  [, argN]]]]]) where

• thisObj (optional) -   The object to be used as the current object on which the function is invoked
• arg1, arg2, , argN (optional list) -  A list of arguments to be passed to the method.

The main difference with “apply” is in the way the parameters are handled, instead of a parameter array it accepts individual parameters.This makes it rigid compared to “apply”.

The following code shows the use of call.

If you are using Underscore.js this can be achieved more easily with _.bind function.

_.bind(function, object, *arguments) where

• function  is the function object which needs to be invoked
• object is the current object on which the function is invoked
• *arguments are arguments values which the function expects

Our sample code is modified with _.bind

The _.bind function internally uses apply as shown below.

Javascript Variable Scope & Hoisting

In this post we will discuss about the scope of a javascript variable and how “hoisting” works in javascript. Let’s start with a simple global variable definition.

In this code “a” is defined as a global variable and should be accessible to all the functions.So quite naturally the function “f” will print “global” i.e. value of the global variable “a” in the console.

In the code below, we have introduced a small change and added declaration of another variable named “a” in the function “f”.

Here the program will give precedence to the local variable “a” and will print “local” to the console. So far it’s quite intuitive.

Here we are trying to access the value of “a” first followed by the local variable declaration of same name and then again printing it’s value to the console. Most of us would expect to the following in the console.

global

local

It will print the following instead:

undefined
local

This happens because the way javascript handles variable declaration and initialization.It first scans the function and finds out all the variables and declares them on top but does not initialize them. Then when the code executes it provides the initialization value in the actual line where its defined. So when the first console.log statement executes it sees that there is a variable named “a” defined but not initialized so it will print “undefined”.

This is how variable hoisting (moving to the top) works in javascript where the declarations are only hoisted and not the initialization.

So this can lead to undesirable behavior and it is safe to declare the variable at the top of the function before its use.

Backbone.js–Model Getter & Setter

In my last post, we have seen how to define models in Backbone.js and create instances of their objects.In this post we will see how we can set & get attribute values in Backbone.js model.Backbone.Model exposes two functions set and get to do so. The code snippet below shows the use of these functions.

The code below tries to access one non-existent attribute’s (“c” in this case) value which obviously will return undefined.

We can handle this situation in an elegant way using the has function. The has function returns true/false based on whether a property exists or not.

The attributes attribute and the toJSON function returns the dump of the attributes & the value in JSON format. The code below will print “Object { a=2, b=4, c=5}”.

The unset function removes a particular attribute from the object hash.

The clear function will clear the entire object hash removing all the attributes.

So now we have covered mostly all the Backbone.js functions related to attribute manipulation. However we can provide model specific functions for getting/setting attributes instead of directly using the get & set methods as shown below.

In the next post, we will move change listeners and tracking in the model.