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.5k
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
1.7k
WAT JavaScript Date
othree
3
1.8k
Modern HTML Email Development
othree
3
2.5k
MRT & GIT
othree
1
1.9k
YAJS.vim and Vim Syntax Highlight
othree
1
2.5k
Web Trends to 2015
othree
4
300
Transducer
othree
9
2.7k
HITCON 11 Photographer
othree
4
460
fetch is the new XHR
othree
6
3.4k
Other Decks in Programming
See All in Programming
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
最近追加した型の紹介とその振り返り
aki19035vc
0
180
CSC307 Lecture 09
javiergs
PRO
1
500
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
CSC307 Lecture 12
javiergs
PRO
0
220
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
リハビリmruby
kishima
1
160
Terraformテスト入門
msato
0
540
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
4
590
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Side Projects
sachag
451
42k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Facilitating Awesome Meetings
lara
46
5.8k
What's in a price? How to price your products and services
michaelherold
239
11k
Docker and Python
trallard
37
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
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/