javascript the good parts v2

Javascript The Good Parts

Federico [email protected]

http://federico.galassi.net

1

mailto:[email protected]




‣ The language of the Web‣ A nice, elegant, expressive

language

Why Javascript

2

‣ A nice, elegant, expressive language...‣ What??

Javascript: really a good language?

3

‣ Good for web pages‣ Bad for “serious” programming

‣ large projects‣ maintainable code

Javascript perceived as a toy language

4

‣ Stanford UniversityCS 242 “Programming Languages” 2008

‣ Mozilla Corporation‣ Firefox

‣ Many more...

Javascript is a toy language? Bullshit!!

5

‣ The Most Misunderstood language ever‣ Different from mainstream‣ Design mistakes‣ Traditionally runs in the browser

Javascript is not toy language...So what?

6

‣ Not the language of your choice‣ You already know other good languages

‣ It’s “easy”, no need to learn‣ Copy&Paste Oriented Programming

!=

Javascript is different: not your choice

7

‣ Familiar syntax from Java/C‣ Pretty exotic foundations

‣Objects from Self‣Functions from Scheme

if (x < 1) { x++;}

Javascript is different: an exotic language

8

Javascript has design mistakes

‣ Short lab time‣ hacked in one week in may 1995‣ in Netscape 2 by the end of the year

‣ Too fast adoption‣ web boom

‣ Controversial goals‣ “easy” for non programmers‣ must look like java

‣ No fixes since 1999 ™9

Brendan EichCreator of JavascriptMozilla CTO

‣ Inconsistent implementations‣ poor specifications

‣ Depends on DOM for I/O‣ and it sucks!

‣ Lack of common features‣ file system access‣ sockets‣ “require”

‣ No standard libraries

Javascript usually runs in the browser

10

‣ The Blooming of Abstractions

Javascript: Abstractions

11

‣ Fix the language‣ Add events portably‣ Select DOM elements easily

Javascript: Abstractions fix it

12

YAHOO.util.Event.addListener("elementid", "click", fnCallback);

$(".myclass")

Javascript: Abstractions rewrite it

‣ Rewrite the language‣ Declare a “classical” class

13

var Person = new Class({ initialize: function(name){ this.name = name; }, greet: function(){ alert("hi, i am " + this.name); }});

‣ Language??‣ It’s a Virtual Machine!

Javascript: Abstractions ignore it

14

