Jon Aquino's Mental Garden

Engineering beautiful software jon aquino labs | personal blog

Saturday, April 26, 2008

[Programming] Understanding the "this" keyword in JavaScript

My colleague asked me how to know what the "this" keyword refers to in JavaScript. It's a bit different from other languages.

First, the rule: When you invoke a function on an object, "this" refers to the object. When you invoke a function by itself, "this" refers to the global object (the window object).

Now for some examples.

Creating an object in JavaScript is easy:
    var food = {};

Let's add a function to this object:
    var food = {
getCalories: function() { alert(this); return 300; }
};

food.getCalories();

When we call food.getCalories(), "this" is the food object, because we are invoking the function on the food object.

But check this out:
    var getCals = food.getCalories;
getCals();

Here we invoke the function by itself, i.e., not on an object. "this" is the global object (i.e. window), because we are invoking the function by itself.

Now look at this:
    var automobile = {};
automobile.getCalories = getCals;
automobile.getCalories();

Here we've created an automobile object, and added our function to it. "this" is the automobile object, because we are invoking the function on the automobile object.

Thus, "this" is a dynamic quantity – it is not cast in stone when the function is defined, but refers to the current object that the function is being invoked on.

Thursday, April 24, 2008

Trillions to 1

Just the other day I was thinking, if, 31 years ago, the two gametes from which I was formed - those two first cells of me - differed in location by a millimeter, I would not be here today. Someone else would be in my place, someone looking very similar, but it would not be me. I would have never awakened to life, but would have remained non-existent. Someone else - a pseudo-Jonathan-Aquino - would have grown up with my family, attended my school, fallen in love with computers, contributed to society - in my place. All without me knowing it; I would never have been born into reality. I would have remained dormant.

The chances of those two first cells meeting were astronomically low - 1 in trillions. And going further back in time, through the generations, the chances of events happening in just the right place and at just the right time to result in this one meeting of cells: very unlikely. If anything had been slightly different - a rainy day instead of a sunny one, for instance - another Jonathan Aquino, not I, would be living this life.

Yet here I am. Trillions to 1 that I should not have been granted a shot at this life. I'm very lucky.

Tuesday, April 15, 2008

Videos of Great Speeches: I Have A Dream; JFK's Inaugural Address

Footage of a couple of amazing speeches:

Thursday, April 10, 2008

[Programming] The Proper naming pattern: Extract the guts of foo() into fooProper()

Often in programming you will have two versions of a function: one that serves as an outer shell, and the "real" function itself. Suppose you have extracted the guts of addAttachment() into addAttachment2().

A difficulty confronts you: What do you call the new function? addAttachment2() is a lousy name.

A wonderful adjective can help us here: proper. We would call the new function addAttachmentProper():

FliE1

The function proper is *the* function, the one that does the work. I live in Victoria, but not in Victoria proper (the central part of the city). "proper" is a convenient term to denote The Actual Function.

More examples:
  • iconUrl() and iconUrlProper()

  • broadcast() and broadcastProper()

  • url() and urlProper()

  • delete() and deleteProper()

Sunday, April 06, 2008

DIY Hand-Bordered Correspondence Cards

Crane's sells some very nice hand-bordered correspondence cards, but at $20 + shipping + tax for a box of 10, they're not cheap.

But you can do almost as well by taking a 4x6 index card and applying a border with a felt marker. Just lay a sheet of paper beside the edge of the card (to make a clean border edge), find a marker with the desired color, and fill in the border.

Picture 825