functional javascript - bay area functional programmers
TRANSCRIPT
![Page 1: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/1.jpg)
FunctionalJavaScript
Douglas Crockford
Yahoo! Inc.
![Page 2: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/2.jpg)
The World's Most MisunderstoodProgramming Language
![Page 3: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/3.jpg)
A language of many contrasts.
![Page 4: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/4.jpg)
The broadest range ofprogrammer skills of anyprogramming language.
From computer scientists
to cut-n-pasters
and everyone in between.
![Page 5: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/5.jpg)
Complaints
• "JavaScript is not a language I know."
• "The browser programming experience isawful."
• "It's not fast enough."
• "The language is just a pile of mistakes."
![Page 6: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/6.jpg)
Hidden under a huge steamingpile of good intentions and
blunders is an elegant,expressive programming
language.
JavaScript has good parts.
![Page 7: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/7.jpg)
JavaScript is succeeding verywell in an environment where
Java was a total failure.
![Page 8: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/8.jpg)
Influences
• Self prototypal inheritance
dynamic objects
• Scheme lambda
loose typing
• Java syntax
conventions
• Perl regular expressions
![Page 9: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/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: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/10.jpg)
Transitivity? What's That?• 0 == '' // true
• 0 == '0' // true
• '' == '0' // false
• false == '' // true
• false == '0' // true
• false == undefined // false
• false == null // false
• null == undefined // true
• " \t\r\n " == 0 // true
• " \t\r\n " == "" // false
![Page 11: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/11.jpg)
Good Parts
• Lambda
• Dynamic Objects
• Loose Typing
![Page 12: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/12.jpg)
• (define foo (lambda (a b c) (body))
• var foo = function (a, b, c) { return body;};
![Page 13: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/13.jpg)
• (foo a b c)
• foo(a, b, c)
![Page 14: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/14.jpg)
• (cond (p1 e1) (p2 e2) ... (else en))
• p1 ? e1 : p2 ? e2 : ... en
![Page 15: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/15.jpg)
• (quote (a b c))
• ['a', ['b', ['c']]]
![Page 16: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/16.jpg)
Y Combinator
• var Y = function (le) { return function (f) { return f(f); }(function (f) { return le(function (x) { return f(f)(x); }); });};
![Page 17: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/17.jpg)
Inheritance
• Inheritance is object-oriented code reuse.
• Two Schools:• Classical
• Prototypal
![Page 18: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/18.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 19: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/19.jpg)
Objects
• Objects are general containers.
• Key/value pairs.
• Keys are strings.
• Values are any value.
• Objects can be modified at any time.
• Objects are passed by reference.
• An object can inherit from another object.
![Page 20: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/20.jpg)
Prototypes
An object containing
public methods
An object containing
instance data
![Page 21: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/21.jpg)
• Public methods are functions.
• A pseudoparameter this is bound to theinvoked object.
![Page 22: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/22.jpg)
Object literals
• Simple quasiliteral constructor for objects.
• { name : value, name : value}
• Inspiration for the JSON Data InterchangeFormat. www.JSON.org/
![Page 23: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/23.jpg)
Closurevar 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 24: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/24.jpg)
A Module Patternvar singleton = function () {
var privateVariable;
function privateFunction(x) {
...privateVariable...
}
return {
firstMethod: function (a, b) {
...privateVariable...
},
secondMethod: function (c) {
...privateFunction()...
}
};
}();
![Page 25: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/25.jpg)
Module pattern is easilytransformed into a powerful
constructor pattern.
![Page 26: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/26.jpg)
Power Constructors
1. Make an object.• Object literal
• new
• Object.create
• call another power constructor
![Page 27: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/27.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 28: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/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.
3. Augment the object with privilegedmethods.
![Page 29: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/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 privilegedmethods.
4. Return the object.
![Page 30: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/30.jpg)
Step One
function myPowerConstructor(x) { var that = otherMaker(x);}
![Page 31: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/31.jpg)
Step Two
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x);}
![Page 32: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/32.jpg)
Step Three
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x); that.priv = function () { ... secret x that ... };}
![Page 33: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/33.jpg)
Step Four
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x); that.priv = function () { ... secret x ... }; return that;}
![Page 34: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/34.jpg)
Closure
• A function object contains A function (name, parameters, body)
A reference to the environment in which it wascreated (context).
• This is a very good thing.
![Page 35: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/35.jpg)
Values
• Numbers
• Strings
• Booleans
• Objects & Arrays
• Functions
• Falsy values: false, 0, "", null, undefined, NaN
![Page 36: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/36.jpg)
History
Thirteen years ago in a valley30 miles to the south...
![Page 37: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/37.jpg)
Working with the Grain
![Page 38: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/38.jpg)
A Personal Journey
Beautiful Code
![Page 39: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/39.jpg)
JSLint
• JSLint defines a professional subset ofJavaScript.
• It imposes a programming discipline thatmakes me much more confident in adynamic, loosely-typed environment.
• http://www.JSLint.com/
![Page 40: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/40.jpg)
WARNING!JSLint will hurt your
feelings.
![Page 41: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/41.jpg)
Unlearning IsReally Hard
Perfectly Fine == Faulty
![Page 42: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/42.jpg)
It's not ignorance does so muchdamage; it's knowin' so derned
much that ain't so.
Josh Billings
![Page 43: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/43.jpg)
The Very Best Part:
StabilityNo new design errors
since 1999!
![Page 44: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/44.jpg)
Coming Soon
• [ES3.1] ECMAScript Fourth Edition
• Corrections
• Reality
• Support for object hardening
• Strict mode for reliability
• Waiting on implementations
![Page 45: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/45.jpg)
Not Coming Soon
• [ES4] This project has been cancelled.
• Instead, [ES-Harmony].
• So far, this project has no defined goals orrules.
![Page 46: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/46.jpg)
Safe Subsets
• The most effective way to make thislanguage better is to make it smaller.
• FBJS
• Caja & Cajita
• ADsafe
• These subsets will be informing the designof a new secure language to replaceJavaScript.
![Page 47: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/47.jpg)
The Good Parts
• Your JavaScript application can reach apotential audience of billions.
• If you avoid the bad parts, JavaScriptworks really well. There is some brilliancein it.
• It is possible to write good programs withJavaScript.
![Page 48: Functional Javascript - Bay Area Functional Programmers](https://reader031.vdocuments.us/reader031/viewer/2022021207/6206270d8c2f7b173004eb37/html5/thumbnails/48.jpg)