Evaluation of boolean values in JavaScript

If you have a background in a strongly-typed language such as Java, you’ll be used to using logical operators only with boolean values/expressions. However, in most dynamically-typed languages this doesn’t have to be the case, due to the nature of dynamic typing: The type of the variable is often determined based on the context in which it is used.

With JavaScript there are actually two concepts at play when using logical operators: What is actually returned from the result of a logical operation, and how variables are converted to boolean values when the context requires it.


JavaScript functions: First-class objects

In JavaScript, functions are first-class objects, meaning that they can be created, manipulated and passed around in the same manner as other objects/variables in JavaScript. For example, a function can be created, stored in a variable or even be the return value of another function, as seen below:

function getPower(power)
  return function(x)
    return Math.pow(x, power);

var x3 = getPower(3);
window.alert(x3(3)); // Outputs 27.

In the rather stupid and contrived example above, we make a function getPower() that returns another function which raises the given value to the exponent supplied by calling getPower(). (This is a bad way to do things for numerous reasons, but is just shown for the sake of providing a simple example)

We then call getPower with a power of 3 and assign the returned function to the variable x3, and the output is as expected. Defining “inline” functions this way and manipulating them is closely associated with the concept of anonymous functions.


JavaScript Event Delegation

JavaScript Event Delegation is a technique you may have heard of. It’s a different way of using event handlers that offers clear benefits and is becoming more popular amongst web developers. I’ll give a brief overview of event delegation in JavaScript, along with why you should consider it. Note that this tutorial will use the great jQuery library (v. 1.3.1) for most examples.


Delegation is a fairly well-known design pattern. In short, it is a way for a method to produce its result simply by calling a method on another object, thus delegating responsibility to that object to provide the functionality needed by the method. For example, a Cashier object could store a delegate object called Calculator. Calling Cashier.addToTotal(value) would simply delegate to the contained object, calling Calculator.addToTotal(value).

How is delegation different than inheritance? With inheritance, the subclass inherits all of the functionality/behaviour of the parent class. You may not want or need this; in the preceding example, it would not make sense to have Cashier extend from Calculator simply because we wanted the addToTotal() behaviour/functionality. Delegation allows the behaviour advertised by a certain object/class to be provided by another.


I’ve been busy

I haven’t been posting updates or writing as many articles here as I’d like to, and it’s mainly because I’ve been busy putting the final touches on a website I’m about to launch. I don’t want to give away too many details or build too much hype, because frankly it’s not that big of a project and was never intended to be.

However, it was a project that I intended to learn from, and in that regard, I think I’ve succeeded – and that’s really what I want to continue doing for the rest of my life. Furthermore, while the project was an exercise in improving my web and software development skills, the end result will also be something that I will actually use myself – not just some pointless academic exercise. Another nice effect was the experience of seeing a self-directed project come to fruition over the last few months – albeit at a slow rate, usually only several hours per week, but nonetheless I’ve improved my self-discipline as a result. Continued

Upgrade jQuery for better Opera support (Or just upgrade Opera)

I ran into a weird problem while testing one of my sites that used jQuery with Opera 9.26. (I happened to be using this older version of Opera because I am lazy to upgrade; I’m still using Firefox 2 despite the successful launch of FF3)

The issue was with an Ajax request I was sending. The return value was an array in JSON form. More specifically, the server was returning something like: Continued

Playing with Google Maps and encoded polylines

I’ve been playing around with the Google Maps API for a bit and it’s turned out to be a great way to get started with “mashups” and the like. One of the best uses of the API is the ability to create paths or routes on the map.

This is done by creating GPolyline object and then adding it as an overlay to the map. Basically, a polyline is just an ordered list of geographical points/coordinates on the map, each of which is a GLatLng object. For serialization/storage of polylines, there is an algorithm you can use to Base64-encode a series of points; the resultant string can later be passed directly into a factory method to regenerate the GPolyline. By using encoded polylines, you also get access to a few more interesting and useful options related to rendering and performance issues.