13137707 JavaScript the Good Parts

7/31/2019 13137707 JavaScript the Good Parts

1/58

JavaScript:The Good Parts

Douglas Crockford

Yahoo! Inc.

http://www.crockford.com/codecamp/


2/58

The World's MostMisunderstood Programming

Language


3/58

A language of many

contrasts.


4/58

The broadest range ofprogrammer skills of anyprogramming language.

From computer scientiststo cut-n-pasters

and everyone in between.


5/58

Complaints

"JavaScript is not a language I know."

"The browser programming

experience is awful." "It's not fast enough."

"The language is just a pile ofmistakes."


6/58

Hidden under a huge

steaming pile of goodintentions and blunders is an

elegant, expressiveprogramming language.

JavaScript has good parts.


7/58

JavaScript is succeeding verywell in an environment where

Java was a total failure.


8/58

Influences

Self

prototypalinheritance

dynamic objects

Scheme

lambda

loose typing

Java

syntax

conventions

Perl

regular expressions


9/58

Bad Parts

Global Variables

+ adds and concatenates

Semicolon insertion

typeof

with and eval

phony arrays

== and !=

false, null, undefined, NaN


10/58

Transitivity? What's That?

'' == '0' // false

0 == '' // true

0 == '0' // true

false == 'false' // false

false == '0' // true

false == undefined // false false == null // false

null == undefined // true

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


11/58

value = myObject[name];

if (value == null) {

alert(name + ' not found.');

}

Two errors that cancel each other out.


12/58

value = myObject[name];

if (value === undefined) {

alert(name + ' not found.');

}


13/58

Good features that interactbadly

Objects can inherit from otherobjects.

Functions can be members ofobjects.

for..in statement mixes inherited

functions with the desired datamembers.


14/58

for in is troublesome

Design question: Should for..in do ashallow skim or a deep dredge?

Decision: Deep dredge. Theprogrammer must explicitly filter outthe deep members.

Except: They didn't tell anybody!

Consequence: Lots of confusionabout how to use for..in.


15/58

for in is troublesome

Better Decision: Don't release thelanguage broadly until we haveenough experience to have

confidence that we made the rightchoice.

Historical Context: Getting it right atNetscape wasn't an option.


16/58

Bad Heritage

Blockless statements

if (foo)

bar();

Expression statements

foo;

Floating point arithmetic

0.1 + 0.2 !== 0.3

++ and --

switch


17/58

Good Parts

Lambda

Dynamic Objects

Loose Typing

Object Literals


18/58

Inheritance

Inheritance is object-oriented codereuse.

Two Schools: Classical

Prototypal


19/58

Prototypal Inheritance

Class-free.

Objects inherit from objects.

An object contains a link to anotherobject: Delegation. DifferentialInheritance.

var newObject =

Object.create(oldObject);newObject__proto__

oldObject


20/58

Prototypal Inheritance

if (typeof Object.create !== 'function') {

Object.create = function (o) {

function F() {}

F.prototype = o;

return new F();

};

}


21/58

new

The new operator is required whencalling a Constructor function.

Ifnew is omitted, the global object isclobbered by the constructor.

There is no compile-time or run-time

warning.


22/58

Global

var names = ['zero', 'one', 'two',

'three', 'four', 'five', 'six',

'seven', 'eight', 'nine'];

var digit_name = function (n) {

return names[n];

};

alert(digit_name(3)); // 'three'


23/58

Slow

var digit_name = function (n) {




return names[n];

};



24/58

Closure

var digit_name = function () {




return function (n) {

return names[n];

};

}();



25/58


26/58

Module pattern is easilytransformed into a powerful

constructor pattern.


27/58

Power Constructors

1. Make an object.

Object literal

new

Object.create

call another power constructor


28/58

Power Constructors

1. Make an object.

Object literal, new, Object.create, callanother power constructor

2. Define some variables andfunctions.

These become private members.


29/58

Power Constructors

1. Make an object.




3. Augment the object with privilegedmethods.


30/58

Power Constructors

1. Make an object.




3. Augment the object with privilegedmethods.


31/58

Step One

function myPowerConstructor(x) {var that = otherMaker(x);

}


32/58

Step Two

function myPowerConstructor(x) {var that = otherMaker(x);var secret = f(x);

}


33/58

Step Three


that.priv = function () {... secret x that ...

};

}


34/58

Step Four


that.priv = function () {... secret x that ...

};

return that;}


35/58

Closure

A function object contains

A function (name, parameters, body)

A reference to the environment in whichit was created (context).

This is a very good thing.


36/58

Style Isn't Subjective

block

{

....}

Might work well inother languages

block {

....

}

Works well inJavaScript


37/58


return

{

ok: false};

SILENT ERROR!

return {

ok: true

};

Works well inJavaScript


38/58


return

{

ok: false

};


39/58


return; // semicolon insertion

{

ok: false

};


40/58


return;

{// block

ok: false

};


41/58


return;

{

ok: false // label

};


42/58


return;

{ // useless

ok: false // expression

}; // statement


43/58


return;

{

ok: false; // semicolon

}; // insertion


44/58


return;

{

ok: false;

}; // empty statement


45/58


return;

{ // unreachable statement

ok: false;

}


46/58


return

{

ok: false};

Bad style

return;

{

ok: false;}

Bad results


47/58

Working with the Grain


48/58

A Personal Journey

Beautiful Code


49/58

JSLint

JSLint defines a professional subsetof JavaScript.

It imposes a programming disciplinethat makes me much more confidentin a dynamic, loosely-typedenvironment.

http://www.JSLint.com/


50/58

WARNING!JSLint will hurt your

feelings.


51/58

Unlearning Is

Really Hard

Perfectly Fine == Faulty


52/58

It's not ignorance does somuch damage; it's knowin' so

derned much that ain't so.

Josh Billings


53/58

The Very Best Part:

StabilityNo new design errors

since 1999!


54/58

Coming Soon

[ES3.1] ECMAScript Fourth Edition

Corrections

Reality

Support for object hardening

Strict mode for reliability

Waiting on implementations


55/58

Not Coming Soon

[ES4] This project has beencancelled.

Instead, [ES-Harmony].

So far, this project has no definedgoals or rules.


56/58

Safe Subsets

The most effective way to make thislanguage better is to make it smaller.

FBJS Caja & Cajita

ADsafe

These subsets will be informing thedesign of a new secure language to

replace JavaScript.


57/58

The Good Parts

Your JavaScript application can reacha potential audience of billions.

If you avoid the bad parts, JavaScriptworks really well. There is somebrilliance in it.

It is possible to write good programswith JavaScript.


58/58

13137707 JavaScript the Good Parts

Documents

Transcript of 13137707 JavaScript the Good Parts