Talk given at the ThoughtWorks XConf event in Australia - April/2012

1. The many facets of code reuse in
JavaScript
Leonardo Borges
@leonardo_borges
http://www.leonardoborges.com
http://www.thoughtworks.com

2. Highly opinionated
talk ahead

3. JavaScript is all about
Objects

4. Not classes

5. Not access modifiers

6. Just Objects

7. Objects
• An unordered collection of properties
• Arrays are Objects
• Functions are Objects
• Regular Expressions are Objects
...you catch my drift

8. Ok, I lied.

9. There’s more to JavaScript than just
Objects

10. The Prototype

11. The Prototype
Object
- prototype
- __proto__

12. The Prototype
Object
- prototype
- __proto__

13. The Prototype
myObject Object
- prototype - prototype
- __proto__ - __proto__

14. The Prototype
myObject Object
- prototype - prototype
- __proto__ - __proto__

15. The Prototype
myObject Object
- prototype - prototype
- __proto__ - __proto__
undefined

16. The Prototype
myObject Object
- prototype - prototype
- __proto__ - __proto__
undefined function Empty() {}

17. But how do you create Objects?

18. Object Literals
var person = {
firstName: "Leonardo",
lastName: "Borges",
age: 29
};

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

20. 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

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

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

23. Functions
Function
- prototype
- __proto__

24. Functions
Function
- prototype
- __proto__
function Empty() {}

25. Functions
myFunction Function
- prototype - prototype
- __proto__ - __proto__
function Empty() {}

26. Functions
myFunction Function
- prototype - prototype
- __proto__ - __proto__
function Empty() {}

27. Functions
myFunction Function
- prototype - prototype
- __proto__ - __proto__
function Empty() {}

28. Function calls
Implicit arguments:
• this, the current object
• arguments, an array containing all values passed
into the function call

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

30. 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]

31. 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]
The value of this changes depending on how the
function is called.

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

33. Calling functions: as methods
var person = {
firstName: "Leonardo",
lastName: "Borges",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
person.fullName();
this is bound to person

34. Calling functions: as, err, functions
this.firstName = "Leo";
this.lastName = "Borges";
function fullName() {
return this.firstName + " " + this.lastName;
}
fullName(); //Leo Borges
this; //DOMWindow

35. Calling functions: as, err, functions
this.firstName = "Leo";
this.lastName = "Borges";
function fullName() {
return this.firstName + " " + this.lastName;
}
fullName(); //Leo Borges
this; //DOMWindow
this is bound to the
global object

36. Calling functions: using apply
Allows the value of this to be changed upon calling:

37. 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

38. 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
this is bound to
anotherPerson

39. Calling functions: constructors
//constructor function
var F = function() {};
var obj = new F();

40. What does new do?
Creates a new object, obj
var obj = {};
Assigns F’s public prototype to the obj.__proto__ === F.prototype// true
obj internal prototype
this === obj// true
Binds this to obj

41. Don’t use new

42. 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

43. But I want to

44. new workaround
//constructor function
var F = function() {
if (!(this instanceof F)) {
return new F();
}
};
var obj = new F();
var obj = F();
//both previous statements are now equivalent

45. new workaround
//constructor function
var 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

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

47. Closures
var Person = function(name) {
this.name = name;
return {
getName: function() {
return this.name;
}
};
};
var leo = new Person("leo");
leo.getName();
Can you guess what this line returns?

48. undefined

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

51. Closures
var Person = function(name) {
this.name = name;
return {
getName: function() {
return this.name;
Bound to the person object
}
};
};
var leo = new Person("leo");
leo.getName();

52. Closures
var Person = function(name) {
this.name = name;
return {
getName: function() {
return this.name;
Bound to the person object
}
};
};
var leo = new Person("leo"); Bound to the object literal
leo.getName();

53. Closures
Allows a function to access variables outside it’s scope

54. Closures
var Person = function(name) {
this.name = name;
var that = this;
return {
getName: function() {
return that.name;
}
};
};
var leo = new Person("leo");
leo.getName(); // “leo”

55. Closures
var Person = function(name) {
this.name = name;
var that = this;
{
return {
getName is now a getName: function() {
closure: it closes over that return that.name;
}
};
};
var leo = new Person("leo");
leo.getName(); // “leo”

56. Sharing behaviour

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

58. Pseudoclassical inheritance
//constructor function
var 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..."

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

60. Pseudoclassical inheritance
var 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..."

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

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

63. 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..."

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

65. Weaknesses
• Lack of private members - all properties are public
• No easy access to super
• In the pseudoclassical pattern, forgetting new will break
your 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

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

67. Functional inheritance
Members declared
var aircraft = function(spec) { here are private
var that = {};
that.getName = function() {
return spec.name;
};
that.fly = function() {
return spec.name + ": Flying...";
};
return that;
};

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

69. Functional inheritance
var myAircraft = aircraft({ name: "Cirrus SR22" });
myAircraft.getName(); //"Cirrus SR22"
myAircraft.fly(); //"Cirrus SR22: Flying..."
myAircraft.that; //undefined

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

71. Functional inheritance that is now an
var jet = function(spec) {
aircraft
var that = aircraft(spec);
that.fly = function() {
return spec.name + ": Flying a jet...";
};
return that;
};

72. Functional inheritance that is now an
var jet = function(spec) {
aircraft
var that = aircraft(spec);
that.fly = function() {
return spec.name + ": Flying a jet...";
};
return that;
};
var myJet = jet({ name: "Boeing 747" });
myJet.getName(); //"Boeing 747"
myJet.fly(); //"Boeing 747: Flying a jet..."

73. But I want to reuse my fly function

74. Implementing super
Object.prototype.super = function(fName) {
var that = this;
var f = that[fName];
return function() {
return f.apply(that, arguments);
};
};

75. Revisiting jet
var 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!"

76. Functional inheritance
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

77. Functional inheritance
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

78. Both Prototypal and Functional patterns
are powerful

79. Both Prototypal and Functional patterns
are powerful
I’d avoid the pseudoclassical path

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

81. 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;
}
};

