Javascript The Good Parts

50 %
50 %
Information about Javascript The Good Parts
Technology

Published on March 22, 2009

Author: fgalassi

Source: slideshare.net

Description

By Federico Galassi and Gabriele Lana at PHPCon Italia 2009

See http://federico.galassi.net/2009/05/17/javascript-the-good-parts-talk/

Javascript The Good Parts Federico Galassi Gabriele Lana federico.galassi@gmail.com gabriele.lana@gmail.com

Why Javascript  The language of the Web  A nice, elegant, expressive language 2

Why Javascript  A nice, elegant, expressive language...  What?? 3

Javascript perceived as a toy language  Good for small quick web hacks  Not good for “serious” programming  large projects  mantainable code 4

Javascript is a toy language? Bullshit!!  Stanford University CS 242 “Programming Languages” 2008  Mozilla Corporation  Firefox  Many more... 5

Javascript is not toy language...So what?  The Most Misunderstood language ever  Different from mainstream  Design mistakes  Traditionally runs in the browser 6

Javascript is different  Not the language you already know  You already know other good languages  It’s a web designer thing, it’s “easy”  Copy&Paste Oriented Programming != 7

Javascript is different  Hidden nature  Familiar syntax from Java/C  Pretty exotic foundations  Objects from Self  Functions from Scheme if (x < 1) { x++; } 8

Javascript has design mistakes  Short lab time  hacked in one week in may 1995  in netscape2 by the end of the year  Too fast adoption  web boom  Controversial goals  “easy” for non programmers  must look like java Brendan Eich  No fixes since 1999 Creator of Javascript Mozilla CTO 9

Javascript usually runs in the browser  Inconsistent implementations  poor specifications  Depends on DOM for I/O  and it sucks!  Lack of common features  file system access  sockets  “require”  No standard libs 10

Javascript rules indeed!  Imperative  Functional  Object Oriented  Simple  Winner by natural selection  ...where java failed. Dachshund Evolution 11

Javascript can be made even better!  Javascript has good and bad parts  Use good parts the “right way”  Cut bad parts  ...Beautiful code AFTER BEFORE 12

Javascript the different good parts: Functions  First class are objects  can be created at runtime  can be stored in variables  can be passed as parameters to functions  can be returned by functions  can be expressed as anonymous literals  13

Javascript the different good parts: Working with Functions 1 // Creation the old way function hello(name) { return quot;hello quot; + name; } // Creation the good way var hello = function(name) { return quot;hello quot; + name; }; // Invocation hello; // returns function() hello(quot;worldquot;); // returns quot;hello worldquot; // Self Invocation (function(name) { return quot;hello quot; + name })(quot;worldquot;); 14

Javascript the different good parts: Working with Functions 2 // Passed as parameter and invoked var helloWorld = function() { print quot;hello world!quot; }; var twice = function(func) { func(); func(); }; twice(helloWorld); // prints quot;hello world!hello world!quot; // Returned by a function var makeHello = function() { return function(name) { return quot;hello quot; + name; } }; var hello = makeHello(); hello(quot;worldquot;); // returns quot;hello worldquot; 15

Javascript the different good parts: Functions and Scope  Scopes Global var x = 1, x=1 y = 2; y=2  Global v=3 Function function outer(p) {  Function var z = 3; function inner() {  No z=3 var x = 100, Block-level p = ... w = 200;  Call } Objects } x = 100 w = 200 if (true) {  Scope var v = 3; Chain Scope Chain } 16

Javascript the different good parts: Functions as Closures 1  Lexical Scoping  Closures Global z = 100 Function function outer() { var z = 3; return function() { return z; z=3 } } var inner = outer(); var z = 100; ion Execut inner(); // returns 3 Scope Chain 17

Javascript the different good parts: Functions as Closures 2  Closures bind variables, not values ! // Wrong // Right var funcs = []; var funcs = []; for (var i = 0; i < 3; i++) { for (var i = 0; i < 3; i++) { funcs[i] = function() { funcs[i] = function(p) { return i; return function() {return p}; } }(i) } } funcs[0](); // returns 3 !! funcs[0](); // returns 0 funcs[1](); // returns 3 !! funcs[1](); // returns 1 funcs[2](); // returns 3 !! funcs[2](); // returns 2 18