public class StockWatcher implements EntryPoint {

private Button addStockButton = new Button("Add"); public void onModuleLoad() { // Listen for mouse events on the Add button. addStockButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { addStock(); } }); }

‣ Abstractions are useful yet...‣ All non-trivial abstractions, to some degree, are

leaky.‣ Knowledge is always good

Javascript: Abstractions...beware

15

‣ Imperative‣ Functional‣ Object Oriented‣ Simple‣ Winner by natural selection

‣ ...where java failed.

DachshundEvolution

Javascript rules as it is!

16

Javascript the different good parts:Functions 1

‣ First Class Functions‣ are objects‣ can be created at runtime‣ can be stored in variables‣ can be created as anonymous literals

17

// Creation with literalvar hello = function(name) { return "hello " + name;};

// Invocationhello; // function()hello("world"); // "hello world"

Javascript the different good parts:Functions 2

‣ First Class Functions‣ can be passed as parameters

to functions‣ can be returned by functions

18

// Passed as parameter and invokedvar hey = function() { print "hey" };var twice = function(func) { func(); func();};twice(hey); // prints "heyhey"

// Returned by a functionvar makeHey = function() { return function() { return "hey”; }};var hey2 = makeHey();hey2(); // "hey"

‣ Scopes‣ Global‣ Function

‣ No block-level

Javascript the different good parts:Functions and Scope

19

function outer() {

}

function inner() {

}

g = 1

b = 2

o = 3

i = 4

Global

Function

var g = 1;

if (true) {

var b = 2;

}

var i = 4;

var o = 3;

‣ Scope Chain‣ Each scope

“inherits” fromthe “previous”one

Javascript the different good parts:Functions and Scope Chain

20

function outer() {

}

function inner() {

}

g = 1

b = 2

o = 3

i = 4

Scope Chain

Global

Function

var g = 1;

if (true) {

var b = 2;

}

var i = 4;

var o = 3;

‣ Closure:Functions“remember”their scopechain

Javascript the different good parts:Functions as Closures

21

g = 1

g = 3

Scope Chain

Global

function outer() {

var g = 3;

return

}

function() {

return g;

}

Function

var g = 1

var inner = outer();

inner(); // returns 3

‣ Containers of key/value pairs‣ keys are strings‣ values are anything

book

-"author"

"Javascript"

240

"title"

"pages"

"surname"

"Federico""name"

"Galassi"

// Creation with literalvar book = { title: "Javascript", pages: 240, author: { name: "Federico", surname: "Galassi" }}

Javascript the different good parts:Objects 1

22

// Get a propertybook["title"] // returns "Javascript"book.title // same as book["title"]book.propertyNotThere // returns undefined

// Set or update a propertybook.cover = "butterfly.jpg"book.title = "Javascript the good parts"

// Delete a propertydelete book.title // now book.title is undefined

Javascript the different good parts:Objects 2‣ Objects are dynamic

‣ Properties can be added and removed at runtime‣ No class constraints

23

‣ Methods arefunction valuedproperties

‣ Inside methodsthis is bound toobject “on the left”

book.read = function() { var action = "Reading "; return action + this.title;}

book.read(); // returns "Reading Javascript"

book

-"read"

"Javascript"

240

"title"

"pages"

function() {

var action = "Reading ";

return action + this.title;

}

Method

action = "Reading "

Scope

this =

Javascript the different good parts:Objects Methods

24

‣ Every object can be linked to another object through the special “prototype” property

‣ If a property does not exist in the object, request is delegated to its prototype

another_point

__proto__ -

20"x"

point

-__proto__

10

10

"x"

"y"

var point = { x: 10, y: 10};var another_point = Object.create(point);another_point.x = 20;

another_point.x; // returns 20another_point.y; // returns 10 (delegated)

Javascript the different good parts:Objects Prototype

25

‣ Delegation works for methods too‣ this is always bound to the “first object”

// returns 20 * 10 = 200another_rect.area();another_rect

__proto__ -

20"width"

rect

-__proto__

-"area"

10

10

"width"

"height" function() {

return this.width *

this.height;

}

Method

Scope

this = Prototype

Javascript the different good parts:Objects Prototype and Methods

26

‣ Properties are resolved by following the Prototype Chain

‣ Prototype Chains always ends with Object‣ Beyond there’s undefined

first.asdasdasd;// "asdasdasd" not in// first, second, last// "asdasdasd" not in {}// returns undefined

first.hasOwnProperty// returns function() ...

first__proto__ -

second__proto__ -

last__proto__ -

Object

Property

Resolution

Javascript the different good parts:Objects Prototype Chain

27

‣ Prototypes are javascript way to share‣ Data‣ Behavior

Javascript the different good parts:Objects Prototypal Inheritance 1

28

‣ Prototypal Inheritance‣ Vs Classical Inheritance‣ Simpler

‣ No classes and objects, only objects‣ Easier

‣ Work by examples, not abstractions‣ Powerful !!

‣ Can simulate classical‣ Reverse not true

‣ Shhhh, Don’t tell anyone‣ Easier to write spaghetti code


29

‣ Ok, I cheated‣ __proto__ available in mozilla only‣ Object.create coming in next revision of language

‣ Javascript is schizophrenic‣ Prototypal nature‣ Wannabe classical


30

Javascript the different good parts:Object Constructor 1

‣ Constructor Functions‣ Function is a class constructor‣ Function prototype is class behavior‣ new makes new objects

‣ Why?‣ feels classical‣ feels familiar

31

function Rectangle(w, h) { this.w = w; this.h = h;}Rectangle.prototype.higher =function() { this.h += 1 };

var rect = new Rectangle(5,10);

‣ Worst of both worlds‣ Unnecessarily complicated‣ Hide prototypal nature‣ Weird for classical programmers

Javascript the different good parts:Object Constructor 2

32

‣ Fortunately there’s a Quick Fix

// create an object with a given prototype

if (typeof Object.create !== 'function') { Object.create = function (o) { var F = function() {}; F.prototype = o; return new F(); };}

var siamese = Object.create(cat);

Javascript the different good parts:Objects Constructor Functions Fix

33

‣ No real arrays in javascript‣ They’re objects in disguise

‣ special props and methods‣ Cool literal syntax

Javascript the different good parts:Arrays

34

// array literalvar numbers = [1, 2, 3];

// nice methodsnumbers.push(4); // now [1, 2, 3, 4]

// an object indeednumbers.dog = 'pretty';

Javascript the different good parts:Functional Programming

‣ Iterators‣ Callbacks‣ Module Pattern‣ Memoization

35

‣ Take control of loops‣ Reduce accidental complexity

Javascript the different good parts:Functional Programming Iterators

36

// iterate on a collection

function each(arr, func) { for (var i=0; i<arr.length; i++) { func(arr[i]); }}

var ten = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

each(ten, function(i) { print i;});// prints 12345678910

Javascript the different good parts:Iterators Example 1

37

// maps a collection to a new one

function map(arr, func) { var result = []; each(arr, function(i) { result.push(func(i)); }); return result;}

var ten = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

map(ten, function(i) { return i * i; });// returns [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]


38

// filter elements of a collection

function filter(arr, func) { var result = []; each(arr, function(i) { if (func(i)) { result.push(i); } }); return result;}

var ten = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

filter(ten, function(i) { return i % 2 === 0; });// returns [2, 4, 6, 8, 10]


39

// compute a single value from a collection

function reduce(arr, func, start) { var result = start; each(arr, function(i) { result = func(i, result); }); return result;}

var ten = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

reduce(ten, function(i, sum) { return i + sum;}, 0);// returns 55


40

// Composability// square elements, then pick even ones, then sum

reduce( filter( map(ten, function(i) { return i * i; } ), function(i) { return i % 2 === 0; } ), function(i, sum) { return i + sum; }, 0);


41

// Composability but easy to read

var square = function(arr) { return map(arr, function(i) { return i * 2; });}var even = function(arr) { return filter(arr, function(i) { return i % 2 === 0; });}var sum = function(arr) { return reduce(arr, function(i, total) { return i + total; }, 0);}

sum(even(square(ten)));


42

‣ Manage asynchronous communication‣ Hide complexity

Javascript the different good parts:Functional Programming Callbacks

43

// Synchronous request

var response = get("http://www.google.com");display(response);

// Asynchronous with callback

get("http://www.google.com", function(response) { display(response); });

Javascript the different good parts:Callbacks Example 1

44

http://www.google.com




// explicit complexityvar response = get("http://www.google.com");if (response.completed) { if (response.httpCode === "200") { display(response); } else { // http error }} else { // network error}


45



// complexity hidden in the client codevar response = get("http://www.google.com");if (success(response)) { display(response);} else { // error}

// complexity hidden awayget("http://www.google.com", { success: function(response) { display(response); }});


46





‣ Hide state and behavior

Javascript the different good parts:Functional Programming Module Pattern

47

‣ Cache computation‣ Speed up execution

Javascript the different good parts:Functional Programming Memoization

49

// get pixels. maybe millions of themvar pixels = getImagePixels("image.jpg");

var getColor = function(pixel) { // ... computation on RGB values ... returns "black"; // or "white" or "green" etc...}

// find the colorpixels.each(function(pixel) { var color = getColor(pixel); // store result});

Javascript the different good parts:Memoization Example 1

50

// wasted computation on already calculated pixels// cache it...var getColorCache = function(func) { var cache; // setup cache ... return function(pixel) { if (cache.missing(pixel)) { cache.store(pixel, func(pixel)); } return cache.get(pixel); }}(getColor);

Javascript the different good parts:Memoization Example 2

51

‣ The features you should definitely avoid

Javascript the bad parts

52

// Good, returns { ok: true } // Very bad, returns undefinedreturn { return ok: true {} ok: true }

// Good // Very bad, errorbook["class"]; book.class;var book = { var book = { "class": "book" class: "book" } }

Javascript the bad parts 1

‣ Global variables‣ Semicolon insertion

‣ Reserved words

53

// Not useful, returns "object"typeof array;// Wrong, returns "object"typeof null;// Inconsistent, returns "function" or "object"typeof /a/;

// Good, returns 8 // Wrong, returns 0parseInt("08", 10); parseInt("08");


‣ Unicode‣ typeof

‣ parseInt

54

0.2 + 0.1 === 0.3 // false

arguments.join // returns undefined

if (book.name == null) { ... // 2 errors, works by coincidence

'' == '0' // false0 == '' // true0 == '0' // true

false == undefined // falsefalse == null // falsenull == undefined // true


‣ +‣ Floating Point

‣ Phony Arrays

‣ Falsy values

‣ == type coercion

55

var cache;var word = getWord(); // returns "constructor"if (word in cache) { // ops, true

// safe wayfor (var i in list) { if (list.hasOwnProperty(i)) { // do something }}


56

‣ Objects are not hashes

‣ Deep for..in

‣ Extending native prototypes kill kittens‣ new

‣ forgetting new makes global variables!

‣ ECMAScript 3.1 to Save Us‣ Object.create built-in‣ Properties enumerable/writable/configurable‣ JSON built-in‣ Properties accessors‣ Security

‣ strict mode‣ object “lock down”

‣ Coming Soon On Your Browser!

Javascript the bad parts: ES3.1 Salvation

57

‣ Thank to Douglas Crockford and his book‣ He knows the way

Credits

58

javascript the good parts v2

Technology

function var

javascript rules

different good parts

var inner

toy language good

var hey2

var makehey

return function