Design Pepper

Testing Array Contents with Array

2013-05-19T00:00:00+00:00

Originally published in A Drip of JavaScript.

When working with arrays, it is quite common to perform different actions based on whether or not the array contains a particular item. A fairly straightforward implementation of this pattern can be found below:

:::javascript
planets = [
    "mercury",
    "venus",
    "earth",
    "mars",
    "jupiter",
    "saturn",
    "uranus",
    "neptune"
];

// Default to false
var containsPluto = false;

for (var i = 0; i < planets.length && !containsPluto; i++) {
    if (planets[i] === "pluto") {
        containsPluto = true;
    }
}

// Outputs: false
console.log(containsPluto);

Here our for loop is doing the work of iterating over the array, and a simple if statement checks to see if our condition is met yet. This for loop is a little more complicated than most because it is set up to stop iterating as soon as a matching element is found in the array.

While it is not that difficult to understand, manually keeping track of the iteration and the "short circuiting" logic just isn't the problem that we're trying to solve. The fewer such things we have to keep in our head, the better. We could fix this by moving the loop into it's own function (probably a good idea), but fortunately the latest version of the JavaScript standard includes such a function for us.

The function is called some and it is available on all arrays. Here is an example of how it would apply to our problem.

:::javascript
function isPluto(element) {
    return (element === "pluto");
}

// Outputs: false
console.log(planets.some(isPluto));

dwarfPlanets = [
    "ceres",
    "pluto",
    "haumea",
    "makemake",
    "eris"
];

// Outputs: true
console.log(dwarfPlanets.some(isPluto));

All we have to do to use some is to pass it a callback function. The callback will be executed once for each element until the callback returns true. At that point the some method itself will return true. If the callback never returns true, then some will return false.

The great thing about some, though is that you don't have to think about that unless you want to. You just have to pass in your callback.

In addition to the array element itself, the callback function has access to two other parameters: the current index, and the entire array. This can be useful in situations where you are comparing the current element against other members of the array. Consider this example:

:::javascript
function isLessThanPrev(el, index, arr) {
    // The first element doesn't have a predecessor,
    // so don't evaluate it.
    if (index === 0) {
        return;
    } else {
        return (el < arr[index - 1]);
    }
}

evens = [2, 4, 6, 8];
randoms = [0, 9, 2, 5];

// Outputs: false
console.log(evens.some(isLessThanPrev));

// Outputs: true
console.log(randoms.some(isLessThanPrev));

As with other features of ES5 that we've talked about, some is only supported in IE9 and higher. If you'd like to use it in older browsers, you will need to use a library like Underscore which has an equivalent method or a compatibility shim which ports Array#some back into older browsers.

Soon we'll be taking a look at what it takes to write your own compatibility shims.

Josh Clanton
http://designpepper.com

Using Dispatch Tables to Avoid Conditionals in JavaScript

2013-05-12T00:00:00+00:00

Originally published in A Drip of JavaScript.

When writing code, one of the surest ways to keep things simple and straightforward is to avoid conditionals when possible. Unfortunately, it is fairly common to see code with a lot of if, switch, and case statements like the following:

:::javascript
function processUserInput(command) {
    switch (command) {
        case "north":
            movePlayer("north");
            break;
        case "east":
            movePlayer("east");
            break;
        case "south":
            movePlayer("south");
            break;
        case "west":
            movePlayer("west");
            break;
        case "look":
            describeLocation();
            break;
        case "backpack":
            showBackpack();
            break;
    }
}

Above we have a function for processing user input from a text adventure game. While it isn't terribly difficult to understand, it is more complicated than necessary. And as the number of commands grow, the function can quickly become unwieldy. So what can we do to simplify it?

:::javascript
var commandTable = {
    north:    function() { movePlayer("north"); },
    east:     function() { movePlayer("east");  },
    south:    function() { movePlayer("south"); },
    west:     function() { movePlayer("west");  },
    look:     describeLocation,
    backpack: showBackpack
}

function processUserInput(command) {
    commandTable[command]();
}

In this refactored version we are using a dispatch table to hold all the possible commands a user can give, and the functions the program should call. That changes the processUserInput function into a single line, and eliminates all conditionals.

If you are unfamiliar with bracket notation, it is just an alternate way of accessing a function's properties, with the advantage that you can use variables for the property's name. For example, if command is "north", then commandTable[command] is equivalent to commandTable.north.

The fundamental change we made is transforming the conditionals into a data structure. And data is much easier to manipulate than conditionals. In the future, if we want to add a new command, all we have to do is add it to commandTable. No messing around with case or break statements required.

