the many facets of code reuse in javascript

The many facets of code reuse in JavaScript

Leonardo Borges@leonardo_borgeshttp://www.leonardoborges.comhttp://www.thoughtworks.com

http://www.leonardoborges.com


http://www.thoughtworks.com


Highly opinionated talk ahead

JavaScript is all about Objects

Not classes

Not access modifiers

Just Objects

Objects

• An unordered collection of properties• Arrays are Objects• Functions are Objects• Regular Expressions are Objects

...you catch my drift

Ok, I lied.

There’s more to JavaScript than just Objects

The Prototype

The Prototype

Object

- prototype- __proto__

The Prototype

myObject


Object


The Prototype

myObject


Object


undefined

The Prototype

myObject


Object


undefined function Empty() {}

But how do you create Objects?

Object Literals

var person = { firstName: "Leonardo", lastName: "Borges", age: 29};

Object.create

• Specified by the ECMAScript 5th edition • Modern browsers such as Chrome and Firefox already implement it

Object.create

• Specified by the ECMAScript 5th edition • Modern browsers such as Chrome and Firefox already implement it

var anotherPerson = Object.create(person, { age: { value: 50 }});anotherPerson.age; //50

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

var anotherPerson = Object.create(person);

Functions

• First class objects• Linked to Function.prototype• Can be used as constructors f(x)

Functions

Function


Functions

Function


function Empty() {}

Functions

myFunction


Function


function Empty() {}

Function calls

Implicit arguments:

• this, the current object• arguments, an array containing all values passed into the function call

function f(a, b, c) { console.log(a); console.log(b); console.log(c); console.log(this); console.log(arguments);}f(1, 2, 3);


// 1// 2// 3// DOMWindow// [1, 2, 3]


// 1// 2// 3// DOMWindow// [1, 2, 3]

The value of this changes depending on how the function is called.

Calling functions: as methodsvar person = { firstName: "Leonardo", lastName: "Borges", fullName: function() { return this.firstName + " " + this.lastName; }};

person.fullName();

Calling functions: as methodsvar person = { firstName: "Leonardo", lastName: "Borges", fullName: function() { return this.firstName + " " + this.lastName; }};

person.fullName();

this is bound to person

Calling functions: as, err, functionsthis.firstName = "Leo";this.lastName = "Borges";

function fullName() { return this.firstName + " " + this.lastName;}

fullName(); //Leo Borgesthis; //DOMWindow

Calling functions: as, err, functionsthis.firstName = "Leo";this.lastName = "Borges";

function fullName() { return this.firstName + " " + this.lastName;}

fullName(); //Leo Borgesthis; //DOMWindow

this is bound to the global object

Calling functions: using apply

Allows the value of this to be changed upon calling:


var anotherPerson = { firstName: "Johnny", lastName: "Cash"};

person.fullName.apply(anotherPerson); //Johnny Cash



var anotherPerson = { firstName: "Johnny", lastName: "Cash"};

person.fullName.apply(anotherPerson); //Johnny Cash


this is bound to anotherPerson

Calling functions: constructors

//constructor functionvar F = function() {};

var obj = new F();

What does new do?

Creates a new object, obj

Assigns F’s public prototype to the obj internal prototype

Binds this to obj

var obj = {};

obj.__proto__ === F.prototype// true

this === obj// true

Don’t use new

Don’t use new

• No built-in checks to prevent constructors from being called as regular functions• If you forget new, this will be bound to the global object

But I want to

new workaround//constructor functionvar F = function() { if (!(this instanceof F)) { return new F(); }};

var obj = new F();var obj = F();//both previous statements are now equivalent

new workaround//constructor functionvar F = function() { if (!(this instanceof F)) { return new F(); }};

var obj = new F();var obj = F();//both previous statements are now equivalent

You can see how cumbersome this can get

Closures

var Person = function(name) { this.name = name; return { getName: function() { return this.name; } };};var leo = new Person("leo");leo.getName();

Closures


Can you guess what this line returns?

undefined

Closures


Closures

Bound to the person object


Closures

Bound to the person object

Bound to the object literal


Closures

Allows a function to access variables outside it’s scope

Closuresvar Person = function(name) { this.name = name; var that = this; return { getName: function() { return that.name; } };};

var leo = new Person("leo");leo.getName(); // “leo”

Closuresvar Person = function(name) { this.name = name; var that = this; return { getName: function() { return that.name; } };};

var leo = new Person("leo");leo.getName(); // “leo”

