Javascript
The Good Parts
      Federico Galassi             Gabriele Lana
federico.galassi@gmail.com   gabriele.lana@gmai...
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 pro...
Javascript is a toy language? Bullshit!!
 Stanford University
  CS 242 “Programming Languages” 2008
 Mozilla Corporation...
Javascript is not toy language...So what?
 The Most Misunderstood language ever
   Different from mainstream
   Design ...
Javascript is different
 Not the language you already know
   You already know other good languages
   It’s a web desig...
Javascript is different
 Hidden nature
   Familiar syntax from Java/C
   Pretty exotic foundations
     Objects from S...
Javascript has design mistakes
 Short lab time
   hacked in one week in may 1995
   in netscape2 by the end of the year...
Javascript usually runs in the browser
 Inconsistent implementations
   poor specifications
 Depends on DOM for I/O
  ...
Javascript rules indeed!
 Imperative
 Functional
 Object Oriented
 Simple
 Winner by natural selection
   ...where j...
Javascript can be made even better!
 Javascript has good and bad parts
 Use good parts the “right way”
 Cut bad parts
...
Javascript the different good parts:
Functions
 First class
      are objects
  
      can be created at runtime
  
   ...
Javascript the different good parts:
Working with Functions 1
     // Creation the old way
     function hello(name) {
   ...
Javascript the different good parts:
Working with Functions 2
    // Passed as parameter and invoked
    var helloWorld = ...
Javascript the different good parts:
Functions and Scope
 Scopes                                          Global
        ...
Javascript the different good parts:
Functions as Closures 1
 Lexical Scoping
 Closures                                 ...
Javascript the different good parts:
Functions as Closures 2
 Closures bind variables, not values !
// Wrong             ...
Javascript the different good parts:
Objects 1
 Containers of key/value pairs (properties)
   keys are strings
   value...
Javascript the different good parts:
Objects 2
 Objects are dynamic
   Properties can be added and removed at runtime
  ...
Javascript the different good parts:
Objects Methods
 Methods are                             book
  function valued     ...
Javascript the different good parts:
Objects Prototype
 Every object can be linked to another object
  through the protot...
Javascript the different good parts:
Objects Prototype and Methods
 Delegation works for methods too
 this is always bou...
Javascript the different good parts:
Objects Prototype Chain
 Prototypes form a chain, followed to resolve
  properties
...
Javascript the different good parts:
Working with Objects and Prototypes 1
       var car = {
           color: quot;white...
Javascript the different good parts:
Working with Objects and Prototypes 2
       // Prototype relationship is dynamic
   ...
Javascript the different good parts:
Objects Prototypal Inheritance 1
 Prototypes are javascript way to share
   Data
  ...
Javascript the different good parts:
Objects Prototypal Inheritance 2
 Prototypal Inheritance
   Vs Classical Inheritanc...
Javascript the different good parts:
Objects Prototypal Inheritance 3
 Ok, I cheated
   __proto__ available in mozilla o...
Javascript the different good parts:
Objects Constructor Functions 1
 Constructor Functions
   Boring
   Function has a...
Javascript the different good parts:
Objects Constructor Functions 2
// Constructor function       // silently executes
fu...
Javascript the different good parts:
Objects Constructor Functions 3
                                        function Rect...
Javascript the different good parts:
Objects Constructor Functions Fix
 Fortunately there’s a Quick Fix

      // waiting...
Javascript the different good parts:
Arrays
 No real arrays in javascript
 They’re objects in disguise
   special props...
Javascript the different good parts:
Arrays Example 1
  // array literal
  var numbers = [1, 2, 3, 4, 5];

  // reference
...
Javascript the different good parts:
Arrays Example 2
  // actually...

  // indexes are just object properties
  numbers....
Javascript the different good parts:
Functional Programming
 Iterators
 Callbacks
 Module Pattern
 Curry
 Memoization...
Javascript the different good parts:
Functional Programming Iterators
 Take control of loops
 Reduce accidental complexi...
Javascript the different good parts:
Iterators Example 1
  // iterate on a collection

  function each(arr, func) {
      ...
Javascript the different good parts:
Iterators Example 2
   // maps a collection to a new one

   function map(arr, func) ...
Javascript the different good parts:
Iterators Example 3
   // filter elements of a collection

   function filter(arr, fu...
Javascript the different good parts:
Iterators Example 4
  // compute a single value from a collection

  function reduce(...
Javascript the different good parts:
Iterators Example 5
 // Composability
 // square elements, then pick even ones, then ...
Javascript the different good parts:
Iterators Example 6
 // Composability but easy to read

 var square = function(arr) {...
Javascript the different good parts:
Functional Programming Callbacks
 Manage asynchronous communication
 Hide complexit...
Javascript the different good parts:
Callbacks Example 1
 // Synchronous request

 var response = get(quot;http://www.goog...
Javascript the different good parts:
Callbacks Example 2
 // explicit complexity
 var response = get(quot;http://www.googl...
Javascript the different good parts:
Callbacks Example 3
 // complexity hidden in the client code
 var response = get(quot...
Javascript the different good parts:
Functional Programming Module Pattern
 Hide state and behaviour




                ...
Javascript the different good parts:
Module Pattern Example 1
var numbers = [quot;zeroquot;, quot;onequot;, quot;twoquot;,...
Javascript the different good parts:
Functional Programming Memoization
 Cache computation
 Speed up execution




     ...
Javascript the different good parts:
Memoization Example 1
 // get pixels. maybe millions of them
 var pixels = getImagePi...
Javascript the different good parts:
Memoization Example 2
 // wasted computation, cache it...
 var getColorCache = functi...
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 u...
Javascript the bad parts 2
 Unicode
 typeof
  // Not useful, returns quot;objectquot;
  typeof array;
  // Wrong, return...
Javascript the bad parts 3
+
 Floating Point
  0.2 + 0.1 === 0.3   // false

 Phony Arrays
  arguments.join // returns ...
Javascript the bad parts 4
 Objects are not hashes
              var cache;
              var word = getWord();   // retu...
Credits
 Thank to Douglas Crockford and his book
 He knows the way




                                     59
Upcoming SlideShare
Loading in …5
×

Javascript The Good Parts

5,118 views

Published on

By Federico Galassi and Gabriele Lana at PHPCon Italia 2009

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

Follow me on Twitter!
https://twitter.com/federicogalassi

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

No Downloads
Views
Total views
5,118
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
342
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Javascript The Good Parts

  1. 1. Javascript The Good Parts Federico Galassi Gabriele Lana federico.galassi@gmail.com gabriele.lana@gmail.com
  2. 2. Why Javascript  The language of the Web  A nice, elegant, expressive language 2
  3. 3. Why Javascript  A nice, elegant, expressive language...  What?? 3
  4. 4. Javascript perceived as a toy language  Good for small quick web hacks  Not good for “serious” programming  large projects  mantainable code 4
  5. 5. Javascript is a toy language? Bullshit!!  Stanford University CS 242 “Programming Languages” 2008  Mozilla Corporation  Firefox  Many more... 5
  6. 6. Javascript is not toy language...So what?  The Most Misunderstood language ever  Different from mainstream  Design mistakes  Traditionally runs in the browser 6
  7. 7. 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
  8. 8. Javascript is different  Hidden nature  Familiar syntax from Java/C  Pretty exotic foundations  Objects from Self  Functions from Scheme if (x < 1) { x++; } 8
  9. 9. 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
  10. 10. 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
  11. 11. Javascript rules indeed!  Imperative  Functional  Object Oriented  Simple  Winner by natural selection  ...where java failed. Dachshund Evolution 11
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. Javascript the different good parts: Objects Prototypal Inheritance 1  Prototypes are javascript way to share  Data  Behaviour 27
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. Javascript the different good parts: Arrays  No real arrays in javascript  They’re objects in disguise  special props and methods  Cool literal syntax 34
  35. 35. 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
  36. 36. 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
  37. 37. Javascript the different good parts: Functional Programming  Iterators  Callbacks  Module Pattern  Curry  Memoization 37
  38. 38. Javascript the different good parts: Functional Programming Iterators  Take control of loops  Reduce accidental complexity 38
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. Javascript the different good parts: Functional Programming Callbacks  Manage asynchronous communication  Hide complexity 45
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. Javascript the different good parts: Functional Programming Module Pattern  Hide state and behaviour 49
  50. 50. 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
  51. 51. Javascript the different good parts: Functional Programming Memoization  Cache computation  Speed up execution 51
  52. 52. 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
  53. 53. 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
  54. 54. Javascript the bad parts  The features you should definitely avoid 54
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. Credits  Thank to Douglas Crockford and his book  He knows the way 59

×