If you enjoyed this issue of A Drip of JavaScript, share it on Facebook.

Thanks for reading!

Josh Clanton
http://www.designpepper.com

What are Prototype Properties and Methods?

2013-05-05T00:00:00+00:00

Originally published in A Drip of JavaScript.

A couple of weeks ago, I mentioned prototype properties in passing. But what exactly are they? Let's take a look.

:::javascript
function Book(title, author) {
    this.title = title;
    this.author = author;
}

Book.prototype.getFormatted = function () {
    return this.title + " - " + this.author;
}

var hobbit = new Book("The Hobbit", "Tolkien");

// Outputs: "The Hobbit - Tolkien"
console.log(hobbit.getFormatted());

What is this magical getFormatted? And how did it get attached to my object? It's all through the power of prototypes.

Whenever you create an object using a constructor, that constructor has a property called prototype which points to an object. If you haven't done anything special, that prototype property is just an empty object. But it's an empty object with superpowers.

Let's see how that works.

:::javascript
function Book(title, author) {
    this.title = title;
    this.author = author;
}

Book.prototype.pubYear = "unknown";

var hobbit = new Book("The Hobbit", "Tolkien");

var caspian = new Book("Prince Caspian", "Lewis");
caspian.pubYear = 1951;

// Outputs: "unknown"
console.log(hobbit.pubYear);

// Outputs: 1951
console.log(caspian.pubYear);

// Outputs: "unknown"
console.log(Book.prototype.pubYear);

In the example above, we create a Book constructor, and then create a pubYear property "unknown" on it's prototype object.

When we try to access hobbit.pubYear, the JavaScript interpreter realizes that the hobbit object doesn't have a matching property, so it then checks to see if there is a matching property on the prototype object. Since there is, it will give us the value of Book.prototype.pubYear.

But because the caspian object has a pubYear property of it's own, the interpreter never has to go look at the prototype object.

While ordinary properties on a prototype can be useful, methods are more useful still. Let's go back to our original example.

:::javascript
function Book(title, author) {
    this.title = title;
    this.author = author;
}

Book.prototype.getFormatted = function () {
    return this.title + " - " + this.author;
}

var hobbit = new Book("The Hobbit", "Tolkien");

// Outputs: "The Hobbit - Tolkien"
console.log(hobbit.getFormatted());

Now you should know how the property lookup works. The interpreter realizes that there is no getFormatted property on hobbit itself, so looks for it on the prototype.

But you might notice something else special. The getFormatted method makes use of this.title and this.author. That works because when an object's method is invoked, the object itself becomes the this for the method. And that's even if the method itself belongs to the prototype rather than directly to the object.

Why bother with all of this, though? Why not define getFormatted directly on the object, like so?

:::javascript
function Book(title, author) {
    this.title = title;
    this.author = author;

    this.getFormatted = function () {
        return this.title + " - " + this.author;
    }
}

Because if you do it like that, rather than defining a single method which can be used by all Book objects, each object has its own copy of the method. Now imagine a scenario where you are producing lots of Book objects.

:::javascript
var bookArray = [ ]

for (var i = 0; i < 100; i++) {
    bookArray[i] = new Book("Some Title", "Some Author");
}

Now you have have 100 copies of getFormatted taking up space in memory. In addition, if you need to change how getFormatted works, you'll need to manually update each instance of Book. Compare that to how simple it is to update the prototype method.

:::javascript
function Book(title, author) {
    this.title = title;
    this.author = author;
}

Book.prototype.getFormatted = function () {
    return this.title + " - " + this.author;
}

var hobbit = new Book("The Hobbit", "Tolkien");

// Outputs: "The Hobbit - Tolkien"
console.log(hobbit.getFormatted());

// Oops! We need to use commas, not hyphens
Book.prototype.getFormatted = function () {
    return this.title + ", " + this.author;
}

// Outputs: "The Hobbit, Tolkien"
console.log(hobbit.getFormatted());

Updating the method on the prototype means that all instances of Book get the updated method immediately, and you don't have the possibility of some instances having the outdated method.

So those are the basics of how prototype properties and methods work.

Whew! That's a bit wordier than normal, but the newsletter should be back to a normal length next week.

Thanks for reading!

Josh Clanton
http://designpepper.com

Dealing with the Dangers of `this` in Constructors

2013-04-26T00:00:00+00:00

Originally published in A Drip of JavaScript.

As I mentioned in the last issue, invoking a constructor without new can be dangerous. Let's go over why.

:::javascript
function Color(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
}