82. An alternative to inheritance:
Mixins Sitck it into a module so
as to avoid clobbering
var utils = {}; the global namespace
utils.enumerable = {
reduce: function(acc, f) {
for (var i = 0; i < this.length; i++) {
acc = f(acc, this[i]);
}
return acc;
}
};

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

84. Mixins
extending Array.prototype
utils.extends(Array.prototype, utils.enumerable);

85. Mixins
extending Array.prototype
utils.extends(Array.prototype, utils.enumerable);
[1,2,3].reduce(0, function(acc,item) {
acc += item;
return acc;
}); // 6

86. Going apeshit
functional

87. Partial function application

88. Partial function application
var sum = function(a, b) {
return a + b;
};

89. Partial function application
var sum = function(a, b) {
return a + b;
};
var inc = utils.partial(sum, 1);

90. Partial function application
var sum = function(a, b) {
return a + b;
};
var inc = utils.partial(sum, 1);
inc(8); //9

91. Partial function application

92. Partial function application
var times = function(a, b) {
return a * b;
}

93. Partial function application
var times = function(a, b) {
return a * b;
}
var double = utils.partial(times, 2);

94. Partial function application
var times = function(a, b) {
return a * b;
}
var double = utils.partial(times, 2);
double(10); //20

95. Partial function application
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);
};
};

96. Partial function application
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);
};
};
a h
ye
* k
f *

97. Function composition:
Reversing a string

98. Function composition
utils.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, [""]);
};

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

100. Function composition
var reverseStr = utils.comp(utils.split, utils.reverse, utils.join);
reverseStr("leonardo"); //odranoel

101. Function composition
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];
};
};

102. Function composition
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];
};
a h
};
ye
* k
f *

103. Thankfully implements
these - and much more - for us!

104. Bottom line

105. Bottom line
• Embrace JavaScript’s true prototypal nature

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

107. 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

108. 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

109. Thanks!
Questions?
Leonardo Borges
@leonardo_borges
http://www.leonardoborges.com
http://www.thoughtworks.com

110. 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_borges
http://www.leonardoborges.com
http://www.thoughtworks.com