Errata

JavaScript Patterns

Errata for JavaScript Patterns

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".

The following errata were submitted by our customers and approved as valid errors by the author or editor.

Color key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted By Date submitted Date corrected
PDF
Page 13
2nd paragraph in "Access to the Global Object" (first sentence after code example)

"(that is, not as constrictors with new)"

"constrictors" should be "constructors"

Felix Kling  Nov 29, 2010  Oct 21, 2011
Printed
Page 19
Second paragraph

is case the man -> in case the man

David Rio Deiros  Jun 08, 2011  Oct 21, 2011
Printed
Page 20
First code snippet, Object.prototype

Object.protoype -> Object.prototype

David Rio Deiros  Jun 08, 2011  Oct 21, 2011
Printed
Page 21
Title of the second section on the page: "Avoiding eval()"

"Avoiding eval()" is shown as a subsection of "Avoiding Implied Typecasting" both in the table of contents and on page 21. Notice that those sections have different title font sizes.

Note from the Author or Editor:
Correct, "Avoiding eval()" should be the same heading level as the headings before and after

Bora Eryilmaz  Aug 22, 2012  Nov 02, 2012
Printed
Page 29
2nd paragraph under "Other Naming Patterns"

The book states: "there is no way to define constants in JavaScript".

We actually can create constants using the const keyword:
const foo = 42;

Note from the Author or Editor:
well, not standartized yet

Change

there is no way to define constants in JavaScript (although...)

to

there is no standard way to define constants in JavaScript yet (although.... and, additionally, a `const` is expected in ECMAScript 6)

Andor Salga  Jan 10, 2012  Nov 02, 2012
Printed
Page 37
3rd paragraph (after bullet points)

3rd para starts with
"JSLint is written is JavaScript"
should be
"JSLint is written in JavaScript"

Note from the Author or Editor:
"JSLint is written in JavaScript"

IN not IS

Alan Rew  Mar 18, 2012  Nov 02, 2012
Printed, PDF
Page 65
3rd paragraph

The information in the sentence:

"If findNodes() were a method of an object called dom (like dom.findNodes()), then `this` *inside of the callback* would refer to *dom* instead of the expected myapp"

is incorrect. Value of `this` inside such a call will still refer to the global object and not to `dom` object, since if the `base` object of the Reference type is an `activation object`, then `this` value is set to `undefined` and as a result to global.

Additional info: http://dmitrysoshnikov.com/ecmascript/chapter-3-this/#-reference-type-and-null-this-value

Dmitry A. Soshnikov (a reviewer of the book).

Note from the Author or Editor:
It's probably not clear what that sentence meant. I had in mind something like http://jsbin.com/uzaziy/1/edit where `this === dom`

So let's try to make it clearer (` and ` mean code formating)

change

If `findNodes()` were a method of an object called `dom`

to

If `findNodes()` was defined as a method of an object called `dom`

Dmitry A. Soshnikov  Nov 16, 2010  Nov 02, 2012
Printed
Page 65
3rd paragraph

"The object this will refer to the global object, because findNodes() is a global function. ..."

The object this will refer to the global object because the callback is invoked as a function, not as a method.

Note from the Author or Editor:
Change

The object `this` will refer to the global object, because `findNodes()` is a global function.

to

The object `this` will refer to the global object because `findNodes()` is invoked as a function, not as a method.

where ` and ` mean code formatting

Anonymous  Sep 20, 2012  Nov 02, 2012
Printed
Page 73
last paragraph

"which instructs the JavaScript engine to treat the curly braces as object literal"

should be:

"as an object literal"

Michael Bolin
Michael Bolin
 
Mar 17, 2011  Oct 21, 2011
Printed
Page 73
large code sample

The book generally uses camelCase or underscores in variable names; however, there are a few exceptions, such as in this code example:

maxwidth, maxheight

prefer maxWidth, maxHeight

Note from the Author or Editor:
All the instances of maxwidth should become max_width
Similarly maxheight should read max_height