Javascript the different good parts: Objects 1  Containers of key/value pairs (properties)  keys are strings  values are anything (loose typing) // Creation with literal book var book = { quot;titlequot; quot;Javascriptquot; title: quot;Javascriptquot;, pages: 240, quot;pagesquot; 240 author: { quot;authorquot; - name: quot;Federicoquot;, surname: quot;Galassiquot; } } quot;namequot; quot;Federicoquot; quot;surnamequot; quot;Galassiquot; 19

Javascript the different good parts: Objects 2  Objects are dynamic  Properties can be added and removed at runtime  No class constraints // Get a property book[quot;titlequot;] // returns quot;Javascriptquot; book.title // same as book[quot;titlequot;] book.propertyNotThere // returns undefined // Set or update a property book.cover = quot;butterfly.jpgquot; book.title = quot;Javascript the good partsquot; // Delete a property delete book.title // now book.title is undefined 20

Javascript the different good parts: Objects Methods  Methods are book function valued quot;titlequot; quot;Javascriptquot; properties quot;pagesquot; 240 quot;readquot; -  Inside methods Method this is bound to function() { object “on the left” var action = quot;Reading quot;; return action + this.title; book.read = function() { } var action = quot;Reading quot;; return action + this.title; Scope } action = quot;Reading quot; this = book.read(); // returns quot;Reading Javascriptquot; 21

Javascript the different good parts: Objects Prototype  Every object can be linked to another object through the prototype property (__proto__)  If a property does not exist in the object, request is delegated to the prototype another_point var point = { quot;xquot; 20 x: 10, y: 10 __proto__ - }; var another_point = { x: 20 point }; quot;xquot; 10 another_point.__proto__ = point; point.x; // returns 20 quot;yquot; 10 point.y; // returns 10 (delegated) __proto__ - 22

Javascript the different good parts: Objects Prototype and Methods  Delegation works for methods too  this is always bound to the “first object” another_rect // returns 20 * 10 = 200 another_rect.area(); quot;widthquot; 20 Scope __proto__ - this = Prototype rect Method quot;widthquot; 10 function() { quot;heightquot; 10 return this.width * quot;areaquot; - this.height; } __proto__ - 23

Javascript the different good parts: Objects Prototype Chain  Prototypes form a chain, followed to resolve properties  At the end there is Object which provides common stuff, then undefined first.asdasdasd; // quot;asdasdasdquot; not in first, first // second, last // quot;asdasdasdquot; not in {} __proto__ - // returns undefined Pr luti Re op so second er on first.hasOwnProperty ty // returns function() ... __proto__ - Object last __proto__ - 24

Javascript the different good parts: Working with Objects and Prototypes 1 var car = { color: quot;whitequot;, speed: 0, accel: function(kmh) { this.speed += kmh; } }; // Make a supercar from car var supercar = { color: quot;blackquot;, __proto__: car }; // or also by cloning var supercar = Object.create(car, { color: quot;blackquot; }); 25

Javascript the different good parts: Working with Objects and Prototypes 2 // Prototype relationship is dynamic car.wheels = 4; supercar.wheels; // 4 // Setting properties is local supercar.driver = quot;M. Knightquot;; car.driver; // undefined // Where properties are from? quot;driverquot; in supercar; // true quot;wheelsquot; in supercar; // true supercar.hasOwnProperty(quot;driverquot;); // true supercar.hasOwnProperty(quot;wheelsquot;); // false // Common to all objects supercar.toString(); // quot;[object Object]quot; car.isPrototypeOf(supercar); // true 26

Javascript the different good parts: Objects Prototypal Inheritance 1  Prototypes are javascript way to share  Data  Behaviour 27

Javascript the different good parts: Objects Prototypal Inheritance 2  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 28

Javascript the different good parts: Objects Prototypal Inheritance 3  Ok, I cheated  __proto__ available in mozilla only  Object.create coming in next revision of language  Javascript is schizophrenic  Prototypal nature  Wannabe classical 29

Javascript the different good parts: Objects Constructor Functions 1  Constructor Functions  Boring  Function has a “prototype” property  The “prototype” property has a “constructor” property which points back to the Function object  Function can be invoked with the “new” operator  Create an object whose __proto__ is “prototype” property of Function  Initialize the object executing Function 30

