programming style and your brain · programming style & your brain section 8 . programming...

76
Programming Style & Your Brain Section 8

Upload: others

Post on 27-Jul-2020

15 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Programming Style

& Your Brain

Section 8

Page 2: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Programming Style

& Your Brain

Douglas Crockford

Yahoo!

Page 3: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An
Page 4: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Head. Gut.

Two Systems.

Page 5: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Visual Processing.

An analogy.

Page 6: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An
Page 7: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An
Page 8: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An
Page 9: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Advertising.

Page 10: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Tobacco.

Page 11: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Computer Programs.

The most complicated things people make.

Page 12: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Artificial Intelligence.

Page 13: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Programming Language.

Page 14: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Perfection.

Page 15: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Hunters and Gatherers.

Page 16: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Programming uses Head and Gut.

Tradeoffs.

Page 17: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

JavaScript.

Good Parts.

Bad Parts.

Page 18: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

JSLint.

JSLint defines a professional subset of JavaScript.

http://www.JSLint.com/

Page 19: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

WARNING! JSLint will hurt your

feelings.

Page 20: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Left or Right?

block

{

....

}

block {

....

}

Page 21: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Left or Right?

block

{

....

}

• Be consistent.

block {

....

}

• Everyone should do it like I do.

Page 22: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Left or Right?

return

{

ok: false

};

• SILENT ERROR!

return {

ok: true

};

• Works well in JavaScript.

Page 23: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Prefer forms that are error resistant.

Page 24: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

switch statement.

The fallthrough hazard.

Page 25: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

“That hardly ever happens”

is another way of saying “It happens”.

Page 26: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

A good style can help produce better programs.

Style is should not be about personal preference and self-

expression.

Page 27: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

THEROMANSWROTELATIN ALLINUPPERCASEWITH

NOWORDBREAKS ORPUNCTUATION

Page 28: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Medieval copyists introduced lowercase, word breaks, and

punctuation.

These innovations helped reduce the error rate.

Page 29: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Good use of style can help reduce the occurrence of

errors.

Page 30: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

The Elements of Style William Strunk

http://www.crockford.com/wrrrld/style.html

Page 31: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Programs must communicate clearly to people.

Page 32: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Use elements of good composition where applicable.

For example, use a space after a comma, not before.

Page 33: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

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 34: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Immediately Invocable Function Expressions

function () {

...

}(); // Syntax error!

Page 35: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Immediately Invocable Function Expressions

(function () {

...

})();

Page 36: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Immediately Invocable Function Expressions

(function () {

...

})();

Dog balls

Page 37: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Immediately Invocable Function Expressions

(function () {

...

}()); // Neatness counts.

Page 38: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

The Heartbreak of Automatic Semicolon Insertion

x = y // <-- Missing semicolon

(function () {

...

}());

• Never rely on automatic semicolon insertion!

Page 39: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

with statement.

with (o) {

foo = koda;

}

o.foo = koda;

o.foo = o.koda;

foo = koda;

foo = o.koda;

Page 40: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

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 41: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Confusion must be avoided.

Page 42: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Transitivity? What's That?

0 == '' // true

0 == '0' // true

'' == '0' // false

false == 'false' // false

false == '0' // true

" \t\r\n " == 0 // true

Always use ===, never ==.

Page 43: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

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 44: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

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 45: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Avoid forms that are difficult to distinguish from common

errors.

Page 46: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

“That was intentional.”

“I know what I’m doing.”

Page 47: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

if (a = b) {…}

a = b;

if (a) {…}

if (a === b) {…}

Page 48: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Make your programs look like what they do.

Page 49: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Scope.

Block scope v function scope.

Page 50: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

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 51: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Declare all variables at the top of the function.

Declare all functions before

you call them.

Page 52: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

for (var i …) {…}

Variable i is not scoped to the loop.

Page 53: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Write in the language you are writing in.

Page 54: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Let there be let.

Page 55: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

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 56: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

new prefix

Forgetting new causes a

constructor to clobber global variables without warning.

Fixed in ES5/strict.

Page 57: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Constructor functions should be named with InitialCaps.

Nothing else should be named with InitialCaps.

Page 58: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

var a = b = 0;

var a = 0, b = 0;

b = 0;

var a = b;

Page 59: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Write in a way that clearly communicates your intent.

Page 60: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

++

Page 61: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

++

x += 1

Page 62: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

++

x += 1

x++

Page 63: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

++

x += 1

x++

++x

Page 64: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

++x; ++x;

x += 2;

Page 65: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

For no cost, by adopting a more rigorous style, many

classes of errors can be automatically avoided.

Page 66: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

if (a) b(); c();

Page 67: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

if (a) b(); c();

if (a) {b(); c();}

if (a) {b();} c();

Page 68: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

As our processes become more agile, our coding must be more

resilient.

Page 69: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Programming is the most complicated thing that humans do.

Computer programs must be perfect.

Humans are not good at perfect.

Page 70: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Designing a programming style demands discipline.

It is not selecting features because they are liked, or pretty, or

familiar.

Page 71: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

The Abyss

Page 72: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

The JSLint style was driven by the need to automatically

detect defects.

Forms that can hide defects are considered defective.

Page 73: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Language Subsetting.

Only a madman would use all of C++.

Page 74: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

There will be bugs.

Do what you can to move the odds to your favor.

Page 75: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Good style is good for your gut.

Page 76: Programming Style and Your Brain · Programming Style & Your Brain Section 8 . Programming Style & Your Brain Douglas Crockford Yahoo! Head. Gut. Two Systems. Visual Processing. An

Thank you and good night.