Intro Functional Programming in JavaScript

Transcript

1. Afu Tseng (曾坤福) PIXNET 技術研發部前端組 Intro Functional Programming in JavaScript 倫敦會議室∘2015.08.28
2. 什麼是 function ?
3. 'VODUJPO
   G *OQVU
   Y 0VUQVU
   G Y f (x) = x + 3 g (x) = x2 IUUQTXXXqJDLSDPNQIPUPTKFUPX
4. 什麼是 Functional Programming ?
5. 根據 Wikipedia 記載... • In computer science, functional programming is a programming paradigm—a style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. It is a declarative programming paradigm, which means programming is done with expressions.
6. 簡⽽而⾔言之，函數式程式設計： • 強調執⾏行結果的程式設計典範，避免改變狀態 值 (state) 與可變物件 (mutable object)
7. 幾個⼊入⾨門的核⼼心概念 • Declarative (vs. Imperative) • First Class Functions • Higher Order Functions • Composition • Closures • Recursion • Immutability
8. 篇幅有限，有機會再討論 • Declarative (vs. Imperative) • First Class Functions • Higher Order Functions • Composition • Closures • Recursion # 遞迴只應天上有，凡⼈人該當⽤用迴圈? • Immutability
9. Declarative vs. Imperative
10. Imperative (指令式) • 隨處可⾒見的程式設計典範 (Programming paradigm) • 告訴電腦如何實現⼯工作 • 演算法是⼀一系列的步驟、指令 • 資料/物件通常是可變的 (Mutable) • C, C++, Java, PHP, Python, Perl, Ruby…
11. Imperative 範例 // 蒐集每篇⽂文章的標題 var titles = []; for (i = 0; i < articles.length; i++) { titles.push(articles[i].title); }
12. Declarative (宣告式) ! • 告訴電腦⺫⽬目標，⽽而⾮非描述流程 • 演算法是多個函數的結合 (Compositions) • 不可變的資料 (Immutable data) • 最⼩小的副作⽤用 (Minimal side-effects) • Haskell, SQL, HTML, Clojure, DSLs
13. Declarative 範例 // 蒐集每篇⽂文章的標題 var titles = articles.map( function (article) { return article.title; } );
14. First Class Functions ⼀一級函數
15. ⼀一級函數常⾒見特性
 可以被指派到變數 var say = alert; say(‘Hello!’); say === alert; // true
16. ⼀一級函數常⾒見特性
 可以存到陣列 function circleArea(r) { return Math.PI * r * r; } ! function rectangleArea(l, w) { return l * w; } ! var areaFuncs = [circleArea, rectangleArea];
17. ⼀一級函數常⾒見特性
 可以存到物件欄位 function listArticles() {} // … var blogController = { read: listArticles, create: createArticle, update: updateArticle, delete: deleteArticle }; console.log(blogController.read === listArticles); // true
18. High Order Functions ⾼高階函數
19. ⾼高階函數 ⾄至少滿⾜足下列⼀一個條件 •函數可以作為引數傳遞給其它函數 •回傳⼀一個函數
20. ⾼高階函數
 作為引數傳遞給其它函數 function doubleMe(n) { return n * 2; } console.log([1, 2, 3].map(doubleMe)); ! // [2, 4, 6]
21. ⾼高階函數
 回傳⼀一個函數 function makeAdder(x) { return function (y) { return x + y; } } var add1 = makeAdder(1); console.log(add1(100)); ! // 101
22. Function Composition 函數的合成使⽤用
23. 合成函數 如管線般的層層傳遞 f (x) = 2 * x g (x) = 3 * x f (g (x)) = (f∘g)(x) = 2(3x) = 6x
24. Function Composition 定義兩個⼩小函數 var toUpperCase = function(x) { return x.toUpperCase(); }; ! var mention = function(x) { return '@' + x; };
25. Function Composition
 定義合成函數 var toUpperCase = function(x) { /* .. */ }; var mention = function(x) { /* .. */ }; ! var compose = function (f, g) { return function (x) { return f(g(x)); } };
26. Function Composition
 callOut(x) = mention(toUpperCase(x)) var toUpperCase = function(x) { return x.toUpperCase(); }; var mention = function(x) { return '@' + x; }; var compose = function (f, g) { return function (x) { return f(g(x)); } }; var callOut = compose(mention, toUpperCase); ! console.log(callOut("PIXNET digital Media”)); // @PIXNET DIGITAL MEDIA
27. Map, Reduce, and Filter 常⾒見的 Compose Function，⽤用來處理集合
28. Map 使⽤用情境
 輸⼊入/輸出之集合⻑⾧長度相同 var double = function (x) { return x * 2; }; ! console.log([1, 2, 3].map(double)); // [2, 4, 6]
29. Filter 使⽤用情境
 輸出的集合⻑⾧長度⽐比輸⼊入的少 var isEven = function (n) { return n % 2 === 0; }; var list = [1, 2, 3, 4, 5, 6]; console.log(list.filter(isEven)); // [2, 4, 6]
30. Reduce 使⽤用情境
 輸⼊入集合，輸出單⼀一值 也被稱作 fold var add = function (prev, current) { return pref + current; }; var list = [1, 2, 3]; console.log(list.reduce(add)); // 6
31. 總結函數程式設計的優勢 • 簡單明瞭 • 更容易解耦合 • 容易做單元測試 • 相對容易除錯
32. References • Functional Programming for Java Developers 讀書摘要, https://ihower.tw/blog/archives/6305 • 當 全世界的語⾔言 都往 Functional Programming 發展, http://www.codedata.com.tw/social-coding/paradigm-shift-to- functional-programming/ • Professor Frisby's Mostly Adequate Guide to Functional Programming, http://drboolean.gitbooks.io/mostly-adequate-guide/ • Functional Programming with JavaScript, https://speakerdeck.com/debjitbis08/functional-programming-with-javascript • Functional Programming in JavaScript, https://speakerdeck.com/anildigital/functional-programming-in-javascript • Functional programming in javascript (intro), https://speakerdeck.com/geekingfrog/functional-programming-in-javascript- intro • CodeStock: Functional Programming Basics in JavaScript, https://speakerdeck.com/jfairbank/codestock-functional- programming-basics-in-javascript • Functional and Reactive Jetpack for Javascript, https://speakerdeck.com/metrofun/functional-and-reactive-jetpack-for- javascript • Composition of Functions https://www.mathsisfun.com/sets/functions-composition.html
33. Q & A @afutseng