Javascript the different good parts: Objects Constructor Functions 2 // Constructor function // silently executes function Dog(name) { // Dog.prototype = { constructor: Dog } this.name = name; } Dog.prototype; // Object Dog.prototype.constructor; // return function Dog // Create a new Dog object // silently executes var fido = new Dog(quot;fidoquot;); // var fido = Object.create(Dog.prototype); // Dog.call(fido, quot;fidoquot;); fido.__proto__; // Object fido.__proto__.constructor; // Dog fido.constructor; // Dog (inherited by __proto__) fido.name // fido 31

Javascript the different good parts: Objects Constructor Functions 3 function Rectangle(w, h) {  Why? this.w = w; Function is a constructor  this.h = h; } Function prototype is a class  Rectangle.prototype.higher = function() { this.h += 1 }; new is new  Feels classical, Feels familiar  var rect = new Rectangle(5,10);  Worst of both worlds  Unnecessarily complicated  Hide prototypal nature  Weird for classical programmers 32

Javascript the different good parts: Objects Constructor Functions Fix  Fortunately there’s a Quick Fix // waiting for next javascript implementation... if (typeof Object.create !== 'function') { Object.create = function (o) { var F = function() {}; F.prototype = o; return new F(); }; } 33

Javascript the different good parts: Arrays  No real arrays in javascript  They’re objects in disguise  special props and methods  Cool literal syntax 34

Javascript the different good parts: Arrays Example 1 // array literal var numbers = [1, 2, 3, 4, 5]; // reference numbers[2]; // returns 3 numbers[10]; // returns undefined // length property numbers.length; // 5 // nice methods numbers.push(11); // now [1, 2, 3, 4, 5, 11] numbers.join(quot; quot;); // returns quot;1 2 3 4 5 11quot; 35

Javascript the different good parts: Arrays Example 2 // actually... // indexes are just object properties numbers.2; // would return 3 // common object methods numbers.hasOwnProperty(0); // returns true // length = last numeric prop + 1 numbers[100] = 100; numbers.length; // returns 101 // ultimate proof typeof numbers; // returns quot;objectquot; 36

Javascript the different good parts: Functional Programming  Iterators  Callbacks  Module Pattern  Curry  Memoization 37

Javascript the different good parts: Functional Programming Iterators  Take control of loops  Reduce accidental complexity 38

Javascript the different good parts: Iterators Example 1 // 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 39

Javascript the different good parts: Iterators Example 2 // 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] 40

Javascript the different good parts: Iterators Example 3 // 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] 41

Javascript the different good parts: Iterators Example 4 // 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; }); // returns 55 42

Javascript the different good parts: Iterators Example 5 // 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 ); 43

Javascript the different good parts: Iterators Example 6 // 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))); 44

Javascript the different good parts: Functional Programming Callbacks  Manage asynchronous communication  Hide complexity 45

Javascript the different good parts: Callbacks Example 1 // Synchronous request var response = get(quot;http://www.google.comquot;); display(response); // Asynchronous with callback get(quot;http://www.google.comquot;, function(response) { display(response); }); 46

Javascript the different good parts: Callbacks Example 2 // explicit complexity var response = get(quot;http://www.google.comquot;); if (response.completed) { if (response.httpCode === quot;200quot;) { display(response); } else { // http error } } else { // network error } 47

Javascript the different good parts: Callbacks Example 3 // complexity hidden in the client code var response = get(quot;http://www.google.comquot;); if (success(response)) { display(response); } else { // error } // complexity hidden away get(quot;http://www.google.comquot;, { success: function(response) { display(response); } }); 48

Javascript the different good parts: Functional Programming Module Pattern  Hide state and behaviour 49

Javascript the different good parts: Module Pattern Example 1 var numbers = [quot;zeroquot;, quot;onequot;, quot;twoquot;, quot;threequot;, ...]; // GLOBAL BAD var numberToString = function(num) { return numbers[num]; } var numberToString = function(num) { // LOCAL SLOW var numbers = [quot;zeroquot;, quot;onequot;, quot;twoquot;, quot;threequot;, ...]; return numbers[num]; } var numberToString = function() { // PRIVATE AND FAST var numbers = [quot;zeroquot;, quot;onequot;, quot;twoquot;, quot;threequot;, ...]; return function(num) { return numbers[num]; } }(); 50

