JavaScript Best Practices(Part-2)
Use call to Call Methods with a Custom Receiver
Ordinarily, the receiver of a function or method (i.e., the value bound to the special keyword this) is determined by the syntax of its caller. In particular, the method call syntax binds the object in which the method was looked up to this. However, it is sometimes necessary to call a function with a custom receiver, and the function may not already be a property of the desired receiver object. It’s possible, of course, to add the method to the object as a new property
The call method comes in handy for calling methods that may have been removed, modified, or overridden. Below item shows a useful example, where the hasOwnProperty method can be called on an arbitrary object, even if the object is a dictionary. In a dictionary object, looking up hasOwnProperty produces an entry from the dictionary rather than an inherited method
dict.hasOwnProperty = 1;
dict.hasOwnProperty("foo"); // error: 1 is not a functionUsing the call method of the hasOwnProperty method makes it possible to call the method on the dictionary even though the method is not stored anywhere in the object:
var hasOwnProperty = {}.hasOwnProperty;
dict.foo = 1;
delete dict.hasOwnProperty;
hasOwnProperty.call(dict, "foo"); // true
hasOwnProperty.call(dict, "hasOwnProperty"); // falseThe call method can also be useful when defining higher-order functions. A common idiom for a higher-order function is to accept an optional argument to provide as the receiver for calling the function.
Use apply to Call Functions with Different Numbers of Arguments
The apply method takes an array of arguments and calls the function as if each element of the array were an individual argument of the call. In addition to the array of arguments, the apply method takes a first argument that specifies the binding of this for the function being called. Since the average function does not refer to this, we can simply pass it null:
var scores = getAllScores();
average.apply(null, scores);If scores turns out to have, say, three elements, this will behave the same as if we had written:
average(scores[0], scores[1], scores[2]);Use bind to Extract Methods with a Fixed Receiver
Function objects come with a bind method that takes a receiver object and produces a wrapper function that calls the original function as a method of the receiver. Using bind, we can simplify our example:
var source = ["867", "-", "5309"];
source.forEach(buffer.add.bind(buffer));
buffer.concat(); // "867-5309"Keep in mind that buffer.add.bind(buffer) creates a new function rather than modifying the buffer.add function. The new function behaves just like the old one, but with its receiver bound to buffer, while the old one remains unchanged. In other words:
buffer.add === buffer.add.bind(buffer); // falseThis is a subtle but crucial point: It means that bind is safe to call even on a function that may be shared by other parts of a program. It is especially important for methods shared on a prototype object: The method will still work correctly when called on any of the prototype’s descendants.
Use bind to Curry Functions
The bind method of functions is useful for more than just binding methods to receivers. Imagine a simple function for constructing URL strings from components:
function simpleURL(protocol, domain, path) {
return protocol + "://" + domain + "/" + path;
}Frequently, a program may need to construct absolute URLs from site-specific path strings. A natural way to do this is with the ES5 map method on arrays:
var urls = paths.map(function(path) {
return simpleURL("http", siteDomain, path);
});Notice how the anonymous function uses the same protocol string and the same site domain string on each iteration of map; the first two arguments to simpleURL are fixed for each iteration, and only the third argument is needed. We can use the bind method on simpleURL to construct this function automatically:
var urls = paths.map(simpleURL.bind(null, "http", siteDomain));The call to simpleURL.bind produces a new function that delegates to simpleURL. As always, the first argument to bind provides the receiver value. (Since simpleURL does not refer to this, we can use any value; null and undefined are customary.) The arguments passed to simpleURL are constructed by concatenating the remaining arguments of simpleURL.bind to any arguments provided to the new function. In other words, when the result of simpleURL.bind is called with a single argument path, the function delegates to simpleURL(“http”, siteDomain, path).
The technique of binding a function to a subset of its arguments is known as currying.
Make Your Constructors new-Agnostic
When you create a constructor such as the User function below you rely on callers to remember to call it with the new operator. Notice how the function assumes that the receiver is a brand-new object:
function User(name, passwordHash) {
this.name = name;
this.passwordHash = passwordHash;
}If a caller forgets the new keyword, then the function’s receiver becomes the global object:
var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
u; // undefined
this.name; // "baravelli"
this.passwordHash; // "d8b74df393528d51cd19980ae0aa028e"Not only does the function uselessly return undefined, it also disastrously creates (or modifies, if they happen to exist already) the global variables name and passwordHash.
A more robust approach is to provide a function that works as a constructor no matter how it’s called. An easy way to implement this is to check that the receiver value is a proper instance of User:
function User(name, passwordHash) {
if (!(this instanceof User)) {
return new User(name, passwordHash);
}
this.name = name;
this.passwordHash = passwordHash;
}This way, the result of calling User is an object that inherits from User.prototype, regardless of whether it’s called as a function or as a constructor:
var x = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
var y = new User("baravelli",
"d8b74df393528d51cd19980ae0aa028e");
x instanceof User; // true
y instanceof User; // trueStore Instance State Only on Instance Objects
Understanding the one-to-many relationship between a prototype object and its instances is crucial to implementing objects that behave correctly. One of the ways this can go wrong is by accidentally storing per-instance data on a prototype. For example, a class implementing a tree data structure might contain an array of children for each node. Putting the array of children on the prototype object leads to a completely broken implementation:
function Tree(x) {
this.value = x;
}
Tree.prototype = {
children: [], // should be instance state!
addChild: function(x) {
this.children.push(x);
}
};Consider what happens when we try to construct a tree with this class:
var left = new Tree(2);
left.addChild(1);
left.addChild(3);var right = new Tree(6);
right.addChild(5);
right.addChild(7);var top = new Tree(4);
top.addChild(left);
top.addChild(right);top.children; // [1, 3, 5, 7, left, right]Each time we call addChild, we append a value to Tree.prototype .children, which contains the nodes in the order of any calls to addChild anywhere!
The correct way to implement the Tree class is to create a separate children array for each instance object:
function Tree(x) {
this.value = x;
this.children = []; // instance state
}
Tree.prototype = {
addChild: function(x) {
this.children.push(x);
}
};Prefer Iteration Methods to Loops
Good programmers hate writing the same code twice. Copying and pasting boilerplate code duplicates bugs, makes programs harder to change, clutters up programs with repetitive patterns, and leaves programmers endlessly reinventing the wheel. Perhaps worst of all, repetition makes it too easy for someone reading a program to overlook minor differences from one instance of a pattern to another.
JavaScript’s for loops are reasonably concise and certainly familiar from many other languages such as C, Java, and C#, but they allow for quite different behavior with only slight syntactic variation. Some of the most notorious bugs in programming result from simple mistakes in determining the termination condition of a loop:
for (var i = 0; i <= n; i++) { … } // extra end iteration for (var i = 1; i < n; i++) { … } // missing first iteration for (var i = n; i >= 0; i--) { … }
// extra start iteration
for (var i = n - 1; i > 0; i--) { … }
// missing last iterationLet’s face it: Figuring out termination conditions is a drag. It’s boring and there are just too many little ways to mess up.
Thankfully, JavaScript’s closures (see Item 11) are a convenient and expressive way to build iteration abstractions for these patterns that save us from having to copy and paste loop headers.
ES5 provides convenience methods for some of the most common patterns. Array.prototype.forEach is the simplest of these. Instead of writing:
for (var i = 0, n = players.length; i < n; i++) {
players[i].score++;
}we can write:
players.forEach(function(p) {
p.score++;
});This code is not only more concise and readable, but it also eliminates the termination condition and any mention of array indices.
Another common pattern is to build a new array by doing something to each element of another array. We could do this with a loop:
var trimmed = [];
for (var i = 0, n = input.length; i < n; i++) {
trimmed.push(input[i].trim());
}Alternatively, we could do this with forEach:
var trimmed = [];
input.forEach(function(s) {
trimmed.push(s.trim());
});But this pattern of building a new array from an existing array is so common that ES5 introduced Array.prototype.map to make it simpler and more elegant:
var trimmed = input.map(function(s) {
return s.trim();
});Another common pattern is to compute a new array containing only some of the elements of an existing array. Array.prototype.filter makes this straightforward: It takes a predicate—a function that produces a truthy value if the element should be kept in the new array, and a falsy value if the element should be dropped. For example, we can extract from a price list only those listings that fall within a particular price range:
listings.filter(function(listing) {
return listing.price >= min && listing.price <= max;
});
Of course, these are just methods available by default in ES5. There’s nothing stopping us from defining our own iteration abstractions. For example, one pattern that sometimes comes up is extracting the longest prefix of an array that satisfies a predicate:
function takeWhile(a, pred) {
var result = [];
for (var i = 0, n = a.length; i < n; i++) {
if (!pred(a[i], i)) {
break;
}
result[i] = a[i];
}
return result;
}var prefix = takeWhile([1, 2, 4, 8, 16, 32], function(n) {
return n < 10;
}); // [1, 2, 4, 8]Notice that we pass the array index i to pred, which it can choose to use or ignore. In fact, all of the iteration functions in the standard library, including forEach, map, and filter, pass the array index to the user-provided function.
We could also define takeWhile as a method by adding it to Array.prototype (see Item 42 for a discussion of the consequences of monkey-patching standard prototypes like Array.prototype):
Array.prototype.takeWhile = function(pred) {
var result = [];
for (var i = 0, n = this.length; i < n; i++) {
if (!pred(this[i], i)) {
break;
}
result[i] = this[i];
}
return result;
};var prefix = [1, 2, 4, 8, 16, 32].takeWhile(function(n) {
return n < 10;
}); // [1, 2, 4, 8]There is one thing that loops tend to do better than iteration functions: abnormal control flow operations such as break and continue. For example, it would be awkward to attempt to implement takeWhile using forEach:
function takeWhile(a, pred) {
var result = [];
a.forEach(function(x, i) {
if (!pred(x)) {
// ?
}
result[i] = x;
});
return result;
}We could use an internal exception to implement the early termination of the loop, but this would be awkward and likely inefficient:
function takeWhile(a, pred) {
var result = [];
var earlyExit = {}; // unique value signaling loop break
try {
a.forEach(function(x, i) {
if (!pred(x)) {
throw earlyExit;
}
result[i] = x;
});
} catch (e) {
if (e !== earlyExit) { // only catch earlyExit
throw e;
}
}
return result;
}Once an abstraction becomes more verbose than the code it is replacing, it’s a pretty sure sign that the cure is worse than the disease.
Alternatively, the ES5 array methods some and every can be used as loops that may terminate early. Arguably, these methods were not created for this purpose; they are described as predicates, applying a callback predicate repeatedly to each element of an array. Specifically, the some method returns a boolean indicating whether its callback returns a truthy value for any one of the array elements:
[1, 10, 100].some(function(x) { return x > 5; }); // true
[1, 10, 100].some(function(x) { return x < 0; }); // falseAnalogously, every returns a boolean indicating whether its callback returns a truthy value for all of the elements:
[1, 2, 3, 4, 5].every(function(x) { return x > 0; }); // true
[1, 2, 3, 4, 5].every(function(x) { return x < 3; }); // falseBoth methods are short-circuiting: If the callback to some ever produces a truthy value, some returns without processing any more elements; similarly, every returns immediately if its callback produces a falsy value.
This behavior makes these methods useful as a variant of forEach that can terminate early. For example, we can implement takeWhile with every:
function takeWhile(a, pred) {
var result = [];
a.every(function(x, i) {
if (!pred(x)) {
return false; // break
}
result[i] = x;
return true; // continue
});
return result;
}Prefer Array Literals to the Array Constructor
JavaScript’s elegance owes a lot to its concise literal syntax for the most common building blocks of JavaScript programs: objects, functions, and arrays. A literal is a lovely way to express an array:
var a = [1, 2, 3, 4, 5];Now, you could use the Array constructor instead:
var a = new Array(1, 2, 3, 4, 5);But even setting aside aesthetics, it turns out that the Array constructor has some subtle issues. For one, you have to be sure that no one has rebound the Array variable:
function f(Array) {
return new Array(1, 2, 3, 4, 5);
}
f(String); // new String(1)You also have to be sure that no one has modified the global Array variable:
Array = String;
new Array(1, 2, 3, 4, 5); // new String(1)There’s one more special case to worry about. If you call the Array constructor with a single numeric argument, it does something completely different: It attempts to create an array with no elements but whose length property is the given argument. This means that [“hello”] and new Array(“hello”) behave the same, but [17] and new Array(17) do completely different things!
These are not necessarily difficult rules to learn, but it’s clearer and less prone to accidental bugs to use array literals, which have more regular, consistent semantics.
Accept Options Objects for Keyword Arguments
Keeping consistent conventions for argument order, as suggests, is important for helping programmers remember what each argument in a function call means. This works to a point. But it simply doesn’t scale beyond a few arguments. Try making sense of a function call such as the following:
var alert = new Alert(100, 75, 300, 200,
"Error", message,
"blue", "white", "black",
"error", true);We’ve all seen APIs like this. It’s often the result of argument creep, where a function starts out simple, but over time, as the library expands in functionality, the signature acquires more and more arguments.
Fortunately, JavaScript provides a simple, lightweight idiom that works well for larger function signatures: the options object. An options object is a single argument that provides additional argument data through its named properties. The object literal form makes this especially pleasant to read and write:
var alert = new Alert({
x: 100, y: 75,
width: 300, height: 200,
title: "Error", message: message,
titleColor: "blue", bgColor: "white", textColor: "black",
icon: "error", modal: true
});This API is a little more verbose, but noticeably easier to read. Each argument becomes self-documenting: There’s no need for a comment explaining its role, since its property name explains it perfectly. This is especially helpful for boolean parameters such as modal: Someone reading a call to new Alert might be able to infer the purpose of a string argument from its contents, but a naked true or false is not particularly informative.
Support Method Chaining
A great example is the replace method of strings. Since the result is itself a string, we can perform multiple replacements by repeatedly calling replace on the result of the previous method call. A common usage of this pattern is for replacing special characters of a string before inserting it into HTML:
function escapeBasicHTML(str) {
return str.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}The first call to replace returns a string with all instances of the special character “&” replaced with the HTML escape sequence “&”; the second call then replaces any instances of “<” with the escape sequence “<“, and so on. This style of repeated method calls is known as method chaining. It’s not necessary to write in this style, but it’s much more concise than saving each intermediate result to an intermediate variable:
function escapeBasicHTML(str1) {
var str2 = str1.replace(/&/g, “&”);
var str3 = str2.replace(//g, “>”);
var str5 = str4.replace(/”/g, “””);
var str6 = str5.replace(/’/g, “‘”);
return str6;
}
