Functional Programming In JS

Pages 37
Views 27
of 37
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Description
1. Damian Łabas Frontend Developer Functional Programming in JS Numer telefonu: +48 788 266 229 Adres e-mail: damian.labas@codibly.com Meetup: JS dla zaawansowanych! 2.…
Transcript
  • 1. Damian Łabas Frontend Developer Functional Programming in JS Numer telefonu: +48 788 266 229 Adres e-mail: damian.labas@codibly.com Meetup: JS dla zaawansowanych!
  • 2. Autor: Damian Łabas Functional Programming in JS www.codibly.com
  • 3. JavaScript Procedural Programming Object-Oriented Programming Functional Programming
  • 4. 4 What is Functional Programming?
  • 5. Imperative vs Declarative In Imperative Programming, you write down how to do it. In Declarative Programming, you write down what to do it.
  • 6. 6
  • 7. What is in JS? • First class functions • Anonymous functions • Closures www.codibly.com
  • 8. What is missing in JS? • Recursion • Immutability • Purity www.codibly.com
  • 9. 9
  • 10. First class function • They can by passed around • They can be assigned to variables • They can be stored in more complex data structure, like array or objects www.codibly.com
  • 11. 11 Closures
  • 12. Closures - example www.codibly.com function grandParent (g1, g2) { const g3 = 3; return function parent (p1, p2) { const p3 = 33; return function child(c1, c2) { const c3 = 333; return g1 + g2 + g3 + p1 + p2 + p3 + c1 + c2 + c3 } } }
  • 13. Closures - usage www.codibly.com const parentFunc = grandParent(1, 2); // return parent() const childFunc = parentFunc(11, 22); // return child() console.log(childFunc(111, 222)); // return 738
  • 14. 14 Recursion
  • 15. Purity
  • 16. Pure function - examples www.codibly.com function coin () { return Math.random() < 0.5 ? 'heads' : 'tails' } let firstName = 'Damian'; function uppercaseName (lastName) { return `${firstName.toUpperCase()} ${lastName.toUpperCase()}` } function calculatePrice (unitPrce, noOfUnits, couponValue = 0) { return unitPrce * noOfUnits - couponValue; }
  • 17. 17 Why pure function are better than impure?
  • 18. Advantages of pure functions • They are easier to read • They are easier to test • They can by more performant www.codibly.com
  • 19. 19
  • 20. 20
  • 21. Side Effects • Modifying any external variable or object property • Logging to the console • Writing to file • Call to API www.codibly.com
  • 22. 22 Immutability
  • 23. Immutability in JS www.codibly.com const freezeObject = Object.freeze({ foo: 'Hello', bar: 'world', baz: '!' }); const freezeObject = Object.freeze({ foo: { greeting: 'Hello' }, bar: 'world', baz: '!' });
  • 24. 24 Higher-order Functions Higher-order Functions either take functions as parameters, return functions or both
  • 25. Higher-order Function • Abstract or isolate actions • Async flow control using callback functions • Promises • Create utilities which can act on a wide variety of data types www.codibly.com
  • 26. Higher-order Function - own map implementation www.codibly.com const arr1 = [1, 2, 3]; function mapForEach (arr, fn) { const newArray = []; for (let i = 0; i < arr.length; i++) { newArray.push(fn(arr[i])) } return newArray; } const result = mapForEach(arr1,function (item) { return item * 2 });
  • 27. 27 Function composition
  • 28. Function composition - example www.codibly.com const users = [ {name: 'Damian', age: 23}, {name: 'Andrzej', age: 14}, {name: 'Dominika', age: 18} ]; const filter = (fn, arr) => arr.filter(fn); const map = (fn, arr) => arr.map(fn); map(user => user.name, filter(user => user.age >= 18)); // ['Damian, 'Dominika']
  • 29. Higher-order function - compose and pipe www.codibly.com const compose = (...functions) => data => functions.reduceRight((value, fn) => fn(value), data); const pipe = (...functions) => data => functions.reduce((value, fn) => fn(value), data);
  • 30. 30 Currying Currying transforms a function into a sequence of functions each taking a single argument of the function
  • 31. Currying - example www.codibly.com function multiply (a, b, c) { return a * b * c } function multiply (a) { return function (b) { return function (c) { return a * b * c; } } }
  • 32. What is a partial application or partial application function
  • 33. 33 What is a difference?
  • 34. Is currying useful?
  • 35. Partial application and currying - example www.codibly.com function discount (price, discount) { return price * discount } function discount (discount) { return function (price) { return price * discount; } } const tenPercentDiscunt = discount(0.1);
  • 36. 36 Questions?
  • 37. Thank you for your time! www.codibly.com /in/codibly /codibly /codibly /codibly
  • Advertisements
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x