Javascript the different good parts: Functional Programming Memoization  Cache computation  Speed up execution 51

Javascript the different good parts: Memoization Example 1 // get pixels. maybe millions of them var pixels = getImagePixels(quot;image.jpgquot;); var getColor = function(pixel) { // ... computation on RGB values ... returns quot;blackquot;; // or quot;whitequot; or quot;greenquot; etc... } // find the color pixels.each(function(pixel) { var color = getColor(pixel); // store result }); 52

Javascript the different good parts: Memoization Example 2 // wasted computation, 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); 53

Javascript the bad parts  The features you should definitely avoid 54

Javascript the bad parts 1  Global variables  Semicolon insertion // Good, returns { ok: true } // Very bad, returns undefined return { return ok: true { } ok: true }  Reserved words // Good // Very bad, error book[quot;classquot;]; book.class; var book = { var book = { quot;classquot;: quot;bookquot; class: quot;bookquot; } } 55

Javascript the bad parts 2  Unicode  typeof // Not useful, returns quot;objectquot; typeof array; // Wrong, returns quot;objectquot; typeof null; // Inconsistent, returns quot;functionquot; or quot;objectquot; typeof /a/;  parseInt // Good, returns 8 // Wrong, returns 0 parseInt(quot;08quot;, 10); parseInt(quot;08quot;); 56

Javascript the bad parts 3 +  Floating Point 0.2 + 0.1 === 0.3 // false  Phony Arrays arguments.join // returns undefined  Falsy values if (book.name == null) { ... // 2 errors, works by coincidence  == type coercion '' == '0' // false false == undefined // false 0 == '' // true false == null // false 0 == '0' // true null == undefined // true 57

Javascript the bad parts 4  Objects are not hashes var cache; var word = getWord(); // returns quot;constructorquot; if (word in cache) { // ops, true  Deep for..in // safe way for (var i in list) { if (list.hasOwnProperty(i)) { // do something } }  Extending native prototypes kill kittens  Prototype library mess 58

Credits  Thank to Douglas Crockford and his book  He knows the way 59

Add a comment

Related presentations

Related pages

JavaScript: The Good Parts - O'Reilly Media

Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry ...
Read more

JavaScript: The Good Parts - Free Download eBook - pdf

Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry ...
Read more

JavaScript: The Good Parts: Working with the Shallow Grain ...

Douglas - JavaScript: The Good Parts: Working with the Shallow Grain of JavaScript jetzt kaufen. ISBN: 0636920517740, Fremdsprachige Bücher - Programmieren
Read more

JavaScript: The Good Parts: Douglas Crockford ...

JavaScript: The Good Parts [Douglas Crockford] on Amazon.com. *FREE* shipping on qualifying offers. Most programming languages contain good and bad parts ...
Read more

JavaScript: The Good Parts - YouTube

JavaScript: The Good Parts GoogleTechTalks. Subscribe Subscribed Unsubscribe 259,094 259K. Loading ... JavaScript has some extraordinarily good ...
Read more

JavaScript: The Good Parts: The Good Parts eBook: Douglas ...

Kindle-Shop Kindle kaufen Kindle eBooks Englische eBooks Kindle Unlimited eBook Deals Kindle Singles Kostenlose Kindle Lese-Apps Zeitungen & Zeitschriften ...
Read more

JavaScript: The Good Parts.pdf - Free Download - File ...

JavaScript: The Good Parts.pdf - JavaScript: The Good Parts Free Download - File Hosting Service
Read more

JavaScript: The Good Parts Buch portofrei bei Weltbild.de

Bücher bei Weltbild: Jetzt JavaScript: The Good Parts versandkostenfrei online kaufen & per Rechnung bezahlen bei Weltbild, Ihrem Bücher-Spezialisten!
Read more

JavaScript: The Good Parts by Douglas Crockford ...

JavaScript has 5,320 ratings and 396 reviews. A. said: A short, dense book, describing a subset of Javascript and distinguishing which parts of the langu...
Read more

Douglas Crockford's JavaScript

American computer programmer and entrepreneur who is best known for his ongoing involvement in the development of the JavaScript language.
Read more