javascript: the good parts
DESCRIPTION
JavaScript is a language with more than its share of bad parts. It went from non-existence to global adoption in an alarmingly short period of time. It never had an interval in the lab when it could be tried out and polished.But it also has some extraordinarily good parts. In JavaScript there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders. Unfortunately, the best nature of JavaScript was so effectively hidden that for many years the prevailing opinion of JavaScript was that it was an unsightly, incompetent toy.In this presentation Douglas Crockford will expose the goodness in JavaScript, an outstanding dynamic programming language. He believes that the elegant subset he has carved out is vastly superior to the language as a whole, being more reliable, readable, and maintainable.Watch a video at http://www.bestechvideos.com/2009/03/18/javascript-the-good-partsTRANSCRIPT
![Page 1: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/1.jpg)
JavaScript: The Good Parts
Douglas Crockford
Yahoo! Inc.
http://www.crockford.com/codecamp/
![Page 2: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/2.jpg)
The World's Most Misunderstood Programming
Language
![Page 3: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/3.jpg)
A language of many contrasts.
![Page 4: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/4.jpg)
The broadest range of programmer skills of any programming language.
From computer scientists to cut-n-pasters
and everyone in between.
![Page 5: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/5.jpg)
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 of mistakes."
![Page 6: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/6.jpg)
Hidden under a huge steaming pile of good
intentions and blunders is an elegant, expressive
programming language.
JavaScript has good parts.
![Page 7: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/7.jpg)
JavaScript is succeeding very well in an environment where
Java was a total failure.
![Page 8: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/8.jpg)
Influences
• Self
prototypal inheritance
dynamic objects
• Scheme
lambda
loose typing
• Java
syntax
conventions
• Perl
regular expressions
![Page 9: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/9.jpg)
Bad Parts
• Global Variables
• + adds and concatenates
• Semicolon insertion
• typeof
• with and eval
• phony arrays
• == and !=
• false, null, undefined, NaN
![Page 10: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/11.jpg)
value = myObject[name];
if (value == null) {
alert(name + ' not found.');
}
Two errors that cancel each other out.
![Page 12: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/12.jpg)
value = myObject[name];
if (value === undefined) {
alert(name + ' not found.');
}
![Page 13: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/13.jpg)
Good features that interact badly
• Objects can inherit from other objects.
• Functions can be members of objects.
• for..in statement mixes inherited functions with the desired data members.
![Page 14: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/14.jpg)
for in is troublesome
• Design question: Should for..in do a shallow skim or a deep dredge?
• Decision: Deep dredge. The programmer must explicitly filter out the deep members.
• Except: They didn't tell anybody!
• Consequence: Lots of confusion about how to use for..in.
![Page 15: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/15.jpg)
for in is troublesome
• Better Decision: Don't release the language broadly until we have enough experience to have confidence that we made the right choice.
• Historical Context: Getting it right at Netscape wasn't an option.
![Page 16: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/16.jpg)
Bad Heritage
• Blockless statements if (foo)
bar();
• Expression statements
foo;
• Floating point arithmetic 0.1 + 0.2 !== 0.3
• ++ and --
• switch
![Page 17: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/17.jpg)
Good Parts
• Lambda
• Dynamic Objects
• Loose Typing
• Object Literals
![Page 18: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/18.jpg)
Inheritance
• Inheritance is object-oriented code reuse.
• Two Schools:
• Classical
• Prototypal
![Page 19: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/19.jpg)
Prototypal Inheritance
• Class-free.
• Objects inherit from objects.
• An object contains a link to another object: Delegation. Differential Inheritance.
var newObject =
Object.create(oldObject);newObject
__proto__
oldObject
![Page 20: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/20.jpg)
Prototypal Inheritance
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
![Page 21: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/21.jpg)
new
• The new operator is required when calling a Constructor function.
• If new is omitted, the global object is clobbered by the constructor.
• There is no compile-time or run-time warning.
![Page 22: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/22.jpg)
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'
![Page 23: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/23.jpg)
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'
![Page 24: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/24.jpg)
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'
![Page 25: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/25.jpg)
A Module Patternvar singleton = function () {
var privateVariable;
function privateFunction(x) {
...privateVariable...
}
return {
firstMethod: function (a, b) {
...privateVariable...
},
secondMethod: function (c) {
...privateFunction()...
}
};
}();
![Page 26: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/26.jpg)
Module pattern is easily transformed into a powerful
constructor pattern.
![Page 27: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/27.jpg)
Power Constructors
1. Make an object.
• Object literal
• new
• Object.create
• call another power constructor
![Page 28: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/28.jpg)
Power Constructors
1. Make an object.
• Object literal, new, Object.create, call another power constructor
2. Define some variables and functions.
• These become private members.
![Page 29: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/29.jpg)
Power Constructors
1. Make an object.
• Object literal, new, Object.create, call another power constructor
2. Define some variables and functions.
• These become private members.
3. Augment the object with privileged methods.
![Page 30: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/30.jpg)
Power Constructors
1. Make an object.
• Object literal, new, Object.create, call another power constructor
2. Define some variables and functions.
• These become private members.
3. Augment the object with privileged methods.
4. Return the object.
![Page 31: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/31.jpg)
Step One
function myPowerConstructor(x) { var that = otherMaker(x);}
![Page 32: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/32.jpg)
Step Two
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x);}
![Page 33: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/33.jpg)
Step Three
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x); that.priv = function () { ... secret x that ... };}
![Page 34: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/34.jpg)
Step Four
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x); that.priv = function () { ... secret x that ... }; return that;}
![Page 35: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/35.jpg)
Closure
• A function object contains
A function (name, parameters, body)
A reference to the environment in which it was created (context).
• This is a very good thing.
![Page 36: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/36.jpg)
Style Isn't Subjective
block
{
....
}
• Might work well in other languages
block {
....
}
• Works well in JavaScript
![Page 37: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/37.jpg)
Style Isn't Subjective
return
{
ok: false
};
• SILENT ERROR!
return {
ok: true
};
• Works well in JavaScript
![Page 38: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/38.jpg)
Style Isn't Subjective
return
{
ok: false
};
![Page 39: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/39.jpg)
Style Isn't Subjective
return; // semicolon insertion
{
ok: false
};
![Page 40: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/40.jpg)
Style Isn't Subjective
return;
{ // block
ok: false
};
![Page 41: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/41.jpg)
Style Isn't Subjective
return;
{
ok: false // label
};
![Page 42: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/42.jpg)
Style Isn't Subjective
return;
{ // useless
ok: false // expression
}; // statement
![Page 43: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/43.jpg)
Style Isn't Subjective
return;
{
ok: false; // semicolon
}; // insertion
![Page 44: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/44.jpg)
Style Isn't Subjective
return;
{
ok: false;
}; // empty statement
![Page 45: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/45.jpg)
Style Isn't Subjective
return;
{ // unreachable statement
ok: false;
}
![Page 46: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/46.jpg)
Style Isn't Subjective
return
{
ok: false
};
• Bad style
return;
{
ok: false;
}
• Bad results
![Page 47: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/47.jpg)
Working with the Grain
![Page 48: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/48.jpg)
A Personal Journey
Beautiful Code
![Page 49: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/49.jpg)
JSLint
• JSLint defines a professional subset of JavaScript.
• It imposes a programming discipline that makes me much more confident in a dynamic, loosely-typed environment.
• http://www.JSLint.com/
![Page 50: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/50.jpg)
WARNING!JSLint will hurt your
feelings.
![Page 51: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/51.jpg)
Unlearning Is Really Hard
Perfectly Fine == Faulty
![Page 52: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/52.jpg)
It's not ignorance does so much damage; it's knowin' so
derned much that ain't so.
Josh Billings
![Page 53: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/53.jpg)
The Very Best Part:
StabilityNo new design errors
since 1999!
![Page 54: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/54.jpg)
Coming Soon
• [ES3.1] ECMAScript Fourth Edition
• Corrections
• Reality
• Support for object hardening
• Strict mode for reliability
• Waiting on implementations
![Page 55: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/55.jpg)
Not Coming Soon
• [ES4] This project has been cancelled.
• Instead, [ES-Harmony].
• So far, this project has no defined goals or rules.
![Page 56: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/56.jpg)
Safe Subsets
• The most effective way to make this language better is to make it smaller.
• FBJS
• Caja & Cajita
• ADsafe
• These subsets will be informing the design of a new secure language to replace JavaScript.
![Page 57: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/57.jpg)
The Good Parts
• Your JavaScript application can reach a potential audience of billions.
• If you avoid the bad parts, JavaScript works really well. There is some brilliance in it.
• It is possible to write good programs with JavaScript.
![Page 58: JavaScript: The Good Parts](https://reader033.vdocuments.net/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/58.jpg)