{getName is now a closure: it closes over that

Sharing behaviour

Pseudoclassical inheritance//constructor functionvar Aircraft = function(name){ this.name = name;};Aircraft.prototype.getName = function() { return this.name;}Aircraft.prototype.fly = function() { return this.name + ": Flying...";}

Pseudoclassical inheritance//constructor functionvar Aircraft = function(name){ this.name = name;};Aircraft.prototype.getName = function() { return this.name;}Aircraft.prototype.fly = function() { return this.name + ": Flying...";}

var cirrus = new Aircraft("Cirrus SR22"); cirrus.getName(); //"Cirrus SR22"cirrus.fly(); //"Cirrus SR22: Flying..."

Pseudoclassical inheritancevar Jet = function(name){ this.name = name;};Jet.prototype = new Aircraft();Jet.prototype.fly = function() { return this.name + ": Flying a jet...";}

Pseudoclassical inheritancevar Jet = function(name){ this.name = name;};Jet.prototype = new Aircraft();Jet.prototype.fly = function() { return this.name + ": Flying a jet...";}

var boeing = new Jet("Boeing 747");boeing.getName(); //"Boeing 747"boeing.fly(); //"Boeing 747: Flying a jet..."

Prototypal inheritance

• Objects inherit directly from other objects• Sometimes referred to as differential inheritance

Prototypal inheritancevar myAircraft = { name: "Cirrus SR22", getName: function() { return this.name; }, fly: function() { return this.name + ": Flying..."; }};

myAircraft.getName(); //"Cirrus SR22"myAircraft.fly(); //"Cirrus SR22: Flying..."

Prototypal inheritance

var myJet = Object.create(myAircraft);myJet.name = "Boeing 747";myJet.fly = function() { return this.name + ": Flying a jet...";}

myJet.getName(); //"Boeing 747"myJet.fly(); //"Boeing 747: Flying a jet..."

Weaknesses• Lack of private members - all properties are public• No easy access to super• In the pseudoclassical pattern, forgetting new will breakyour code

Weaknesses• Lack of private members - all properties are public• No easy access to super• In the pseudoclassical pattern, forgetting new will breakyour code

Strengths• Using the prototype is the fastest way to create objects when compared to closures• In practice it will only matter if you’re creating thousands of objects

Functional inheritance

var aircraft = function(spec) { var that = {}; that.getName = function() { return spec.name; }; that.fly = function() { return spec.name + ": Flying..."; }; return that;};

Functional inheritancevar myAircraft = aircraft({ name: "Cirrus SR22" });myAircraft.getName(); //"Cirrus SR22"myAircraft.fly(); //"Cirrus SR22: Flying..."

Functional inheritancevar myAircraft = aircraft({ name: "Cirrus SR22" });myAircraft.getName(); //"Cirrus SR22"myAircraft.fly(); //"Cirrus SR22: Flying..."

myAircraft.that; //undefined

Functional inheritancevar jet = function(spec) { var that = aircraft(spec); that.fly = function() { return spec.name + ": Flying a jet..."; }; return that;};


that is now an aircraft


var myJet = jet({ name: "Boeing 747" }); myJet.getName(); //"Boeing 747"myJet.fly(); //"Boeing 747: Flying a jet..."

that is now an aircraft

But I want to reuse my fly function

Implementing super

Object.prototype.super = function(fName) { var that = this; var f = that[fName];

return function() { return f.apply(that, arguments); };};

Revisiting jetvar jet = function(spec) { var that = aircraft(spec), superFly = that.super("fly"); that.fly = function() { return superFly() + "a frickin' jet!"; }; return that;};

var myJet = jet({ name: "Boeing 747"});myJet.fly(); //"Boeing 747: Flying...a frickin' jet!"

Weaknesses• Consumes more memory: every object created allocates new function objects as necessary• In practice it will only matter if you’re creating thousands of objects


Weaknesses• Consumes more memory: every object created allocates new function objects as necessary• In practice it will only matter if you’re creating thousands of objects

Strengths• It’s conceptually simpler than pseudoclassical inheritance• Provides true private members• Provides a way of working with super (albeit verbose)• Avoids the new workaround since new isn’t used at all


Both Prototypal and Functional patterns are powerful

Both Prototypal and Functional patterns are powerful

I’d avoid the pseudoclassical path

But wait! Inheritance isn’t the only way to share behaviour

An alternative to inheritance:Mixins

var utils = {};utils.enumerable = { reduce: function(acc, f) { for (var i = 0; i < this.length; i++) { acc = f(acc, this[i]); } return acc; }};

An alternative to inheritance:Mixins

var utils = {};utils.enumerable = { reduce: function(acc, f) { for (var i = 0; i < this.length; i++) { acc = f(acc, this[i]); } return acc; }};

Sitck it into a module so as to avoid clobbering the global namespace

Mixins - implementing extends

utils.extends = function(dest,source) { for (var prop in source) { if (source.hasOwnProperty(prop)) { dest[prop] = source[prop]; } }};

Mixins extending Array.prototype

utils.extends(Array.prototype, utils.enumerable);

Mixins extending Array.prototype

utils.extends(Array.prototype, utils.enumerable);

[1,2,3].reduce(0, function(acc,item) { acc += item; return acc;}); // 6

Going apeshit

functional

Partial function application


var sum = function(a, b) { return a + b;};



var inc = utils.partial(sum, 1);



var inc = utils.partial(sum, 1);

inc(8); //9


var times = function(a, b) { return a * b;}



var double = utils.partial(times, 2);



var double = utils.partial(times, 2);

double(10); //20


utils.partial = function(f) { var sourceArgs = Array.prototype.slice.apply(arguments, [1]); return function() { var actualArgs = Array.prototype.concat.apply(sourceArgs, arguments); return f.apply(null, actualArgs); };};


utils.partial = function(f) { var sourceArgs = Array.prototype.slice.apply(arguments, [1]); return function() { var actualArgs = Array.prototype.concat.apply(sourceArgs, arguments); return f.apply(null, actualArgs); };};

f**k yeah

Function composition:Reversing a string

Function compositionutils.split = function(str) { return String.prototype.split.apply(str, [""]);};

utils.reverse = function(array) { return Array.prototype.reverse.apply(array);};

utils.join = function(array) { return Array.prototype.join.apply(array, [""]);};

Function composition

var reverseStr = utils.comp(utils.split, utils.reverse, utils.join);


var reverseStr = utils.comp(utils.split, utils.reverse, utils.join);

reverseStr("leonardo"); //odranoel


utils.comp = function() { var functions = Array.prototype.slice.apply(arguments, [0]); return function() { var result = functions.reduce(arguments, function(r, f) { return [f.apply(null, r)] }); return result[0];

};};


utils.comp = function() { var functions = Array.prototype.slice.apply(arguments, [0]); return function() { var result = functions.reduce(arguments, function(r, f) { return [f.apply(null, r)] }); return result[0];

};};

f**k yeah

Thankfully implements these - and much more - for us!

Bottom line

Bottom line

• Embrace JavaScript’s true prototypal nature

Bottom line

• Embrace JavaScript’s true prototypal nature• Use mixins, prototypal and functional inheritance to dispense with classes and the new keyword

Bottom line

• Embrace JavaScript’s true prototypal nature• Use mixins, prototypal and functional inheritance to dispense with classes and the new keyword• Use higher order functions, partial application and function composition as elegant alternatives to promote code reuse

Bottom line

• Embrace JavaScript’s true prototypal nature• Use mixins, prototypal and functional inheritance to dispense with classes and the new keyword• Use higher order functions, partial application and function composition as elegant alternatives to promote code reuse• Above all, understand each pattern’s strengths and weaknesses

Thanks!

Questions?

Leonardo Borges@leonardo_borges

http://www.leonardoborges.comhttp://www.thoughtworks.com





References

• JavaScript: the Good Parts (http://amzn.to/zY04ci)• Test-Driven JavaScript Development (http://amzn.to/yHCexS) • Secrets of the JavaScript Ninja (http://bit.ly/wOS4x2)• Closures wiki article (http://bit.ly/xF2OfP)• Underscore.js - functional programming for JS (http://bit.ly/JLkIbm)• Presentation source code (http://bit.ly/HU8kL6)

Leonardo Borges@leonardo_borgeshttp://www.leonardoborges.comhttp://www.thoughtworks.com

http://amzn.to/yHCexS

http://amzn.to/yHCexS

http://bit.ly/wOS4x2

http://bit.ly/wOS4x2

http://bit.ly/xF2OfP

http://bit.ly/xF2OfP

http://bit.ly/JLkIbm

http://bit.ly/JLkIbm

http://bit.ly/HU8kL6

http://bit.ly/HU8kL6





the many facets of code reuse in javascript

Technology

functions function prototype

new object

function fa

undefined function

prototypeobject prototype

objects functions

object literals var

logc console