// Safe invocation
var red = new Color(255, 0, 0);

// Dangerous invocation
var blue = Color(0, 0, 255);

When a constructor is invoked with the new keyword, the this value of the constructor is set to the new object that you are creating. But when a constructor is invoked like a normal function, its this defaults to the same this variable that any other function gets. And normally that is the global object (window in the browser.)

Here is an illustration of the problem.

:::javascript
// Global variable
r = "Rodent Of Unusual Size";

function Color(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
}

// Dangerous invocation
// Means `this` is the global object
var blue = Color(0, 0, 255);

// Outputs: 0
console.log(r);

// Outputs: undefined
console.log(blue);

In the example above, there is a global variable named r. Or to put it another way, the global object has a property named r. When the Color constructor is invoked without new, the constructor's this is set to the global object (in most cases). Which means that the constructor function has just overwritten the global r variable with something that was intended to be a property of the blue object.

Furthermore, because Color was invoked as an ordinary function, it didn't automatically return a new object, which means that blue is also undefined.

As you can imagine, debugging an issue like this can be time consuming and frustrating. So how do we prevent these sorts of problems? Fortunately the answer is pretty straightforward.

:::javascript
// Global variable
r = "Rodent Of Unusual Size";

function Color(r, g, b) {
    // Check whether `this` is a
    // `Color` object.
    if (this instanceof Color) {
        this.r = r;
        this.g = g;
        this.b = b;
    } else {
        // If not, then we should invoke
        // the constructor correctly.
        return new Color(r, g, b);
    }
}

// Dangerous invocation
// Means `this` is the global object
var blue = Color(0, 0, 255);

// Outputs: "Rodent Of Unusual Size"
console.log(r);

// Outputs: Color {r: 0, g: 0, b: 255}
console.log(blue);

In the updated Color constructor, the first thing we do is check whether this is an instance of Color. It works because the new keyword will have already created the new object as an instance of the constructor before the constructor function begins running.

If it isn't a Color object, then we know the constructor was invoked incorrectly, so we skip all the construction logic and have Color return the results of correctly invoking itself with new.

This means that the constructor is no longer in danger of clobbering the global object's properties.

Of course, using this approach also means that developers may get into the bad habit of invoking constructors without new. If you'd rather just force them to always use new, you could throw an error instead, like so:

:::javascript
function Color(r, g, b) {
    // Check whether `this` is a
    // `Color` object.
    if (this instanceof Color) {
        this.r = r;
        this.g = g;
        this.b = b;
    } else {
        // If not, throw error.
        throw new Error("`Color` invoked without `new`");
    }
}

And that's how you can make your custom constructors safely deal with a missing new keyword.

Josh Clanton

Constructors in JavaScript

2013-04-19T00:00:00+00:00

Originally published in A Drip of JavaScript.

Despite the fact that they are very powerful, constructors are one of the most underused features of JavaScript. (Probably because they have a very influential detractor.) But if you want to really know JavaScript, you'll need to learn how they work.

What is a constructor? It's an ordinary function that is used with the new operator to produce a specialized type of object.

:::javascript
// `Color` is a constructor
var red = new Color(255, 0, 0);

In this example, red is a new "Color" object. But how does that work?

:::javascript
function Color(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
}

var red = new Color(255, 0, 0);

As you can see, the Color constructor is merely taking the arguments given to it and attaching them to the this object. That's because when the constructor is invoked by new, the constructor's this is set to the object that new will return.

Which means that the code above is roughly equivalent to:

:::javascript
var red = {
    r: 255,
    g: 0,
    b: 0
};

So why would we use a constructor? There are a couple of important reasons.

First, using a constructor means that all of these objects will be created with the same basic structure, and we are less likely to accidentally make a mistake than if we were creating a whole bunch of generic objects by hand. (Especially if we make the constructor throw errors on invalid input.)

Second, using a constructor means that the object is explicitly marked as an instance of Color.

:::javascript
var red = new Color(255, 0, 0);

var blue = { r: 255, g: 0, b: 0 };

// Outputs: true
console.log(red instanceof Color);

// Outputs: false
console.log(blue instanceof Color);

That gives us a means to ensure that we are receiving the correct type of data to process.

Third, using a constructor means that we can easily assign specialized methods to the constructor's prototype, and they will instantly be available to all objects created by the constructor.

:::javascript
function Color(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
}

Color.prototype.getAverage = function () {
    var total = this.r + this.g + this.b;
    var avg = total / 3;
    return parseInt(avg, 10);
};

