JavaScript: The First Parts Part Three Douglas Crockford Yahoo! Inc.
Section 8 Programming Style and Your Brain: Douglas Crockford
-
Upload
jaxconf -
Category
Technology
-
view
955 -
download
1
description
Transcript of Section 8 Programming Style and Your Brain: Douglas Crockford
![Page 1: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/1.jpg)
Programming Style
& Your Brain
Section 8
![Page 2: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/2.jpg)
Programming Style
&Your Brain
Douglas Crockford
![Page 3: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/3.jpg)
![Page 4: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/4.jpg)
Head.Gut.
Two Systems.
![Page 5: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/5.jpg)
Visual Processing.
An analogy.
![Page 6: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/6.jpg)
![Page 7: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/7.jpg)
![Page 8: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/8.jpg)
Advertising.
![Page 9: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/9.jpg)
Tobacco.
![Page 10: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/10.jpg)
Computer Programs.
The most complicated things people make.
![Page 11: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/11.jpg)
Artificial Intelligence.
![Page 12: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/12.jpg)
Programming Language.
![Page 13: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/13.jpg)
Perfection.
![Page 14: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/14.jpg)
Hunters and Gatherers.
![Page 15: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/15.jpg)
Programming uses Head and Gut.
Tradeoffs.
![Page 16: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/16.jpg)
JavaScript.
Good Parts.Bad Parts.
![Page 17: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/17.jpg)
JSLint.
JSLint defines a professional subset of JavaScript.
http://www.JSLint.com/
![Page 18: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/18.jpg)
WARNING!JSLint will hurt your
feelings.
![Page 19: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/19.jpg)
Left or Right?
block{
....
}
block { ....
}
![Page 20: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/20.jpg)
Left or Right?
block{
....
}
• Be consistent.
block { ....
}
• Everyone should do it like I do.
![Page 21: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/21.jpg)
Left or Right?
return
{
ok: false
};
• SILENT ERROR!
return {
ok: true
};
• Works well in JavaScript.
![Page 22: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/22.jpg)
Prefer forms that are error resistant.
![Page 23: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/23.jpg)
switch statement.
The fallthrough hazard.
![Page 24: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/24.jpg)
“That hardly ever happens”
is another way of saying“It happens”.
![Page 25: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/25.jpg)
A good style can help produce better programs.
Style is should not be about personal preference and self-
expression.
![Page 26: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/26.jpg)
THEROMANSWROTELATINALLINUPPERCASEWITH
NOWORDBREAKSORPUNCTUATION
![Page 27: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/27.jpg)
Medieval copyists introduced lowercase, word breaks, and
punctuation.
These innovations helped reduce the error rate.
![Page 28: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/28.jpg)
Good use of style can help reduce the occurrence of
errors.
![Page 29: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/29.jpg)
The Elements of StyleWilliam Strunk
http://www.crockford.com/wrrrld/style.html
![Page 30: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/30.jpg)
Programs must communicate clearly to people.
![Page 31: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/31.jpg)
Use elements of good composition where applicable.
For example, use a space after a comma, not before.
![Page 32: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/32.jpg)
Use spaces to disambiguate parens.
• No space before ( when used to invoke a function.• No space between a function name and a
parameter list.• One space between all other names and (.• Wrong:
foo (bar); return(a+b); if(a=== 0) {…} function foo (b) {…} function(x) {…}
![Page 33: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/33.jpg)
Immediately Invocable Function Expressions
function () {
...
}(); // Syntax error!
![Page 34: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/34.jpg)
Immediately Invocable Function Expressions
(function () {
...
})();
![Page 35: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/35.jpg)
Immediately Invocable Function Expressions
(function () {
...
})();
Dog balls
![Page 36: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/36.jpg)
Immediately Invocable Function Expressions
(function () {
...
}()); // Neatness counts.
![Page 37: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/37.jpg)
The Heartbreak of Automatic Semicolon Insertion
x = y // <-- Missing semicolon
(function () {
...
}());
• Never rely on automatic semicolon insertion!
![Page 38: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/38.jpg)
with statement.with (o) {
foo = koda;
}
o.foo = koda;
o.foo = o.koda;
foo = koda;
foo = o.koda;
![Page 39: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/39.jpg)
with statement.with (o) {
foo = koda;
}
o.foo = koda;
o.foo = o.koda;
foo = koda;
foo = o.koda;
I am not saying that it isn’t useful.I am saying that there is never a case
where it isn’t confusing.
![Page 40: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/40.jpg)
Confusion must be avoided.
![Page 41: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/41.jpg)
Transitivity? What's That?0 == '' // true0 == '0' // true'' == '0' // falsefalse == 'false' // falsefalse == '0' // true" \t\r\n " == 0 // true
Always use ===, never ==.
![Page 42: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/42.jpg)
If there is a feature of a language that is sometimes problematic, and if it can be
replaced with another feature that is more reliable, then
always use the more reliable feature.
![Page 43: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/43.jpg)
Multiline string literals
var long_line_1 = "This is a \
long line"; // ok
var long_line_2 = "This is a \
long line"; // syntax error
![Page 44: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/44.jpg)
Avoid forms that are difficult to distinguish from common
errors.
![Page 45: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/45.jpg)
if (a = b) {…}
a = b;if (a) {…}
if (a === b) {…}
![Page 46: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/46.jpg)
Make your programs look like what they do.
![Page 47: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/47.jpg)
Scope.
Block scope v function scope.
![Page 48: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/48.jpg)
var statement.• It gets split into two parts:
The declaration part gets hoisted to the top of the function, initializing with undefined.
The initialization part turns into an ordinary assignment. So function foo() {
...
var myVar = 0, myOtherVar;
• Expands into function foo() {
var myVar = undefined,
myOtherVar = undefined;
...
myVar = 0;
![Page 49: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/49.jpg)
Declare all variables at the top of the function.
Declare all functions before you call them.
![Page 50: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/50.jpg)
for (var i …) {…}
Variable i is not scoped to the loop.
![Page 51: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/51.jpg)
Write in the language you are writing in.
![Page 52: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/52.jpg)
Let there be let.
![Page 53: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/53.jpg)
Global variables.
• Global variables are evil.• Avoid global variables.• When using global variables, be explicit.
UPPER_CASE• Global variables should be as rare as
hens teeth and stick out like a sore thumb.
![Page 54: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/54.jpg)
new prefix
Forgetting new causes a constructor to clobber global variables without warning.
Fixed in ES5/strict.
![Page 55: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/55.jpg)
Constructor functions should be named with InitialCaps.
Nothing else should be named with InitialCaps.
![Page 56: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/56.jpg)
var a = b = 0;
var a = 0, b = 0;
b = 0;
var a = b;
![Page 57: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/57.jpg)
Write in a way that clearly communicates your intent.
![Page 58: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/58.jpg)
++
![Page 59: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/59.jpg)
++
x += 1
![Page 60: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/60.jpg)
++
x += 1
x++
![Page 61: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/61.jpg)
++
x += 1
x++
++x
![Page 62: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/62.jpg)
++x;++x;
x += 2;
![Page 63: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/63.jpg)
For no cost, by adopting a more rigorous style, many classes of errors can be automatically avoided.
![Page 64: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/64.jpg)
if (a) b(); c();
![Page 65: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/65.jpg)
if (a) b(); c();
if (a) {b(); c();}
if (a) {b();} c();
![Page 66: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/66.jpg)
As our processes become more agile, our coding must
be more resilient.
![Page 67: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/67.jpg)
Bad stylists
• Under educated.• Old school.• Thrill seeker.• Exhibitionist.
![Page 68: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/68.jpg)
“That was intentional.”
“I know what I’m doing.”
![Page 69: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/69.jpg)
Programming is the most complicated thing that humans do.
Computer programs must be perfect.Humans are not good at perfect.
![Page 70: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/70.jpg)
Designing a programming style demands discipline.
It is not selecting features because they are liked, or pretty,
or familiar.
![Page 71: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/71.jpg)
The Abyss
![Page 72: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/72.jpg)
The JSLint style was driven by the need to automatically
detect defects.
Forms that can hide defects are considered defective.
![Page 73: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/73.jpg)
Language Subsetting.
Only a madman would use all of C++.
![Page 74: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/74.jpg)
There will be bugs.
Do what you can to move the odds to your favor.
![Page 75: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/75.jpg)
Good style is good for your gut.
![Page 76: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/76.jpg)
;
![Page 77: Section 8 Programming Style and Your Brain: Douglas Crockford](https://reader034.fdocuments.us/reader034/viewer/2022052619/555e28ded8b42a6a4c8b508c/html5/thumbnails/77.jpg)
The Analytical Language of John WilkinsJorge Luis Borges
These ambiguities, redundancies and deficiencies remind us of those which doctor Franz Kuhn attributes to a certain Chinese encyclopedia entitled The Celestial Emporium of Benevolent Knowledge. In its remote pages it is written that the animals are divided into
a. belonging to the Emperorb. embalmedc. trainedd. pigletse. sirensf. fabulousg. stray dogsh. included in this classificationi. trembling like crazyj. innumerablesk. drawn with a very fine camelhair brushl. et ceteram. just broke the vasen. from a distance look like flies