I counted two instances but worth checking again

Michael Bolin
Michael Bolin
 
Mar 17, 2011  Nov 02, 2012
Printed
Page 75
IE test

O'Reilly posting erratum included in a review:

I did not read it but I discover one nasty bug in your code at page 75. IE test:

if (typeof document.attachEvent === 'function')

will never return true in IE because typeof will return 'object' instead of 'function'. Most common test is

if (!window.opera && window.attachEvent)

to be sure that we are using IE and not Opera and just test presence of attachEvent function by implicit type conversion.

Note from the Author or Editor:
Replace all (more than a few occurrences)

typeof window.addEventListener === 'function'

with

window.addEventListener


replace all

typeof document.attachEvent === 'function'

with

document.attachEvent

Anonymous  Jun 08, 2011  Nov 02, 2012
Printed
Page 78
last bullet

Claims that a con is: "Property names cannot be minified."

Note that property names can be minified using the Advanced mode of the Closure Compiler.

Note from the Author or Editor:
Change

Property names cannot be minified

to

Property names cannot always be safely minified, especially by simpler minifiers

Michael Bolin
Michael Bolin
 
Mar 17, 2011  Nov 02, 2012
Printed
Page 79
3rd paragraph from below

sayHi.apply(alien, ["humans"]);

This is not valid because sayHi is not in scope.
The following will work:
alien.sayHi.apply(alien, ["humans"]);

Note from the Author or Editor:
yeah, it's in scope only if it's considered continuation of the previous example. But there's no value in that, so it should be fixed.

sayHi.apply(alien, ["humans"]); // "Hello, humans!"

should become

alien.sayHi.apply(alien, ["humans"]); // "Hello, humans!"

Ren? Vermeulen  Nov 18, 2010  Nov 02, 2012
Printed
Page 80
first code sample

As already pointed out by Ren Vermeulen on p.79, sayHi.apply/sayHi.call should be alien.sayHi. It's not that the code doesn't work as you say (because it does), but it's misleading because you're trying to demonstrate that:

alien.sayHi('world');

is the same as:

alien.sayHi.apply(alien, ['world']);

which only happens to behave the same as:

sayHi.apply(alien, ['world']);

because you have defined sayHi in exactly the same way in both examples, neither of which reference `this`.

Michael Bolin
Michael Bolin
 
Mar 17, 2011  Nov 02, 2012
Printed
Page 91
4th bullet

"Advanced minification tools such as...Google Closure compiler will rename local variables...but never global variables, because it's not safe to do so."

This is not true of the Closure Compiler -- in Advanced mode, it has this capability. Admittedly, it is not safe for arbitrary JS, but it is if you follow the caveats for Advanced mode:

http://code.google.com/closure/compiler/docs/api-tutorial3.html

Note from the Author or Editor:
Make the last bullet (where ` and ` denotes code formatting):

Smaller code after minification?most minification tools will rename local variables (so `event` will likely become just one character such as A) but willl not rename global variables, because it?s usually not safe to do so. (Google Closure compiler in "advanced" mode is an exception, but even then you have to be careful.)

Michael Bolin
Michael Bolin
 
Mar 17, 2011  Nov 02, 2012
Printed
Page 103
Code example under heading "Adding Modules"

box.dettachEvent = function () {};

Not technically an error since functions can be named anything, but it's spelled detach, not dettach.

adrian_schmidt  Oct 13, 2010  Oct 21, 2011
Printed
Page 113
paragraph just above the "Summary" section

This paragraph provides a misleading or incorrect description of what the preceding code snippet is actually doing. It states: "...first, we do the due diligence of checking whether the method is already implemented. If not, we proceed with adding the function passed as argument implementation to the prototype of the constructor".

The due diligence is to check whether the method() function has already been added to Function.prototype. If not, we add the method() function to Function.prototype. The code to "add the function passed as argument implementation to the prototype of the constructor" is not executed until the method() function is invoked, which never happens in the snippet of code that is depicted.