var red = new Color(255, 0, 0);
var white = new Color(255, 255, 255);

// Outputs: 85
console.log(red.getAverage());

// Outputs: 255
console.log(white.getAverage());

It is important to always use the new keyword when invoking the constructor. Otherwise the constructor may clobber the this which was accidentally passed to it. In most cases that is the global object (window in the browser or global in Node.)

Because of this danger, it is customary to capitalize a constructor's name so that others know to invoke it with new.

An upcoming article will deal with how to further mitigate the danger inherent in working with constructors.

Josh Clanton

Test-Driven Development with Jasmine Presentation

2013-04-13T00:00:00+00:00

A couple of weeks ago, I gave a presentation to the NoVa Web Development meetup on TDD with Jasmine.

You can find the slides on GitHub.

Video of the presentation is included below.

You may also want to check out my in-progress book on Jasmine: Jasmine Testing - A Cloak and Dagger Guide.

Transforming Arrays with Array

2013-04-12T00:00:00+00:00

Originally published in A Drip of JavaScript.

One of the most common tasks that developers perform in any language is taking an array of values and transforming those values. Up until recently, doing that in JavaScript took a fair bit of boilerplate code. For instance, here is some code for darkening RGB colors:

:::javascript
var colors = [
    {r: 255, g: 255, b: 255 }, // White
    {r: 128, g: 128, b: 128 }, // Gray
    {r: 0,   g: 0,   b: 0   }  // Black
];

var newColors = [];

for (var i = 0; i < colors.length; i++) {
    transformed = {
        r: Math.round( colors[i].r / 2 ),
        g: Math.round( colors[i].g / 2 ),
        b: Math.round( colors[i].b / 2 )
    };

    newColors.push(transformed);
}

// Outputs:
// [
//    {r: 128, g: 128, b: 128 },
//    {r: 64,  g: 64,  b: 64  },
//    {r: 0,   g: 0,   b: 0   }
// ];
console.log(newColors);

As you can see, there's quite a bit going on in that code that isn't really about what we want to accomplish, but is keeping track of trivial things like the current index and moving the values into the new array. What if we didn't have to do all of that?

Fortunately in ECMAScript 5 (the latest version of JavaScript), we don't. Here is the same example rewritten to take advantage of the map method:

:::javascript
var newColors = colors.map(function(val) {
    return {
        r: Math.round( val.r / 2 ),
        g: Math.round( val.g / 2 ),
        b: Math.round( val.b / 2 )
    };
});

Much nicer isn't it? Invoking map returns a new array created by running a transformation function over each element of the original array.

Now the only thing you need to keep track of is the logic of the transformation itself.

Of course, map isn't limited to simple transformations like this. Your function can also make use of two additional parameters, the current index and the array itself. Consider the following example:

:::javascript
var starter = [1, 5, 5];

function multiplyByNext (val, index, arr) {
    var next = index + 1;

    // If at the end of array
    // use the first element
    if (next === arr.length) {
        next = 0;
    }

    return val * arr[next];
}

var transformed = starter.map(multiplyByNext);

// Outputs: [5, 25, 5]
console.log(transformed);

As you can see, the additional parameters make it easy to create transformation functions which use the array element's neighbors. This can be useful in implementing something like Conway's Game of Life.

Browser support for map is pretty good, but not universal. It isn't supported in IE 8 and below. You have a few options for dealing with this.

Don't use map.
Use something like es5-shim to make older IE's support map.
Use the _.map method in Underscore or Lodash for an equivalent utility function.

One of the most powerful techniques for avoiding programming bugs is to reduce the number of things that you are keeping track of manually. Array's map method is one more tool to help you do exactly that.

Thanks for reading! If you enjoyed this article, consider sending it to a friend.

Josh Clanton

What is an Array?

2013-04-05T00:00:00+00:00

Originally published in A Drip of JavaScript.

For an experienced developer, that question may seem simplistic, but in the case of JavaScript the answer is rather interesting.

Conceptually, an array is just a list of values which can be accessed by using an integer as the "key". The list starts at 0 and goes up from there. If we were to describe that with JavaScript's object notation, it would look like this:

:::javascript
fakeArray = {
    0: "value 1",
    1: "value 2"
}

I feel like we're missing something. Oh, I know. It's that pesky "length" property.

:::javascript
fakeArray = {
    0: "value 1",
    1: "value 2",
    length: 2
}

That's looking suspiciously array-like. And, as I've mentioned before, this is precisely how the arguments object works. What I haven't mentioned yet is that this is also how real arrays work "under the hood".

