7/31/2019 13137707 JavaScript the Good Parts
1/58
JavaScript:The Good Parts
Douglas Crockford
Yahoo! Inc.
http://www.crockford.com/codecamp/
7/31/2019 13137707 JavaScript the Good Parts
2/58
The World's MostMisunderstood Programming
Language
7/31/2019 13137707 JavaScript the Good Parts
3/58
A language of many
contrasts.
7/31/2019 13137707 JavaScript the Good Parts
4/58
The broadest range ofprogrammer skills of anyprogramming language.
From computer scientiststo cut-n-pasters
and everyone in between.
7/31/2019 13137707 JavaScript the Good Parts
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."
7/31/2019 13137707 JavaScript the Good Parts
6/58
Hidden under a huge
steaming pile of goodintentions and blunders is an
elegant, expressiveprogramming language.
JavaScript has good parts.
7/31/2019 13137707 JavaScript the Good Parts
7/58
JavaScript is succeeding verywell in an environment where
Java was a total failure.
7/31/2019 13137707 JavaScript the Good Parts
8/58
Influences
Self
prototypalinheritance
dynamic objects
Scheme
lambda
loose typing
Java
syntax
conventions
Perl
regular expressions
7/31/2019 13137707 JavaScript the Good Parts
9/58
Bad Parts
Global Variables
+ adds and concatenates
Semicolon insertion
typeof
with and eval
phony arrays
== and !=
false, null, undefined, NaN
7/31/2019 13137707 JavaScript the Good Parts
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
7/31/2019 13137707 JavaScript the Good Parts
11/58
value = myObject[name];
if (value == null) {
alert(name + ' not found.');
}
Two errors that cancel each other out.
7/31/2019 13137707 JavaScript the Good Parts
12/58
value = myObject[name];
if (value === undefined) {
alert(name + ' not found.');
}
7/31/2019 13137707 JavaScript the Good Parts
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.
7/31/2019 13137707 JavaScript the Good Parts
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.
7/31/2019 13137707 JavaScript the Good Parts
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.
7/31/2019 13137707 JavaScript the Good Parts
16/58
Bad Heritage
Blockless statements
if (foo)
bar();
Expression statements
foo;
Floating point arithmetic
0.1 + 0.2 !== 0.3
++ and --
switch
7/31/2019 13137707 JavaScript the Good Parts
17/58
Good Parts
Lambda
Dynamic Objects
Loose Typing
Object Literals
7/31/2019 13137707 JavaScript the Good Parts
18/58
Inheritance
Inheritance is object-oriented codereuse.
Two Schools: Classical
Prototypal
7/31/2019 13137707 JavaScript the Good Parts
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
7/31/2019 13137707 JavaScript the Good Parts
20/58
Prototypal Inheritance
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
7/31/2019 13137707 JavaScript the Good Parts
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.
7/31/2019 13137707 JavaScript the Good Parts
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'
7/31/2019 13137707 JavaScript the Good Parts
23/58
Slow
var digit_name = function (n) {
var names = ['zero', 'one', 'two',
'three', 'four', 'five', 'six',
'seven', 'eight', 'nine'];
return names[n];
};
alert(digit_name(3)); // 'three'
7/31/2019 13137707 JavaScript the Good Parts
24/58
Closure
var digit_name = function () {
var names = ['zero', 'one', 'two',
'three', 'four', 'five', 'six',
'seven', 'eight', 'nine'];
return function (n) {
return names[n];
};
}();
alert(digit_name(3)); // 'three'
7/31/2019 13137707 JavaScript the Good Parts
25/58
7/31/2019 13137707 JavaScript the Good Parts
26/58
Module pattern is easilytransformed into a powerful
constructor pattern.
7/31/2019 13137707 JavaScript the Good Parts
27/58
Power Constructors
1. Make an object.
Object literal
new
Object.create
call another power constructor
7/31/2019 13137707 JavaScript the Good Parts
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.
7/31/2019 13137707 JavaScript the Good Parts
29/58
Power Constructors
1. Make an object.
Object literal, new, Object.create, callanother power constructor
2. Define some variables andfunctions.
These become private members.
3. Augment the object with privilegedmethods.
7/31/2019 13137707 JavaScript the Good Parts
30/58
Power Constructors
1. Make an object.
Object literal, new, Object.create, callanother power constructor
2. Define some variables andfunctions.
These become private members.
3. Augment the object with privilegedmethods.
7/31/2019 13137707 JavaScript the Good Parts
31/58
Step One
function myPowerConstructor(x) {var that = otherMaker(x);
}
7/31/2019 13137707 JavaScript the Good Parts
32/58
Step Two
function myPowerConstructor(x) {var that = otherMaker(x);var secret = f(x);
}
7/31/2019 13137707 JavaScript the Good Parts
33/58
Step Three
function myPowerConstructor(x) {var that = otherMaker(x);var secret = f(x);
that.priv = function () {... secret x that ...
};
}
7/31/2019 13137707 JavaScript the Good Parts
34/58
Step Four
function myPowerConstructor(x) {var that = otherMaker(x);var secret = f(x);
that.priv = function () {... secret x that ...
};
return that;}
7/31/2019 13137707 JavaScript the Good Parts
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.
7/31/2019 13137707 JavaScript the Good Parts
36/58
Style Isn't Subjective
block
{
....}
Might work well inother languages
block {
....
}
Works well inJavaScript
7/31/2019 13137707 JavaScript the Good Parts
37/58
Style Isn't Subjective
return
{
ok: false};
SILENT ERROR!
return {
ok: true
};
Works well inJavaScript
7/31/2019 13137707 JavaScript the Good Parts
38/58
Style Isn't Subjective
return
{
ok: false
};
7/31/2019 13137707 JavaScript the Good Parts
39/58
Style Isn't Subjective
return; // semicolon insertion
{
ok: false
};
7/31/2019 13137707 JavaScript the Good Parts
40/58
Style Isn't Subjective
return;
{// block
ok: false
};
7/31/2019 13137707 JavaScript the Good Parts
41/58
Style Isn't Subjective
return;
{
ok: false // label
};
7/31/2019 13137707 JavaScript the Good Parts
42/58
Style Isn't Subjective
return;
{ // useless
ok: false // expression
}; // statement
7/31/2019 13137707 JavaScript the Good Parts
43/58
Style Isn't Subjective
return;
{
ok: false; // semicolon
}; // insertion
7/31/2019 13137707 JavaScript the Good Parts
44/58
Style Isn't Subjective
return;
{
ok: false;
}; // empty statement
7/31/2019 13137707 JavaScript the Good Parts
45/58
Style Isn't Subjective
return;
{ // unreachable statement
ok: false;
}
7/31/2019 13137707 JavaScript the Good Parts
46/58
Style Isn't Subjective
return
{
ok: false};
Bad style
return;
{
ok: false;}
Bad results
7/31/2019 13137707 JavaScript the Good Parts
47/58
Working with the Grain
7/31/2019 13137707 JavaScript the Good Parts
48/58
A Personal Journey
Beautiful Code
7/31/2019 13137707 JavaScript the Good Parts
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/
7/31/2019 13137707 JavaScript the Good Parts
50/58
WARNING!JSLint will hurt your
feelings.
7/31/2019 13137707 JavaScript the Good Parts
51/58
Unlearning Is
Really Hard
Perfectly Fine == Faulty
7/31/2019 13137707 JavaScript the Good Parts
52/58
It's not ignorance does somuch damage; it's knowin' so
derned much that ain't so.
Josh Billings
7/31/2019 13137707 JavaScript the Good Parts
53/58
The Very Best Part:
StabilityNo new design errors
since 1999!
7/31/2019 13137707 JavaScript the Good Parts
54/58
Coming Soon
[ES3.1] ECMAScript Fourth Edition
Corrections
Reality
Support for object hardening
Strict mode for reliability
Waiting on implementations
7/31/2019 13137707 JavaScript the Good Parts
55/58
Not Coming Soon
[ES4] This project has beencancelled.
Instead, [ES-Harmony].
So far, this project has no definedgoals or rules.
7/31/2019 13137707 JavaScript the Good Parts
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.
7/31/2019 13137707 JavaScript the Good Parts
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.
7/31/2019 13137707 JavaScript the Good Parts
58/58