Array-like objects in JavaScript

I learned something interesting in John Resig’s book Secrets of the JavaScript Ninja. How could you add Array like properties to your objects? At first thought, or at least my first thought, I would add an array to the object and then just use it internally as a collection, or maybe set the prototype to Array.prototype.

However, John points out a much simpler way. You can simply use  Array’s prototype methods on your object using call.

I decided to checkout the EcmaScript 5 standard (specifically Section 15.4.4 Properties of the Array Prototype Object) to find out more about these generic methods. Each property that could be used was said to be left “intentionally generic” and had a note similar to the following:

NOTE The concat function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the concat function can be applied successfully to a host object is implementation-dependent.

Here’s the full list of Array properties that are said to be generic:

  • Array.prototype.toString
  • Array.prototype.toLocaleString
  • Array.prototype.concat
  • Array.prototype.join
  • Array.prototype.pop
  • Array.prototype.push
  • Array.prototype.reverse
  • Array.prototype.shift
  • Array.prototype.slice
  • Array.prototype.sort
  • Array.prototype.splice
  • Array.prototype.unshift
  • Array.prototype.indexOf
  • Array.prototype.lastIndexOf
  • Array.prototype.every
  • Array.prototype.some
  • Array.prototype.forEach
  • Array.prototype.map
  • Array.prototype.filter
  • Array.prototype.reduce
  • Array.prototype.reduceRight

 

 

Stubbing the request object with RSpec

I have some decorator logic that needs to generate a url using the request object. However, when running specs a request object isn’t created, so you have to stub one out.

The key was to use any_instance on the decorator to ensure all instances received the stub. Here’s the code I came up with:

JavaScript Closures

Javascript closures can be confusing at first. They’re not, and hopefully this analogy will help drive home the concept.

A Man’s Secret – An Analogy

A man possess a secret book, which he cannot let anyone else know about. He decides the only way to keep the book truly secret is to memorize the entire thing and then bury the book so no one can find it. Later in his years he bears a son. Once his son grows old enough, the father digs up the book and begins having his son commit the entire book to memory. Years later, he has his son rewrite the entire book cover to cover from memory on paper. When the son successfully completes the task, and the father is satisfied that his son truly has the book memorized in it’s entirety, the book and the copy of the book the son just wrote are thrown into a fire, completely eliminating any evidence that the book actually existed. A few years later the father dies, leaving the son on his own, with the book committed to memory.

This is similiar to how a javascript closure works. See the following code.

Code Example

var father = new function(){
 
    // this is declared as a private variable
    var secretBook = 'Book of Secrets';
 
    this.bearSon = function(){
        return {
            whatWasTheBookYourFatherTaughtYou: function(){
                alert(secretBook);
            }
        };
    };
};
 
// the father won't tell anyone about the book he has
alert(father.secretBook); // undefined
 
// the father bears a son
son = father.bearSon();
 
// the father dies
father = undefined;
 
// the son still knows the book his father taught him
son.whatWasTheBookYourFatherTaughtYou(); // Book of Secrets

secretBook was declared inside the father function and is a private variable, inaccessible to anything outside the father function. The father function closes around the variables declared inside of it. Anything defined inside the father function has access to it, even once the father function has executed and been undefined. The bearSon method returns a new object that contains a function called whatWasTheBookYourFatherTaughtYou.

Strange Rendering of Fonts in Firefox 3

Firefox 3 was having some font rendering issues on my machine. Certain web sites were displaying a wierd bold looking font in place of the default font described in the CSS. See this screenshot. After doing some searching around the internet I found out the issue.

Early in the year I had installed Adobe Type Manager and added a bunch of Helvetica Postscript Type-1 fonts. These were for some reason being used as Firefox’s default font. Removing them from the system fixed the issue.

Learning a New Language

Larry O’Brien over at knowing.net has a great series called 15 Exercises to Know a Programming Language, It’s an older article but after going through parts 1-3, theres really nothing in there that changes often enough to warrant any kind of an update.

  • Part 1 gets you used to using some of the more basic features of a language including, calculations, the standard libraries, file i/o, GUI development, and debugging.
  • Part 2 introduces some more advanced data structures, object oriented programming, idioms, memory issues, design patterns, and concurrency.
  • Part 3 presents web interaction, libraries, encryption, and databases.

There’s obviously a lot to learn when starting to cover a new language. Larry’s posted some great ideas for getting used to a new language, and once you accomplish all these, you go from playing with the language to knowing the language.