Note from the Author or Editor:
Good point, the paragraph should read (where ` and ` wrap a code-formatted word):
---
In this snippet, first we do the due diligence of checking whether `method()` doesn't already exist on `Function.prototype`. If not, we proceed with adding it. Then the job of the `method()` is to take the function passed as the argument `implementation` and add it to the prototype of the constructor. Here `this` refers to the constructor function, the prototype of which is augmented.

Carlos Devoto  Mar 18, 2011  Nov 02, 2012
Printed
Page 115
2nd paragraf, 4th line

"we want to reuse cod;." should be "we want to reuse code."

adrian_schmidt  Oct 14, 2010  Oct 21, 2011
Printed
Page 122
Figure 6-4

The heading for object #3 in Figure 6-4 should say 'new Child("Patrick")' instead of 'new Parent("Patrick")'

Note from the Author or Editor:
The heading for object #3 in Figure 6-4 should say 'new Child("Patrick")' instead of 'new Parent("Patrick")'

Carlos Devoto  Mar 21, 2011  Nov 02, 2012
Printed
Page 133
Last paragraph

It is stated that "With the shallow copy (because objects are passed by reference in JavaScript), if you change a property of the child, and this property happens to be an object, then you'll be modifying the parent as well.

The word "change" would be better stated as "mutate", because if you "change" a property of the child by reassigning it, the parent is not affected.

Note from the Author or Editor:
Change

"if you change a property of the child"

to read

"if you mutate a property of the child"

Wyatt Pearsall  Jun 11, 2012  Nov 02, 2012
Printed
Page 138
1st code example, line 10 (on this page)

Since line 8 says:

return callback('Hola');

Line 10 is wrong:

yetanother.method(one.say); // "Holla, undefined"

It should say:

yetanother.method(one.say); // "Hola, undefined"

Note from the Author or Editor:
change "Holla, undefined" to "Hola, undefined" (one L)

adrian_schmidt  Oct 15, 2010  Nov 02, 2012
Printed
Page 138
index term

Add the index term "bind" to this page.

Nellie McKesson
Nellie McKesson
 
Jan 19, 2012  Nov 02, 2012
Printed
Page 144
2nd paragraf (not counting the code example), 2nd line.

"the rewritten constrictor is executed." should be "the rewritten constructor is executed."

adrian_schmidt  Oct 15, 2010  Oct 21, 2011
Printed
Page 147
The first code example

cherokee.drive(); // "Vroom, I have 17 doors"
But on page 148, CarMaker.SUV is defined to have 24 doors:
Carmaker.SUV = function () {
this.doors = 24;
};

Note from the Author or Editor:
On page 148, change

this.doors = 24;

to

this.doors = 17;

To me 17 looks exaggerated enough but a little funnier and nonsensical being a prime :)

adrian_schmidt  Oct 15, 2010  Nov 02, 2012
PDF
Page 155
First code snippet,

for (i = 0; i < max; i += 1) {
name = this.decorators_list[i];
price = Sale.decorators[name].getPrice(price);
}

if the sale decorated by mutiple decorators,i'm afraid of these code can't get the correct price result

Note from the Author or Editor:
Works as advertised when it comes to the decorators part. However there's a mistake in the constructor where the `price` initializes to `true`, which is later converted to 1 so the final decorated price is almost certainly off, unless you work with $1 :)

So on page 154 change

this.price = (price > 0) || 100;

to

this.price = price || 100;

like in the previous example on page 152

Anonymous  Jun 30, 2011  Nov 02, 2012
Printed
Page 172
2nd code sample

There is an extra space after this.key in the assignment:

this.key = key;

Note from the Author or Editor:
It's actually page 176. Remove one of the spaces after `this.key`. The text should read

this.key = key;

Michael Bolin
Michael Bolin
 
Mar 17, 2011  Nov 02, 2012