0
JavaScript:   The Good Parts Douglas Crockford Yahoo! Inc. http://www.crockford.com/codecamp/
The World's Most Popular Programming Language
The World's Most Popular Programming Language The World's Most Unpopular Programming Language
A language of many contrasts.
The broadest range of programmer skills of any programming language. From computer scientists  to cut-n-pasters  and every...
It is the language that people use without bothering to learn it first.
Complaints <ul><li>&quot;JavaScript is not a language I know.&quot; </li></ul><ul><li>&quot;The browser programming experi...
Hidden under a huge steaming pile of good intentions and blunders is an elegant, expressive programming language. JavaScri...
JavaScript is succeeding very well in an environment where Java was a total failure.
Influences <ul><li>Self </li></ul><ul><ul><li>prototypal inheritance </li></ul></ul><ul><ul><li>dynamic objects </li></ul>...
Bad Parts <ul><li>Global Variables </li></ul><ul><li>+ adds and concatenates </li></ul><ul><li>Semicolon insertion </li></...
Transitivity? What's That? <ul><li>'' == '0'  // false </li></ul><ul><li>0 == ''  // true </li></ul><ul><li>0 == '0'  // t...
<ul><li>value = myObject[name]; </li></ul><ul><li>if (value  == null ) { </li></ul><ul><li>alert(name + ' not found.'); </...
<ul><li>value = myObject[name]; </li></ul><ul><li>if (value  === undefined ) { </li></ul><ul><li>alert(name + ' not found....
Good features that interact badly <ul><li>Objects can inherit from other objects. </li></ul><ul><li>Functions can be membe...
for in is troublesome <ul><li>Design question: Should for..in do a shallow skim or a deep dredge? </li></ul><ul><li>Decisi...
for in is troublesome <ul><li>Better Decision: Don't release the language broadly until we have enough experience to have ...
Bad Heritage <ul><li>Blockless statements </li></ul><ul><ul><li>if (foo) </li></ul></ul><ul><ul><li>bar(); </li></ul></ul>...
Good Parts <ul><li>Lambda </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li>Object Litera...
Inheritance <ul><li>Inheritance is object-oriented code reuse. </li></ul><ul><li>Two Schools: </li></ul><ul><ul><li>Classi...
Prototypal Inheritance <ul><li>Class-free. </li></ul><ul><li>Objects inherit from objects. </li></ul><ul><li>An object con...
Prototypal Inheritance <ul><ul><li>if (typeof Object.create !== 'function') { </li></ul></ul><ul><ul><li>Object.create = f...
new <ul><li>The  new  operator is  required  when calling a Constructor function. </li></ul><ul><li>If  new  is omitted, t...
Global <ul><li>var  names  = ['zero', 'one', 'two',  </li></ul><ul><li>'three', 'four', 'five', 'six',  </li></ul><ul><li>...
Slow <ul><li>var  digit_name  =  function (n) {   </li></ul><ul><li>var  names  = ['zero', 'one', 'two',  </li></ul><ul><l...
Closure <ul><li>var  digit_name  = (function () { </li></ul><ul><li>var  names  = ['zero', 'one', 'two',  </li></ul><ul><l...
A Module Pattern <ul><li>var singleton = ( function () { </li></ul><ul><li>var  privateVariable ; </li></ul><ul><li>functi...
Module pattern is easily transformed into a powerful constructor pattern.
Power Constructors <ul><li>Make an object. </li></ul><ul><ul><li>Object literal </li></ul></ul><ul><ul><li>new </li></ul><...
Power Constructors <ul><li>Make an object. </li></ul><ul><ul><li>Object literal,  new ,  Object.create , call another powe...
Power Constructors <ul><li>Make an object. </li></ul><ul><ul><li>Object literal,  new ,  Object.create , call another powe...
Power Constructors <ul><li>Make an object. </li></ul><ul><ul><li>Object literal,  new ,  Object.create , call another powe...
Step One <ul><li>function myPowerConstructor(x) { </li></ul><ul><li>var that = otherMaker(x); </li></ul><ul><li>} </li></ul>
Step Two <ul><li>function myPowerConstructor(x) { </li></ul><ul><li>var that = otherMaker(x); </li></ul><ul><li>var secret...
Step Three <ul><li>function myPowerConstructor(x) { </li></ul><ul><li>var that = otherMaker(x); </li></ul><ul><li>var secr...
Step Four <ul><li>function myPowerConstructor(x) { </li></ul><ul><li>var that = otherMaker(x); </li></ul><ul><li>var secre...
Closure <ul><li>A function object contains </li></ul><ul><ul><li>A function (name, parameters, body) </li></ul></ul><ul><u...
Style Isn't Subjective <ul><li>block </li></ul><ul><li>{ </li></ul><ul><li>.... </li></ul><ul><li>} </li></ul><ul><li>Migh...
Style Isn't Subjective <ul><li>return </li></ul><ul><li>{ </li></ul><ul><li>ok: false </li></ul><ul><li>}; </li></ul><ul><...
Style Isn't Subjective <ul><li>return </li></ul><ul><li>{ </li></ul><ul><li>ok: false </li></ul><ul><li>}; </li></ul>
Style Isn't Subjective <ul><li>return ; // semicolon insertion </li></ul><ul><li>{ </li></ul><ul><li>ok: false </li></ul><...
Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{   // block </li></ul><ul><li>ok: false </li></ul><ul><li>} ; </...
Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{  </li></ul><ul><li>ok:  false  // label </li></ul><ul><li>}; </...
Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{  // useless </li></ul><ul><li>ok:  false   // expression </li><...
Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{  </li></ul><ul><li>ok: false ; // semicolon </li></ul><ul><li>}...
Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{  </li></ul><ul><li>ok: false; </li></ul><ul><li>} ;   // empty ...
Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{   // unreachable statement </li></ul><ul><li>ok: false; </li></...
Style Isn't Subjective <ul><li>return </li></ul><ul><li>{ </li></ul><ul><li>ok: false </li></ul><ul><li>}; </li></ul><ul><...
Working with the Grain
A Personal Journey Beautiful Code
JSLint <ul><li>JSLint defines a professional subset of JavaScript. </li></ul><ul><li>It imposes a programming discipline t...
WARNING! JSLint will hurt your feelings.
Unlearning Is  Really Hard Perfectly Fine == Faulty
It's not ignorance does so much damage; it's knowin' so derned much that ain't so.  Josh Billings
The Very Best Part: Stability No new design errors  since 1999!
Coming Soon <ul><li>[ES3.1] ECMAScript Fifth Edition </li></ul><ul><li>Corrections </li></ul><ul><li>Reality </li></ul><ul...
Safe Subsets <ul><li>The most effective way to make this language better is to make it smaller. </li></ul><ul><li>FBJS </l...
The Good Parts <ul><li>Your JavaScript application can reach a potential audience of billions. </li></ul><ul><li>If you av...
 
Upcoming SlideShare
Loading in...5
×

Goodparts

861

Published on

This presentation is by Doug Crockford, I'm reposting it here from this Google Blog post: http://googlecode.blogspot.com/2009/03/doug-crockford-javascript-good-parts.html

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
861
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Goodparts"

  1. 1. JavaScript: The Good Parts Douglas Crockford Yahoo! Inc. http://www.crockford.com/codecamp/
  2. 2. The World's Most Popular Programming Language
  3. 3. The World's Most Popular Programming Language The World's Most Unpopular Programming Language
  4. 4. A language of many contrasts.
  5. 5. The broadest range of programmer skills of any programming language. From computer scientists to cut-n-pasters and everyone in between.
  6. 6. It is the language that people use without bothering to learn it first.
  7. 7. Complaints <ul><li>&quot;JavaScript is not a language I know.&quot; </li></ul><ul><li>&quot;The browser programming experience is awful.&quot; </li></ul><ul><li>&quot;It's not fast enough.&quot; </li></ul><ul><li>&quot;The language is just a pile of mistakes.&quot; </li></ul>
  8. 8. Hidden under a huge steaming pile of good intentions and blunders is an elegant, expressive programming language. JavaScript has good parts.
  9. 9. JavaScript is succeeding very well in an environment where Java was a total failure.
  10. 10. Influences <ul><li>Self </li></ul><ul><ul><li>prototypal inheritance </li></ul></ul><ul><ul><li>dynamic objects </li></ul></ul><ul><li>Scheme </li></ul><ul><ul><li>lambda </li></ul></ul><ul><ul><li>loose typing </li></ul></ul><ul><li>Java </li></ul><ul><ul><li>syntax </li></ul></ul><ul><ul><li>conventions </li></ul></ul><ul><li>Perl </li></ul><ul><ul><li>regular expressions </li></ul></ul>
  11. 11. Bad Parts <ul><li>Global Variables </li></ul><ul><li>+ adds and concatenates </li></ul><ul><li>Semicolon insertion </li></ul><ul><li>typeof </li></ul><ul><li>with and eval </li></ul><ul><li>phony arrays </li></ul><ul><li>== and != </li></ul><ul><li>false, null, undefined, NaN </li></ul>
  12. 12. Transitivity? What's That? <ul><li>'' == '0' // false </li></ul><ul><li>0 == '' // true </li></ul><ul><li>0 == '0' // true </li></ul><ul><li>false == 'false' // false </li></ul><ul><li>false == '0' // true </li></ul><ul><li>false == undefined // false </li></ul><ul><li>false == null // false </li></ul><ul><li>null == undefined // true </li></ul><ul><li>&quot; &quot; == 0 // true </li></ul>
  13. 13. <ul><li>value = myObject[name]; </li></ul><ul><li>if (value == null ) { </li></ul><ul><li>alert(name + ' not found.'); </li></ul><ul><li>} </li></ul><ul><li>Two errors that cancel each other out. </li></ul>
  14. 14. <ul><li>value = myObject[name]; </li></ul><ul><li>if (value === undefined ) { </li></ul><ul><li>alert(name + ' not found.'); </li></ul><ul><li>} </li></ul>
  15. 15. Good features that interact badly <ul><li>Objects can inherit from other objects. </li></ul><ul><li>Functions can be members of objects. </li></ul><ul><li>for..in statement mixes inherited functions with the desired data members. </li></ul>
  16. 16. for in is troublesome <ul><li>Design question: Should for..in do a shallow skim or a deep dredge? </li></ul><ul><li>Decision: Deep dredge. The programmer must explicitly filter out the deep members. </li></ul><ul><li>Except: They didn't tell anybody! </li></ul><ul><li>Consequence: Lots of confusion about how to use for..in. </li></ul>
  17. 17. for in is troublesome <ul><li>Better Decision: Don't release the language broadly until we have enough experience to have confidence that we made the right choice. </li></ul><ul><li>Historical Context: Getting it right at Netscape wasn't an option. </li></ul>
  18. 18. Bad Heritage <ul><li>Blockless statements </li></ul><ul><ul><li>if (foo) </li></ul></ul><ul><ul><li>bar(); </li></ul></ul><ul><li>Expression statements </li></ul><ul><ul><li>foo; </li></ul></ul><ul><li>Floating point arithmetic </li></ul><ul><ul><li>0.1 + 0.2 !== 0.3 </li></ul></ul><ul><li>++ and -- </li></ul><ul><li>switch </li></ul>
  19. 19. Good Parts <ul><li>Lambda </li></ul><ul><li>Dynamic Objects </li></ul><ul><li>Loose Typing </li></ul><ul><li>Object Literals </li></ul>
  20. 20. Inheritance <ul><li>Inheritance is object-oriented code reuse. </li></ul><ul><li>Two Schools: </li></ul><ul><ul><li>Classical </li></ul></ul><ul><ul><li>Prototypal </li></ul></ul>
  21. 21. Prototypal Inheritance <ul><li>Class-free. </li></ul><ul><li>Objects inherit from objects. </li></ul><ul><li>An object contains a link to another object: Delegation. Differential Inheritance. </li></ul><ul><li>var newObject = </li></ul><ul><li>Object.create(oldObject); </li></ul>newObject oldObject __proto__
  22. 22. Prototypal Inheritance <ul><ul><li>if (typeof Object.create !== 'function') { </li></ul></ul><ul><ul><li>Object.create = function (o) { </li></ul></ul><ul><ul><li>function F() {} </li></ul></ul><ul><ul><li>F.prototype = o; </li></ul></ul><ul><ul><li>return new F(); </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  23. 23. new <ul><li>The new operator is required when calling a Constructor function. </li></ul><ul><li>If new is omitted, the global object is clobbered by the constructor. </li></ul><ul><li>There is no compile-time or run-time warning. </li></ul>
  24. 24. Global <ul><li>var names = ['zero', 'one', 'two', </li></ul><ul><li>'three', 'four', 'five', 'six', </li></ul><ul><li>'seven', 'eight', 'nine']; </li></ul><ul><li>var digit_name = function (n) { </li></ul><ul><li>return names [n]; </li></ul><ul><li>}; </li></ul><ul><li>alert( digit_name (3)); // 'three' </li></ul>
  25. 25. Slow <ul><li>var digit_name = function (n) { </li></ul><ul><li>var names = ['zero', 'one', 'two', </li></ul><ul><li>'three', 'four', 'five', 'six', </li></ul><ul><li>'seven', 'eight', 'nine']; </li></ul><ul><li>return names [n]; </li></ul><ul><li>}; </li></ul><ul><li>alert( digit_name (3)); // 'three' </li></ul>
  26. 26. Closure <ul><li>var digit_name = (function () { </li></ul><ul><li>var names = ['zero', 'one', 'two', </li></ul><ul><li>'three', 'four', 'five', 'six', </li></ul><ul><li>'seven', 'eight', 'nine']; </li></ul><ul><li>return function (n) { </li></ul><ul><li>return names [n]; </li></ul><ul><li>}; </li></ul><ul><li>} ()) ; </li></ul><ul><li>alert( digit_name (3)); // 'three' </li></ul>
  27. 27. A Module Pattern <ul><li>var singleton = ( function () { </li></ul><ul><li>var privateVariable ; </li></ul><ul><li>function privateFunction (x) { </li></ul><ul><li>... privateVariable ... </li></ul><ul><li>} </li></ul><ul><li>return { </li></ul><ul><li>firstMethod: function (a, b) { </li></ul><ul><li>... privateVariable ... </li></ul><ul><li>}, </li></ul><ul><li>secondMethod: function (c) { </li></ul><ul><li>... privateFunction ()... </li></ul><ul><li>} </li></ul><ul><li>} ; </li></ul><ul><li>}() ); </li></ul>
  28. 28. Module pattern is easily transformed into a powerful constructor pattern.
  29. 29. Power Constructors <ul><li>Make an object. </li></ul><ul><ul><li>Object literal </li></ul></ul><ul><ul><li>new </li></ul></ul><ul><ul><li>Object.create </li></ul></ul><ul><ul><li>call another power constructor </li></ul></ul>
  30. 30. Power Constructors <ul><li>Make an object. </li></ul><ul><ul><li>Object literal, new , Object.create , call another power constructor </li></ul></ul><ul><li>Define some variables and functions. </li></ul><ul><ul><li>These become private members. </li></ul></ul>
  31. 31. Power Constructors <ul><li>Make an object. </li></ul><ul><ul><li>Object literal, new , Object.create , call another power constructor </li></ul></ul><ul><li>Define some variables and functions. </li></ul><ul><ul><li>These become private members. </li></ul></ul><ul><li>Augment the object with privileged methods. </li></ul>
  32. 32. Power Constructors <ul><li>Make an object. </li></ul><ul><ul><li>Object literal, new , Object.create , call another power constructor </li></ul></ul><ul><li>Define some variables and functions. </li></ul><ul><ul><li>These become private members. </li></ul></ul><ul><li>Augment the object with privileged methods. </li></ul><ul><li>Return the object. </li></ul>
  33. 33. Step One <ul><li>function myPowerConstructor(x) { </li></ul><ul><li>var that = otherMaker(x); </li></ul><ul><li>} </li></ul>
  34. 34. Step Two <ul><li>function myPowerConstructor(x) { </li></ul><ul><li>var that = otherMaker(x); </li></ul><ul><li>var secret = f(x); </li></ul><ul><li>} </li></ul>
  35. 35. Step Three <ul><li>function myPowerConstructor(x) { </li></ul><ul><li>var that = otherMaker(x); </li></ul><ul><li>var secret = f(x); </li></ul><ul><li>that.priv = function () { </li></ul><ul><li>... secret x that ... </li></ul><ul><li>}; </li></ul><ul><li>} </li></ul>
  36. 36. Step Four <ul><li>function myPowerConstructor(x) { </li></ul><ul><li>var that = otherMaker(x); </li></ul><ul><li>var secret = f(x); </li></ul><ul><li>that.priv = function () { </li></ul><ul><li>... secret x that ... </li></ul><ul><li>}; </li></ul><ul><li>return that; </li></ul><ul><li>} </li></ul>
  37. 37. Closure <ul><li>A function object contains </li></ul><ul><ul><li>A function (name, parameters, body) </li></ul></ul><ul><ul><li>A reference to the environment in which it was created (context). </li></ul></ul><ul><li>This is a very good thing. </li></ul>
  38. 38. Style Isn't Subjective <ul><li>block </li></ul><ul><li>{ </li></ul><ul><li>.... </li></ul><ul><li>} </li></ul><ul><li>Might work well in other languages </li></ul><ul><li>block { </li></ul><ul><li>.... </li></ul><ul><li>} </li></ul><ul><li>Works well in JavaScript </li></ul>
  39. 39. Style Isn't Subjective <ul><li>return </li></ul><ul><li>{ </li></ul><ul><li>ok: false </li></ul><ul><li>}; </li></ul><ul><li>SILENT ERROR! </li></ul><ul><li>return { </li></ul><ul><li>ok: true </li></ul><ul><li>}; </li></ul><ul><li>Works well in JavaScript </li></ul>
  40. 40. Style Isn't Subjective <ul><li>return </li></ul><ul><li>{ </li></ul><ul><li>ok: false </li></ul><ul><li>}; </li></ul>
  41. 41. Style Isn't Subjective <ul><li>return ; // semicolon insertion </li></ul><ul><li>{ </li></ul><ul><li>ok: false </li></ul><ul><li>}; </li></ul>
  42. 42. Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{ // block </li></ul><ul><li>ok: false </li></ul><ul><li>} ; </li></ul>
  43. 43. Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{ </li></ul><ul><li>ok: false // label </li></ul><ul><li>}; </li></ul>
  44. 44. Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{ // useless </li></ul><ul><li>ok: false // expression </li></ul><ul><li>}; // statement </li></ul>
  45. 45. Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{ </li></ul><ul><li>ok: false ; // semicolon </li></ul><ul><li>}; // insertion </li></ul>
  46. 46. Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{ </li></ul><ul><li>ok: false; </li></ul><ul><li>} ; // empty statement </li></ul>
  47. 47. Style Isn't Subjective <ul><li>return; </li></ul><ul><li>{ // unreachable statement </li></ul><ul><li>ok: false; </li></ul><ul><li>} </li></ul>
  48. 48. Style Isn't Subjective <ul><li>return </li></ul><ul><li>{ </li></ul><ul><li>ok: false </li></ul><ul><li>}; </li></ul><ul><li>Bad style </li></ul><ul><li>return; </li></ul><ul><li>{ </li></ul><ul><li>ok: false; </li></ul><ul><li>} </li></ul><ul><li>Bad results </li></ul>
  49. 49. Working with the Grain
  50. 50. A Personal Journey Beautiful Code
  51. 51. JSLint <ul><li>JSLint defines a professional subset of JavaScript. </li></ul><ul><li>It imposes a programming discipline that makes me much more confident in a dynamic, loosely-typed environment. </li></ul><ul><li>http://www.JSLint.com/ </li></ul>
  52. 52. WARNING! JSLint will hurt your feelings.
  53. 53. Unlearning Is Really Hard Perfectly Fine == Faulty
  54. 54. It's not ignorance does so much damage; it's knowin' so derned much that ain't so. Josh Billings
  55. 55. The Very Best Part: Stability No new design errors since 1999!
  56. 56. Coming Soon <ul><li>[ES3.1] ECMAScript Fifth Edition </li></ul><ul><li>Corrections </li></ul><ul><li>Reality </li></ul><ul><li>Support for object hardening </li></ul><ul><li>Strict mode for reliability </li></ul><ul><li>&quot;use strict&quot;; </li></ul><ul><li>Waiting on implementations </li></ul>
  57. 57. Safe Subsets <ul><li>The most effective way to make this language better is to make it smaller. </li></ul><ul><li>FBJS </li></ul><ul><li>Caja & Cajita </li></ul><ul><li>Web Sandbox </li></ul><ul><li>ADsafe </li></ul><ul><li>The next edition of ECMAScript might include a secure formal subset. </li></ul>
  58. 58. The Good Parts <ul><li>Your JavaScript application can reach a potential audience of billions. </li></ul><ul><li>If you avoid the bad parts, JavaScript works really well. There is some brilliance in it. </li></ul><ul><li>It is possible to write good programs with JavaScript. </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×