That's right, in JavaScript arrays are just a specialized type of object built into the language. It's easy to tell this by looking at the behavior of objects and arrays.

:::javascript
fakeArray = {
    0: "value 1",
    1: "value 2",
    length: 2
};

// Outputs "value 1"
console.log(fakeArray[0]);

realArray = ["value 1", "value 2"];
realArray.text = "some text";

// Outputs "some text"
console.log(realArray.text);

As you can see, you can access an object's properties in exactly the same way as an array's. And you can give an array additional properties just like any other object.

What about all those special array methods like indexOf, slice, and sort? Turns out, they're just functions attached to the array object. (More specifically, they belong to the Array prototype, but that's getting ahead of ourselves.)

:::javascript
realArray = ["value 1", "value 2"];

// Outputs "0"
console.log(realArray.indexOf("value 1"));

realArray.indexOf = function() {
    return "I'll never tell.";
};

// Outputs "I'll never tell."
console.log(realArray.indexOf("value 1"));

In fact, given enough time, it is possible to reimplement almost all of the native array functionality purely in terms of manipulating objects.

Here's an example of reimplementing the push method:

:::javascript
fakeArray = {
    length: 0,
    push: function (val) {
        // Place the new value into the
        // next available integer key
        this[this.length] = val;

        // Update the length property
        this.length = this.length + 1;

        // Return the updated length
        return this.length;
    }
};

fakeArray.push("first value");
fakeArray.push("second value");

// Outputs "first value"
console.log(fakeArray[0]);

// Outputs "second value"
console.log(fakeArray[1]);

The one important thing that can't be reimplemented is the convenient array literal syntax for creating arrays. (The square brackets.) But you can always use a constructor instead. In fact, the following two ways of creating an array are exactly equivalent.

:::javascript
literalWay = ["value 1"];

constructorWay = new Array("value 1");

If you're willing to give up the literal syntax, you can rebuild the concept of arrays in JavaScript entirely from scratch to achieve something like this:

:::javascript
myCustomArray = new CustomArray("value 1");

And now you know (if you didn't already) how arrays work in JavaScript.

If you have other subjects you'd like to see covered in the future, drop me a suggestion. Thanks for reading!

Josh Clanton

The Drip Discussion Group

2013-04-04T00:00:00+00:00

Have you ever wanted to discuss the concepts from an issue of A Drip of JavaScript? Well now you can!

There is now an official Drip Discussion Group on Google Groups.

While it is focused on the contents of the newsletter, other JavaScript questions are welcome as well. I hope you'll join me there!

Josh Clanton

Reordering Arrays with Array

2013-03-29T00:00:00+00:00

Originally published in A Drip of JavaScript.

In last week's issue I briefly mentioned the standard sort method available on all JavaScript arrays. It does just what you'd expect.

:::javascript
// Produces [1, 2, 3]
[3, 2, 1].sort();

// Produces ["a", "b", "c"]
["c", "b", "a"].sort();

// Produces [1, 2, "a", "b"]
["b", 2, "a", 1].sort();

As you can see, it sorts by dictionary order (numbers first, followed by letters). But what if you want to sort your array differently? For example, listing "better" cars first? How would you go about that? Fortunately, sort accepts a custom comparison function.

:::javascript
var cars = [
    "Honda Civic",
    "Ford Taurus",
    "Chevy Malibu"
]

cars.sort(function(a, b) {
    // Default to 0, which indicates
    // no sorting is necessary
    var returnVal = 0;

    // If `a` is a Chevy, subtract 1
    // to move `a` "up" in the sort order
    // because Chevys are awesome.
    if (a.match(/Chevy/)) {
        returnVal = returnVal - 1;
    }

    // If `b` is a Chevy, add 1
    // to move `b` "up" in the sort order
    if (b.match(/Chevy/)) {
        returnVal = returnVal + 1;
    }

    return returnVal;
});

// Outputs:
// ["Chevy Malibu", "Honda Civic", "Ford Taurus"]
console.log(cars);

The comparison function compares two values and returns a number.

If it returns a negative number, a will be sorted to a lower index in the array.
If it returns a positive number, a will be sorted to a higher index.
And if it returns 0 no sorting is necessary.

When you pass sort a comparison function, that function will be called repeatedly and given different values from the array until the array has been completely sorted.

It is important to note that returning 0 does not guarantee that a and b will remain in the same order. It merely means that sorting is not necessary. JavaScript engines may choose to keep them in the same order, but that is not part of the language spec.

Thanks for reading! If you enjoyed this issue, why not subscribe to the newsletter?