Download to read offline
![This is bad...var sortedString = function(array) {array.sort();
!return array.join();};!var array1 = [1, 6, 8, 4, 9, 0, 3, 5, 2, 7];
!console.log(sortedString(array1));
//=>0,1,2,3,4,5,6,7,8,9
!console.log(array1);
//=>[0,1,2,3,4,5,6,7,8,9]//引数が変更されてしまっている…。](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-24-2048.jpg&f=jpg&w=240)
![This is better !!!var sortedString = function(array) {var buffer = array.slice();buffer.sort();return buffer.join();};!var array1 = [1, 6, 8, 4, 9, 0, 3, 5, 2, 7];!console.log(sortedString(array1));
//=>0,1,2,3,4,5,6,7,8,9
!console.log(array1);
//=>[1,6,8,4,9,0,3,5,2,7]//OK!](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-25-2048.jpg&f=jpg&w=240)
![jQueryっぽいサンプル実装var $ = function(selector) {return {list: document.querySelectorAll(selector),each: function(callback) {for(var i = 0, l = this.list.length;i < l;i++) {callback(this.list[i]);}return this;},addClass: function(className) {return this.each(function(element) {element.classList.add(className);});}};};](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-30-2048.jpg&f=jpg&w=240)
![Functionalに書き直すvar _ = {};!_.qsa = function(selector) {return document.querySelectorAll(selector);};!_.each = function(targetObject, callback) {for(var i = 0, len = targetObject.length;i < len;i++) {callback(targetObject[i]);}};!_.addClass = function(targetElementList, className) {_.each(targetElementList, function(element) {element.classList.add(className);});};](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-33-2048.jpg&f=jpg&w=240)
![_.each = _.forEach = function(obj, iterator, context) {if (obj == null) return;if (nativeForEach && obj.forEach === nativeForEach) {obj.forEach(iterator, context);} else if (obj.length === +obj.length) {for (var i = 0, l = obj.length; i < l; i++) {if (iterator.call(context, obj[i], i, obj) ===breaker) return;}} else {for (var key in obj) {if (_.has(obj, key)) {if (iterator.call(context, obj[key], key,obj) === breaker) return;}}}};](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-58-2048.jpg&f=jpg&w=240)
![_.each = _.forEach = function(obj, iterator, context) {if (obj == null) return;if (nativeForEach && obj.forEach === nativeForEach) {obj.forEach(iterator, context);} else if (obj.length === +obj.length) {for (var i = 0, l = obj.length; i < l; i++) {if (iterator.call(context, obj[i], i, obj) ===breaker) return;}} else {for (var key in obj) {if (_.has(obj, key)) {if (iterator.call(context, obj[key], key,obj) === breaker) return;}}}};](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-59-2048.jpg&f=jpg&w=240)
![_.each = _.forEach = function(obj, iterator, context) {if (obj == null) return;if (nativeForEach && obj.forEach === nativeForEach) {obj.forEach(iterator, context);} else if (obj.length === +obj.length) {for (var i = 0, l = obj.length; i < l; i++) {if (iterator.call(context, obj[i], i, obj) ===breaker) return;}} else {for (var key in obj) {if (_.has(obj, key)) {if (iterator.call(context, obj[key], key,obj) === breaker) return;}}}};ネイティブのforEachが使える場合はそれを実行している](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-60-2048.jpg&f=jpg&w=240)
![function forEach(collection, callback, thisArg) {var index = -1,length = collection ? collection.length : 0;callback = callback && typeof thisArg == 'undefined' ?callback : lodash.createCallback(callback, thisArg);if (typeof length == 'number') {while (++index < length) {if (callback(collection[index], index,collection) === false) {break;}}} else {forOwn(collection, callback);}return collection;}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-62-2048.jpg&f=jpg&w=240)
![function forEach(collection, callback, thisArg) {var index = -1,length = collection ? collection.length : 0;callback = callback && typeof thisArg == 'undefined' ?callback : lodash.createCallback(callback, thisArg);if (typeof length == 'number') {while (++index < length) {if (callback(collection[index], index,collection) === false) {break;}}} else {forOwn(collection, callback);}return collection;}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-63-2048.jpg&f=jpg&w=240)
![function forEach(collection, callback, thisArg) {var index = -1,length = collection ? collection.length : 0;callback = callback && typeof thisArg == 'undefined' ?callback : lodash.createCallback(callback, thisArg);if (typeof length == 'number') {while (++index < length) {if (callback(collection[index], index,collection) === false) {break;}}} else {forOwn(collection, callback);}return collection;}基本的にwhile文を使っている](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-64-2048.jpg&f=jpg&w=240)
![var stooges = [
{name : 'moe', age : 40},
{name : 'larry', age : 50},
{name : 'curly', age : 60}
];
!_.pluck(stooges, 'name');//=> ["moe", "larry", "curly"]](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-76-2048.jpg&f=jpg&w=240)
![_.pluck = function(obj, key) {return _.map(obj, function(value){
return value[key];
});};](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-77-2048.jpg&f=jpg&w=240)
![_.compose = function(/*, funs */) {var functions = arguments;return function() {var args = arguments;for (var i = functions.length - 1; i >= 0; i--) {args = [functions[i].apply(this, args)];}return args[0];};};](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffunctional-javascript-140513214923-phpapp01%2f75%2fFunctional-JavaScript-with-Lo-Dash-js-79-2048.jpg&f=jpg&w=240)
Uploaded byShogo Sensui
2,149 views
Functional JavaScript with Lo-Dash.js
2013/5/25に開催されたFrontrend Vol.5のFunctional JavaScript with Lo-Dash.jsのセッションの資料です。
Recommended
More Related Content
What's hot
Similar to Functional JavaScript with Lo-Dash.js
More from Shogo Sensui
Functional JavaScript with Lo-Dash.js
- 2.Functional JavaScriptwith Lo-Dash.jsFrontrendVol.5泉水翔吾 / @1000chCyberAgent, Inc.
- 3.
- 4.Output! http://1000ch.net" @1000ch#http://github.com/1000ch# http://github.com/enja-oss
- 5.Agenda! Object-Oriented &Functional! Underscore.js & Lo-Dash.js! Conclusion!
- 6.
- 7.
- 8.Functional Programming! 『数学的な関数の評価を行い、状態やデータの変更を行わないプログラミングパラダイム』 viaWikipedia! 関数型と言われてもイメージしにくい…。
- 9.押し寄せるFunctional! HaskellとかClojureとか。! TwitterはScalaを採用。!JavaScriptもFunctional？
- 10.
- 11.
- 12.Object-OrientedProgramming! 『オブジェクト同士の相互作用として、システムの振る舞いを捉える考え方』 viaWikipedia! つまり『プログラムで実現したいモデルを抽象化したもの』である。
- 13.
- 14.猫をOOPで表現するvar Animal =function(word) {this.word = word;};Animal.prototype.cry = function() {console.log(this.word);};!var Cat = function() {Animal.call(this, "Nya-");};Cat.prototype = Object.create(Animal.prototype);Cat.prototype.constructor = Animal;!new Cat().cry();//=>Nya-
- 15.jQueryもOOP?var $headline =$(".headline");$headline.css({"font-size": "24px"});var $paragraph = $("p");$paragraph.css({"background": "#000","color": "#fff"}).addClass("breakAll");!var $button = $("button");$button.on("click", function() {console.log("button is clicked!");});
- 16.
- 17.! オブジェクト同士の関係が密になりがち! 役割が大きくなりすぎてクラスが複雑になりがち!継承されすぎて変更できなくなりがちOOPが抱えがちな問題
- 18.œš‘“›⁸コードの役割分担が複雑で、コードの役割が密接な関係を持っているとテストを行うことが難しくなる。’”⁹- @cssradar at FrontrendVol.4https://speakerdeck.com/studiomohawk/testable-javascript
- 19.
- 20.
- 21.
- 22.Funtional Function! 引数が同じであれば出力も同じである!果たす役割が簡潔で分割されていること
- 23.Funtional Function! 引数が同じであれば出力も同じである!果たす役割が簡潔で分割されていること
- 24.This is bad...varsortedString = function(array) {array.sort(); !return array.join();};!var array1 = [1, 6, 8, 4, 9, 0, 3, 5, 2, 7]; !console.log(sortedString(array1)); //=>0,1,2,3,4,5,6,7,8,9 !console.log(array1); //=>[0,1,2,3,4,5,6,7,8,9]//引数が変更されてしまっている…。
- 25.This is better!!!var sortedString = function(array) {var buffer = array.slice();buffer.sort();return buffer.join();};!var array1 = [1, 6, 8, 4, 9, 0, 3, 5, 2, 7];!console.log(sortedString(array1)); //=>0,1,2,3,4,5,6,7,8,9 !console.log(array1); //=>[1,6,8,4,9,0,3,5,2,7]//OK!
- 26.Funtional Function! 引数が同じであれば出力も同じである!果たす役割が簡潔で分割されていること
- 27.This is bad...varsetElement = function() {$(".hoge").addClass("decorationClass").animate({...});};var initMainPage = function() {window.scrollTo(1, 0);setElement();};window.onload = function() {initMainPage();};
- 28.This is better!!!var setElement = function(element) {$(element).addClass("decorationClass").animate({...});};var hideAddressBar = function() {window.scrollTo(1, 0);};window.onload = function() {hideAddressBar();setElement(document.getElementsByClassName(".hoge"));};
- 29.
- 30.jQueryっぽいサンプル実装var $ =function(selector) {return {list: document.querySelectorAll(selector),each: function(callback) {for(var i = 0, l = this.list.length;i < l;i++) {callback(this.list[i]);}return this;},addClass: function(className) {return this.each(function(element) {element.classList.add(className);});}};};
- 31.
- 32.この実装の問題点! each()もaddClass()もコンストラクタのquerySelectorAllに依存している。! 再利用出来ない。!クラスを拡張するたびにテストの見直し。
- 33.Functionalに書き直すvar _ ={};!_.qsa = function(selector) {return document.querySelectorAll(selector);};!_.each = function(targetObject, callback) {for(var i = 0, len = targetObject.length;i < len;i++) {callback(targetObject[i]);}};!_.addClass = function(targetElementList, className) {_.each(targetElementList, function(element) {element.classList.add(className);});};
- 34.使い方イメージ//CSSセレクタを渡し、要素を選択する。var elementList =_.qsa(".parentClass .childClass");!! //取得した要素にクラスを追加する。_.addClass(elementList, "hoge");
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.- John-David Dalton atStackOverflowœš‘“›⁸better overall performance andoptimizations for large arrays/objectiteration, and more flexibility withcustom builds and template pre-compilation utilities.’”⁹http://stackoverflow.com/questions/13789618/differences-between-lodash-and-underscore
- 51.
- 52.! 実行パフォーマンスが良い! 問題が色々解決されています!カスタムビルドできます! Underscore.jsに互換性あります
- 53.
- 54.Compare Performance(1)Underscore#forEachNative#forEachLo-Dash#forEach withbindLo-Dash#forEachNative#for0 1250000 2500000 3750000 5000000
- 55.
- 56.
- 57.
- 58._.each = _.forEach= function(obj, iterator, context) {if (obj == null) return;if (nativeForEach && obj.forEach === nativeForEach) {obj.forEach(iterator, context);} else if (obj.length === +obj.length) {for (var i = 0, l = obj.length; i < l; i++) {if (iterator.call(context, obj[i], i, obj) ===breaker) return;}} else {for (var key in obj) {if (_.has(obj, key)) {if (iterator.call(context, obj[key], key,obj) === breaker) return;}}}};
- 59._.each = _.forEach= function(obj, iterator, context) {if (obj == null) return;if (nativeForEach && obj.forEach === nativeForEach) {obj.forEach(iterator, context);} else if (obj.length === +obj.length) {for (var i = 0, l = obj.length; i < l; i++) {if (iterator.call(context, obj[i], i, obj) ===breaker) return;}} else {for (var key in obj) {if (_.has(obj, key)) {if (iterator.call(context, obj[key], key,obj) === breaker) return;}}}};
- 60._.each = _.forEach= function(obj, iterator, context) {if (obj == null) return;if (nativeForEach && obj.forEach === nativeForEach) {obj.forEach(iterator, context);} else if (obj.length === +obj.length) {for (var i = 0, l = obj.length; i < l; i++) {if (iterator.call(context, obj[i], i, obj) ===breaker) return;}} else {for (var key in obj) {if (_.has(obj, key)) {if (iterator.call(context, obj[key], key,obj) === breaker) return;}}}};ネイティブのforEachが使える場合はそれを実行している
- 61.
- 62.function forEach(collection, callback,thisArg) {var index = -1,length = collection ? collection.length : 0;callback = callback && typeof thisArg == 'undefined' ?callback : lodash.createCallback(callback, thisArg);if (typeof length == 'number') {while (++index < length) {if (callback(collection[index], index,collection) === false) {break;}}} else {forOwn(collection, callback);}return collection;}
- 63.function forEach(collection, callback,thisArg) {var index = -1,length = collection ? collection.length : 0;callback = callback && typeof thisArg == 'undefined' ?callback : lodash.createCallback(callback, thisArg);if (typeof length == 'number') {while (++index < length) {if (callback(collection[index], index,collection) === false) {break;}}} else {forOwn(collection, callback);}return collection;}
- 64.function forEach(collection, callback,thisArg) {var index = -1,length = collection ? collection.length : 0;callback = callback && typeof thisArg == 'undefined' ?callback : lodash.createCallback(callback, thisArg);if (typeof length == 'number') {while (++index < length) {if (callback(collection[index], index,collection) === false) {break;}}} else {forOwn(collection, callback);}return collection;}基本的にwhile文を使っている
- 65.Compare Performance(2)Underscore#forEach ArrayUnderscore#forEachObjectLo-Dash#forEach ObjectLo-Dash#forEach Array0 550000 1100000 1650000 2200000
- 66.Compare Performance(2)Underscore#forEach ArrayUnderscore#forEachObjectLo-Dash#forEach ObjectLo-Dash#forEach Array0 550000 1100000 1650000 2200000for文とArray.forEachの 差が出てる
- 67.Compare Performance(2)Underscore#forEach ArrayUnderscore#forEachObjectLo-Dash#forEach ObjectLo-Dash#forEach Array0 550000 1100000 1650000 2200000while文なのでほとんど 差が出ていない
- 68.
- 69.Modern build モダンブラウザ向けのビルド。Legacybuild レガシーブラウザ対応がなされている。Mobile build 関数のコンパイルがされていないStrict build読み取り専用プロパティを上書きしようとしたときにエラーを投げる。Underscore build Underscore.jsにAPIを合わせてある。Backbone build Backbone.jsに必要なAPIのみ備える。
- 70.Modern build モダンブラウザ向けのビルド。Legacybuild レガシーブラウザ対応がなされている。Mobile build 関数のコンパイルがされていないStrict build読み取り専用プロパティを上書きしようとしたときにエラーを投げる。Underscore build Underscore.jsにAPIを合わせてある。Backbone build Backbone.jsに必要なAPIのみ備える。
- 71.Compare File Sizelodash.min.jslodash.underscore.min.jsunderscore.min.js05500 11000 16500 22000compressed gzipped
- 72.Compare File Sizelodash.min.jslodash.underscore.min.jsunderscore.min.js05500 11000 16500 22000compressed gzippedgzipすればさほど変わらない！（7,701bytes）
- 73.
- 74.
- 75.
- 76.var stooges =[ {name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60} ]; !_.pluck(stooges, 'name');//=> ["moe", "larry", "curly"]
- 77._.pluck = function(obj,key) {return _.map(obj, function(value){ return value[key]; });};
- 78.
- 79._.compose = function(/*,funs */) {var functions = arguments;return function() {var args = arguments;for (var i = functions.length - 1; i >= 0; i--) {args = [functions[i].apply(this, args)];}return args[0];};};
- 80.var plusFive =function(num) {return num + 5;};var multiplyThree = function(num) {return num * 3;};var plus5_multiply3 = _.compose(multiplyThree, plusFive);plus5_multiply3(4);//=>27
- 81.
- 82.
- 83._.pipeline = function(/*,funs */){ var functions = arguments; !return function(seed) {return _.reduce(functions, function(l, r) {return r(l);}, seed);};};
- 84.var plusFive =function(num) {return num + 5;};var multiplyThree = function(num) {return num * 3;};var multiply3_plus5 = _.pipeline(multiplyThree, plusFive);multiply3_plus5(4);//=>17
- 85.
- 86.function square(x) { returnx * x; }function inc(x) { return x + 1; }function isEven(x) { return x % 2 === 0; }!var result = _.chain(array) .map(square).map(inc) .filter(isEven).take(5).value(); !var result = Lazy(array) .map(square).map(inc) .filter(isEven).take(5);
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.特徴! 要素選択API! イベントのバインドAPI!CSSクラスの付け外しAPI! 軽い(minifiedで3KBくらい)
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.