Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Functional Programming using underscore.js
Search
othree
April 20, 2013
Programming
6
1.6k
Functional Programming using underscore.js
othree
April 20, 2013
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
2k
WAT JavaScript Date
othree
3
2k
Modern HTML Email Development
othree
3
2.7k
MRT & GIT
othree
1
2.2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.8k
Web Trends to 2015
othree
4
320
Transducer
othree
9
3k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Programming
See All in Programming
MLH State of the League: 2026 Season
theycallmeswift
0
220
Kiroで始めるAI-DLC
kaonash
2
550
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.8k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
730
機能追加とリーダー業務の類似性
rinchoku
2
1.1k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
14
4.3k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
18
9.4k
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
190
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.5k
速いWebフレームワークを作る
yusukebe
5
1.7k
Swift Updates - Learn Languages 2025
koher
2
450
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
For a Future-Friendly Web
brad_frost
180
9.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
How GitHub (no longer) Works
holman
315
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Optimizing for Happiness
mojombo
379
70k
It's Worth the Effort
3n
187
28k
Transcript
Functional Programming using Underscore.js othree @ OSDC 2013
me • @othree • https://blog.othree.net
me • PhD Candidate • Front End Engineer • On
the way learning good from functional programming languages
Function of Functional Language • Pure function • First class
citizen • Higher order function • ...
Pure Function • Side effect free • Same input, same
output • ex: trigonometric functions
First Class Citizen • Function like variable • ex: function
expression var f = function () { /*...*/ };
Higher Order Function • Function takes or return functions •
ex: event listener
http://www.flickr.com/photos/78428166@N00/6036104277/
Take a Look Examples from ‘Pure, functional JavaScript’ http://cjohansen.no/talks/2012/sdc-functional/
[ { name: 'Gates', gender: 'M', org: 'M$' }, {
name: 'Peter' gender: 'M', org: 'Hㄒㄈ' } ]
"Mentioned by Gates, Peter, Jobs"
var str = "Mentioned by "; for (var i =
0, l = tweeps.length; i < l; ++i) { str += tweeps[i].name; if (i < tweeps.length - 1) { str += ", "; } }
[ { name: 'Gates', gender: 'M', org: 'M$' }, {
name: 'Peter' gender: 'M', org: 'Hㄒㄈ' } ]
[ 'Gates', 'Peter' ]
var names = []; for (var i = 0, l
= tweeps.length; i < l; ++i) { names.push(tweeps[i].name); }
var str = "Mentioned by " + names.join(", ");
var names = tweeps.map(function (tweep) { return tweep.name; });
var names = tweeps.map(function (t) { return t.name; });
var str = "Mentioned by " + tweeps.map(function (t) {
return t.name; }).join(", ");
function prop(name) { return function (object) { return object[name]; };
}
var str = "Mentioned by " + tweeps.map(prop("name")).join(", ");
Case 2
[ { getSummary: function () { return { text: 'Summaries',
html: '<p>Summaries</p>' }; } }, { getSummary: function () { return {text: 'Summaried'}; } }, ... ]
<div> <p>Summaries</p> <p>Summaried</p> <p>Summary</p> </div>
buildSummary: function () { var div = document.createElement("div"), p; for
(var i = 0, l = this.components.length; i < l; ++i) { p = document.createElement("p"); p.innerHTML = this.components[i].getSummary().text; div.appendChild(p); } return div; }
DOM functions
var ul = cull.dom.el("ul"); ul.nodeType === 1 // true https://github.com/culljs/dome/
var ul = cull.dom.el("ul", { className: "bands" }); // var
li = cull.dom.el("li", "Execration"); var ul = cull.dom.el("ul", { className: "bands" }, li);
var ul = cull.partial(cull.dom.el, "ul"); var li = cull.partial(cull.dom.el, "li");
["a", "br", "code", "div", ...].forEach(function (tagName) { cull.dom.el[tagName] = cull.partial(cull.dom.el,
tagName); }); // ["a", "br", "code", "div", ...].forEach(function (tagName) { root[tagName] = cull.partial(cull.dom.el, tagName); });
http://www.flickr.com/photos/jackhynes/519904699/
buildSummary: function () { return div(this.components.map(function (component) { return p(component.getSummary().text);
})); }
buildSummary: function () { return div(this.components.map(function (component) { return p(component.getSummary().text);
})); } 1
buildSummary: function () { return div(this.components.map(function (component) { return p(component.getSummary().text);
})); } 1 2
buildSummary: function () { return div(this.components.map(function (component) { return p(component.getSummary().text);
})); } 1 2 3
buildSummary: function () { return div(this.components. map(function (component) { return
component.getSummary(); }).map(function (summary) { return summary.text; }).map(function (text) { return p(text); })); }
function func(name) { return function (object) { return object[name](); };
}
buildSummary: function () { return div(this.components. map(func("getSummary")). map(function (summary) {
return summary.text; }).map(function (text) { return p(text); })); }
buildSummary: function () { return div(this.components. map(func("getSummary")). map(prop("text")). map(function (text)
{ return p(text); })); }
buildSummary: function () { return div(this.components. map(func("getSummary")). map(prop("text")). map(p)); }
var summarize = compose([p, prop("text"), func("getSummary")]);
var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize
= compose([p, getText, callGetSummary]); // summarize(obj); // => callGetSummary(obj) // => getText(callGetSummary(obj)) // => p(getText(callGetSummary(obj)))
buildSummary: function () { var summarize = compose([p, prop("text"), func("getSummary")]);
return div(this.components.map(summarize)); }
var summarize = compose([p, prop("text"), func("getSummary")]); // ... buildSummary: function
() { return div(this.components.map(summarize)); }
http://www.flickr.com/photos/guerson/5630633727/
Functional Programming in JavaScript
Native • forEach • map/reduce • filter
Functional JavaScript • by Oliver Steele at 2007 • First
functional JavaScript Library I know
Underscore.js • by Jeremy Ashkenas from DocumentCloud • “Underscore is
a utility-belt library for JavaScript that provides a lot of the functional programming support”
Lo-Dash • Will talk later
cull.js • by Christian Johansen and Magnar Sveen • “Cull
is a toolbelt for writing functional javascript.” • Used in the examples above https://github.com/culljs/culljs
LiveScript & prelude.ls • by George Zahariev • A new
compile to JavaScript language fork from Coco • Stay in this room until tomorrow, Mindos have a talk about LiveScript
GHCJS • by Hamish Mackenzie, Victor Nazarov, Luite Stegeman •
Haskell to JavaScript compiler
Underscore.js • compose • map/reduce • filter • pluck
var str = "Mentioned by " + tweeps.map(prop("name")).join(", ");
var str = "Mentioned by " + _.reduce( _.map(tweeps, function
(t) { return t.name; }), function (memo, name, i) { return (i == 0) ? name : memo + ', ' + name; }, '' );
var str = "Mentioned by " + _(tweeps) .chain() .map(function
(t) { return t.name; }) .reduce(function (memo, name, i) { return (i == 0) ? name : memo + ', ' + name; }, '') .value();
var str = "Mentioned by " + _(tweeps) .map(function (t)
{ return t.name; }) .join(', ');
var str = "Mentioned by " + _(tweeps).pluck('name').join(', ');
Still Not Enough • curry, partial • prop, func from
above example
Lo-Dash
Functional Programming using Underscore.js othree @ OSDC 2013.1
Functional Programming using Underscore.js Lo-Dash othree @ OSDC 2013.1
-
@
@ -
@ -
What is Lo-Dash • Underscore.js fork by John-David Dalton, Kit
Cambridge, and Mathias Bynens
Difference • Better performance • Robust result • Larger file
size • AMD supports • Auto chain • More power: cloneDeep, partial, result...
_.partial var greet = function(greeting, name) { return greeting +
' ' + name; }; var hi = _.partial(greet, 'hi'); hi('moe'); // ! 'hi moe' http://lodash.com/docs#partial
_.result var object = { 'cheese': 'crumpets', 'stuff': function ()
{ return 'nonsense'; } }; _.result(object, 'cheese'); // ! 'crumpets' _.result(object, 'stuff'); // ! 'nonsense' http://lodash.com/docs#result
With Lo-Dash
var summarize = compose([p, prop("text"), func("getSummary")]); // ... buildSummary: function
() { return div(map(summarize), this.components); }
var summarize = _.compose( p, _.partialRight(_.result, 'name'), _.partialRight(_.result, 'getSummary') );
// ... buildSummary: function () { return div(_.map(this.components, summarize)); }
Performance?
Bad..
http://jsperf.com/for-vs-foreach/71
http://jsperf.com/for-vs-foreach/71
• Take benefits from functional programming • Not change everything
to functional • Library helps, ex: lo-dash
References Further Readings
http://interglacial.com/hoj/hoj.html
http://cjohansen.no/talks/2012/sdc-functional/
http://kitcambridge.be/blog/say-hello-to-lo-dash/
http://www.slideshare.net/ihower/fp-osdc2012v2
http://shop.oreilly.com/product/9781593272821.do
http://shop.oreilly.com/product/0636920028857.do
http://shop.oreilly.com/product/0636920028857.do N ot Yet Released
Questions? http://www.flickr.com/photos/roman/5610736/