Programare funcţională în Javascript            Alexandru Badiu
Conţinut                      Ce este programarea funcţională?                      Funcţii de ordin înalt                ...
Funcţională?                                Ce este programarea funcţională?                      Programarea funcţională ...
Paradigme?                                  Ce este programarea funcţională?                      O paradigmă de programar...
Procedurală                                         Ce este programarea funcţională?                                      ...
OO                                            Ce este programarea funcţională?                                class HelloW...
Logică                                             Ce este programarea funcţională?                                       ...
Funcţională                                          Ce este programarea funcţională?                                     ...
Limbaje ezoterice                                     Ce este programarea funcţională?                                    ...
HTML                                          Ce este programarea funcţională?                                <p>HTML nu e...
Javascript                                  Ce este programarea funcţională?Programare funcțională în Javascript - Alexand...
Definiţie                                   Funcţii de ordin înalt                      Funcţiile sunt de ordin înalt     ...
Exemple                                      Funcţii de ordin înalt                            function say(what) {       ...
Exemple                                                                Funcţii de ordin înalt       var gen_func = functio...
Exemple                                                    Funcţii de ordin înalt                                   var co...
Definiţie                                        Funcţii anonime                      Funcţii fără nume                   ...
Exemple                                                Funcţii anonime                   (function (what) { console.log(wh...
Exemple                                                   Funcţii anonime                           jQuery("div.autoo-more...
Exemple                                                      Funcţii anonime                                 var v = [ 6, ...
Definiţie                                           Funcţii imbricate                      Funcţii definite în interiorul ...
Exemple                                                    Funcţii imbricate                           function imbri(){  ...
Definiţie                                                  Închideri                      În engleză: closures            ...
Exemple                                                            Închideri                   Funcţia întoarsă are acces ...
Exemple                                                                           Închideri                     Acelaşi lu...
Exemple                                                      Închideri                   Mai multe funcţii imbricate au ac...
Gotchas                                                            Închideri                   Ce este afisat?            ...
Gotchas                                                            Închideri                   Ce este afisat?            ...
Gotchas                                                            Închideri                   this nu se comporta ca în a...
Gotchas                                                            Închideri                   Soluţia: copierea lui this ...
Definiţie                                             Currying                      Numit după Haskell Curry              ...
Implementare                                                      Currying                   Varianta simplă              ...
Implementare                                                        Currying                              Function.prototy...
Implementare                                                        Currying                   Uneori este utilă schimbare...
Exemple                                                                     Currying                   function sayHello(m...
Resurse                   http://www.joelonsoftware.com/items/2006/08/01.html                   http://osteele.com/archive...
? Alexandru Badiu i@voidberg.orghttp://voidberg.org
Upcoming SlideShare
Loading in …5
×

Functional programming in java script

1,672 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Functional programming in java script

  1. 1. Programare funcţională în Javascript Alexandru Badiu
  2. 2. Conţinut Ce este programarea funcţională? Funcţii de ordin înalt Funcţii anonime Funcţii imbricate Închideri CurryingProgramare funcțională în Javascript - Alexandru Badiu
  3. 3. Funcţională? Ce este programarea funcţională? Programarea funcţională este o paradigmă de programare Se pune accent pe evaluarea expresiilor şi nu pe execuţia comenzilor Expresiile sunt funcţii Constante vs variabile Lisp, Erlang, Haskell, OCaml Dacă ai scris cod Javascript sau Ruby atunci probabil ai folosit concepte din programarea funcţională fără să ştiiProgramare funcțională în Javascript - Alexandru Badiu
  4. 4. Paradigme? Ce este programarea funcţională? O paradigmă de programare e un stil de a programa Concepte pentru elementele unui program (funcţii, variabile, obiecte etc) Concepte pentru paşii unui calcul (evaluare, atribuire etc) Un limbaj de programare poate oferi suport pentru mai multe paradigmeProgramare funcțională în Javascript - Alexandru Badiu
  5. 5. Procedurală Ce este programarea funcţională? #include <stdio.h> #include <stdlib.h> int main(void) { puts("Hello World!"); return EXIT_SUCCESS; }Programare funcțională în Javascript - Alexandru Badiu
  6. 6. OO Ce este programarea funcţională? class HelloWorld { static public void main( String args[] ) { System.out.println( "Hello World!" ); } }Programare funcțională în Javascript - Alexandru Badiu
  7. 7. Logică Ce este programarea funcţională? ?- write(”Hello World!”), nl.Programare funcțională în Javascript - Alexandru Badiu
  8. 8. Funcţională Ce este programarea funcţională? (alert “Hello World!”)Programare funcțională în Javascript - Alexandru Badiu
  9. 9. Limbaje ezoterice Ce este programarea funcţională? HAI CAN HAS STDIO? VISIBLE "HAI WORLD!" KTHXBYEProgramare funcțională în Javascript - Alexandru Badiu
  10. 10. HTML Ce este programarea funcţională? <p>HTML nu este un limbaj de programare.</p>Programare funcțională în Javascript - Alexandru Badiu
  11. 11. Javascript Ce este programarea funcţională?Programare funcțională în Javascript - Alexandru Badiu
  12. 12. Definiţie Funcţii de ordin înalt Funcţiile sunt de ordin înalt Sunt obiecte Au proprietăţi Pot fi transmise altor funcţii Pot fi întoarse ca rezultat Pot fi create dinamicProgramare funcțională în Javascript - Alexandru Badiu
  13. 13. Exemple Funcţii de ordin înalt function say(what) { console.log(what); } var say = function (what) { console.log(what); } say(hello); // hello var spune = say; spune(salut); // salut say = function (what) { console.log(nu vreau); } spune(ceva); // cevaProgramare funcțională în Javascript - Alexandru Badiu
  14. 14. Exemple Funcţii de ordin înalt var gen_func = function (op) { switch (op) { case +: return function () { var r = arguments[0]; for (var i=1; i<arguments.length; i++ ) r += arguments[i]; return r; } case -: return function () { var r = arguments[0]; for (var i=1; i<arguments.length; i++ ) r -= arguments[i]; return r; } case *: return function () { var r = arguments[0]; for (var i=1; i<arguments.length; i++ ) r *= arguments[i]; return r; } case /: return function () { var r = arguments[0]; for (var i=1; i<arguments.length; i++ ) r /= arguments[i]; return r; } } } var add = gen_func(+); add; // function () { var r = arguments[0]; for (var i = 1; i < arguments.length; i++) { r += arguments[i]; } return r; } add(1,2,3); // 6 var mul = gen_func(*); mul(4,5,6); // 120Programare funcțională în Javascript - Alexandru Badiu
  15. 15. Exemple Funcţii de ordin înalt var compune = function (f, g) { return function (x) { return f(g(x)); } }; var a = function (x) { return x*x; }; var b = function (x) { return x/2; }; var c = compune(a, b); var d = compune(b, a); c(6); // 9 d(6); // 18Programare funcțională în Javascript - Alexandru Badiu
  16. 16. Definiţie Funcţii anonime Funcţii fără nume Folosite atunci când codul trebuie rulat o singură dată Folosite la sortări, căutari Folosite la evenimenteProgramare funcțională în Javascript - Alexandru Badiu
  17. 17. Exemple Funcţii anonime (function (what) { console.log(what)}) (functie anonima); // functie anonima ( function (x) { if (x<2) return x; return x * arguments.callee(x - 1); }) (3); // 6Programare funcțională în Javascript - Alexandru Badiu
  18. 18. Exemple Funcţii anonime jQuery("div.autoo-more a").click(function(event) { mf = jQuery(this).parent().prev(); mf.toggle(); if (mf.css(display) == none) { jQuery(this).html(Mai multe &raquo;); } else { jQuery(this).html(&laquo; Mai putine); } return false; });Programare funcțională în Javascript - Alexandru Badiu
  19. 19. Exemple Funcţii anonime var v = [ 6, 12, 19, 8, 40 ]; v.sort(); // 12,19,40,6,8 v.sort(function (x, y) { return x - y; }); // 6,8,12,19,40 v.sort(function (x, y) { return y - x; }); // 40,19,12,8,6 function Cauta(v, f) { for (var i = 0; i < v.length; i++) if (f(v[i])) { return i; } return -1; } Cauta(v, function (x) { return x > 10; }); // 0 Cauta(v, function (x) { return x < 10; }); // 3Programare funcțională în Javascript - Alexandru Badiu
  20. 20. Definiţie Funcţii imbricate Funcţii definite în interiorul altor funcţii Funcţii anonime Funcţii non-anonimeProgramare funcțională în Javascript - Alexandru Badiu
  21. 21. Exemple Funcţii imbricate function imbri(){ var mesaj = "salut"; function imbri2() { console.log(mesaj); }; imbri2(); }; imbri(); // salut function imbri(mesaj){ ( function () { console.log(mesaj); } ) (mesaj); }; imbri("test"); // testProgramare funcțională în Javascript - Alexandru Badiu
  22. 22. Definiţie Închideri În engleză: closures Funcţiile imbricate au acces la variabilele din funcţia părinte Chiar şi după ce execuţia funcţiei părinte s-a terminat Funcţia = (Funcţia imbricată, Variabile locale) Variabilele nu sunt copiate ci este păstrată o referinţăProgramare funcțională în Javascript - Alexandru Badiu
  23. 23. Exemple Închideri Funcţia întoarsă are acces la variabila msg function say(what) { var msg = "Mesaj: " + what; return function () { console.log(msg); }; } say(unu)(); // Mesaj: unu say(doi)(); // Mesaj: doi function say(what) { var ret = function () { console.log(msg); }; var msg = "Mesaj: " + what; return ret; } say(unu)(); // Mesaj: unu say(doi)(); // Mesaj: doiProgramare funcțională în Javascript - Alexandru Badiu
  24. 24. Exemple Închideri Acelaşi lucru este valabil şi pentru funcţii declanşate de evenimente function sendRequest(url,callback,postData) { var req = createXMLHTTPObject(); if (!req) { return; } var method = (postData) ? "POST" : "GET"; req.open(method,url,true); req.setRequestHeader(User-Agent,XMLHTTP/1.0); if (postData) { req.setRequestHeader(Content-type,application/x-www-form-urlencoded); } req.onreadystatechange = function () { if (req.readyState != 4) return; if (req.status != 200 && req.status != 304) { alert(HTTP error + req.status); return; } callback(req); } if (req.readyState == 4) return; req.send(postData); }Programare funcțională în Javascript - Alexandru Badiu
  25. 25. Exemple Închideri Mai multe funcţii imbricate au acces la aceeaşi închidere function setup() { var num = 21; afiseaza = function () { console.log(num); } incrementeaza = function () { num++; } } setup(); afiseaza(); // 21 incrementeaza(); afiseaza(); // 22 setup(); afiseaza(); // 21Programare funcțională în Javascript - Alexandru Badiu
  26. 26. Gotchas Închideri Ce este afisat? function pregateste_functii(num) { var res = []; for (var i=0; i<num; i++) { res.push(function () { console.log(i); }); } return res; } var funcs = pregateste_functii(4); for (var i=0; i<funcs.length; i++) { funcs[i](); }Programare funcțională în Javascript - Alexandru Badiu
  27. 27. Gotchas Închideri Ce este afisat? function pregateste_functii(num) { var res = []; for (var i=0; i<num; i++) { res.push(function () { console.log(i); }); } return res; } var funcs = pregateste_functii(4); for (var i=0; i<funcs.length; i++) { funcs[i](); } // 4 // 4 // 4 // 4Programare funcțională în Javascript - Alexandru Badiu
  28. 28. Gotchas Închideri this nu se comporta ca în alte limbaje În acest caz this.loaded se referă la ajax_ob.loaded AclinkESM.prototype.loadTemplates = function () { if (this.individual_templates) { this.templates = []; jQuery.ajax({ url: this.config.t_dir + anunt-container.ejs, processData: true, dataType: "text", success: function(data, status){ this.templates[anunt-container.ejs] = data; this.loaded++; } }); this.toload++; ...Programare funcțională în Javascript - Alexandru Badiu
  29. 29. Gotchas Închideri Soluţia: copierea lui this în altă variabilă, tipic that sau self AclinkESM.prototype.loadTemplates = function () { var that = this; if (this.individual_templates) { this.templates = []; jQuery.ajax({ url: this.config.t_dir + anunt-container.ejs, processData: true, dataType: "text", success: function(data, status){ that.templates[anunt-container.ejs] = data; that.loaded++; } }); this.toload++; ...Programare funcțională în Javascript - Alexandru Badiu
  30. 30. Definiţie Currying Numit după Haskell Curry Evaluarea parţială a funcţiilor Modifică scope-ul la rulare Matematic: f (X x Y) -> Z curry(f):X -> (Y -> Z) Non matematic: console.log(aduna(2, 3)); // 5 var aduna4 = aduna(4); console.log(aduna4(10)); // 14Programare funcțională în Javascript - Alexandru Badiu
  31. 31. Implementare Currying Varianta simplă function aduna(a) { return function (b) { return a + b; }; } var aduna4 = aduna(4); var aduna10 = aduna(10); aduna4(5); // 9 aduna10(5); // 15 Ideal ar fi să putem aplica procedeul la orice funcţie, fără să o modificăm function aduna(a, b) { return a + b; } var aduna4 = aduna.curry(4);Programare funcțională în Javascript - Alexandru Badiu
  32. 32. Implementare Currying Function.prototype.curry = function() { var fn = this, args = []; for (var i = 0; i < arguments.length; i++) args.push(arguments[i]); return function() { for (var i = 0; i < arguments.length; i++) args.push(arguments[i]); return fn.apply(window, args); }; }; function aduna(a, b) { return a + b; } a = aduna.curry(5); b = aduna.curry(10); a(10); // 15 b(10); // 20Programare funcțională în Javascript - Alexandru Badiu
  33. 33. Implementare Currying Uneori este utilă schimbarea scope-ului bind din Prototype, dojo.lang.curry Function.prototype.curry = function(scope) { var fn = this, args = []; var scope = scope || window; for (var i = 1; i < arguments.length; i++) args.push(arguments[i]); return function() { for (var i = 0; i < arguments.length; i++) args.push(arguments[i]); return fn.apply(scope, args); }; };Programare funcțională în Javascript - Alexandru Badiu
  34. 34. Exemple Currying function sayHello(msg) { console.log(msg + n You clicked on + this.id); } var el1 = document.getElementById(element1); var el2 = document.getElementById(element2); el1.addEventListener(click, sayHello.curry(el1, Hello), false); el2.addEventListener(click, sayHello.curry(el2, Salut), false); function update(elem, data) { $(elem).html(data); } $.get("foo.php", update.curry(window, elem1)); $.get("bar.php", update.curry(window, elem2)); function update(data) { $(this).html(data); } $.get("foo.php", update.curry($(elem1))); $.get("bar.php", update.curry($(elem2)));Programare funcțională în Javascript - Alexandru Badiu
  35. 35. Resurse http://www.joelonsoftware.com/items/2006/08/01.html http://osteele.com/archives/2007/07/functional-javascript http://invisibleblocks.wordpress.com/2007/02/23/functional- programming-in-javascript-and-ruby/Programare funcțională în Javascript - Alexandru Badiu
  36. 36. ? Alexandru Badiu i@voidberg.orghttp://voidberg.org

×