Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Parlez-Vous JavaScript

Angus Croll
November 30, 2012

Parlez-Vous JavaScript

You can spot the tourists a mile away. In Singapore they’re the ones drinking slings at the Raffle’s Long Bar; in JavaScript they’re the ones stuffing their favourite paradigms into a language that never needed them and works better without them.

In this talk, your humble tour guide will wander the back alleys of JavaScript in search of native patterns, uncovering the idioms that work with the language instead of fighting it. We’ll visit some fabulous local haunts: mixins, functional expressions, context injection and of course closures, while trying not to make fun of the garish tourist traps (classes, are you listening?)

Angus Croll

November 30, 2012
Tweet

More Decks by Angus Croll

Other Decks in Technology

Transcript

  1. “The grain tells you which way the wood wants to

    be cut” Charles Miller fishbowl.pastiche.org
  2. JavaScript Ruby Python Java Shell PHP C C++ 21% 13%

    8% 8% 8% 7% 6% 4% github.com/languages
  3. var Animal = function(gender, says) { this.gender = gender; this.says

    = says; }; var WalkingAnimal = function(gender, says) { Animal.call(this, gender, says); } WalkingAnimal.prototype = new Animal();
  4. var animalProto = { speak: function() { console.log(this.says); } }

    var walkingAnimalProto = Object.create( animalProto, { walk: { value: function() { console.log('walking'); } } //... } );
  5. //Prototype.js var SwimmingAnimal = Class.create(Animal, { type: 'SwimmingAnimal', speak: function($super)

    { return $super() + ", glug"; } }); //Dustin Diaz's "klass" var Alien = SuperHuman.extend({ beam: function() { this.supr(); // beam into space } });
  6. Animal Walking Animal Swimming Animal Flying Animal Cat Elephant Crocodile

    Whale Eagle Bat Egg-laying Animal Migrating Animal
  7. Animal Walking Animal Swimming Animal Flying Animal Cat Elephant Crocodile

    Whale Eagle Bat Egg-laying Animal Migrating Animal WTF? I walk too!!
  8. Migrating Animal Egg-laying Animal Flying Animal Swimming Animal Walking Animal

    Duck? Animal Cat Elephant Crocodile Whale Eagle Bat
  9. The sad thing is that anyone even cares about inheritance

    hierarchies... Because in JavaScript they’re quite unnecessary...
  10. var withWalking = { walk: function() { console.log('walking'); }, turn:

    function(direction) { console.log('turning', direction); }, stopWalking: function() { console.log('stopped walking'); } };
  11. var extend = function(destination, source) { for (var k in

    source) { if (source.hasOwnProperty(k)) { destination[k] = source[k]; } } return destination; }; extend(Crocodile.prototype, withWalking); extend(Crocodile.prototype, withSwimming);
  12. var withWalking = function() { this.walk = function() { console.log('walking');

    }; this.turn = function(direction) { console.log('turning', direction); }; this.stopWalking = function() { console.log('stopped walking'); }; };
  13. function Crocodile(name, gender) { this.name = name; this.gender = gender;

    }; Crocodile.prototype.stalkTourists = function() { //.. }; withWalking.call(Crocodile.prototype); withSwimming.call(Crocodile.prototype);
  14. // Using underscore _.each = _.wrap(_.each, function(each, collection, fn, context)

    { each(collection, fn, context); return collection; } ); _.each([1,2,3], alert); //[1,2,3]
  15. var fruit = ["grape ", "pear ", "apple"]; var result

    = []; for (var i = 0; i < fruit.length; i++) { result.push(fruit[i].trim()); } result; //["grape", "pear", "apple"]
  16. Function.prototype.curry = function() { if (arguments.length < 1) { //nothing

    to curry with - return function return this; } var method = this; var args = [].slice.call(arguments); return function() { return method.apply( this, args.concat([].slice.call(arguments))); } }
  17. Function.prototype.compose = function(argFunction) { var invokingFunction = this; return function()

    { return invokingFunction.call( this,argFunction.apply(this,arguments)); } }
  18. //jQuery selectors return jQuery objects var anchors = $('a'); Array.isArray(anchors);

    //false anchors.push; //function push() { [native code] } anchors.forEach; //undefined
  19. //jQuery selectors return jQuery objects var anchors = $('a'); Array.isArray(anchors);

    //false anchors.push; //function push() { [native code] } anchors.forEach; //undefined //which means we are stuck in jquery land var hrefs = anchors.map( function(i, elem) {return elem.href} ); !!
  20. //jQuery selectors return jQuery objects var anchors = $('a'); Array.isArray(anchors);

    //false anchors.push; //function push() { [native code] } anchors.forEach; //undefined //which means we are stuck in jquery land var hrefs = anchors.map( function(i, elem) {return elem.href} ); //perpetually Array.isArray(hrefs); //false ;-( !!
  21. function getEventTarget(evt) { if (!evt) { evt = window.event; }

    if (!evt) { return; } var target; if (evt.target) { target = evt.target; } else { target = evt.srcElement; } return target; }
  22. “Every language has its own way. Follow its form. Don’t

    try to program as if you were using another language.” Marijn Haverbeke Eloquent JavaScript