Functional Programming Javascript

Basic Concept of Functional Programming in Javascript. Presented on MedanJS Meetup by Sastra Nababan

Transcript

1. Functional Programming SASTRA NABABAN @sastranababan
2. –Eric Elliott 
 Author of Programming Javascript Applications “JavaScript is one of the most important programming languages of all time, not simply because of its popularity, but because it popularized two features which are extremely important for the evolution of programming: Prototypal Inheritance & Functional Programming ”
3. What is Functional Programming ? functional programming is a programming paradigm. a style of building the structure and elements of computer programs paradigm, style, mindset, the way of thinking, technique Keywords :
4. History First introduced in the 1930s by mathematician Alonzo Church λ (lambda) calculus as a basis for functional programming. Alonzo Church + American Mathematician (June 14, 1903 – August 11, 1995)
5. List of Major Programming Paradigms • Imperative / Procedural • Declarative • Object Oriented • Functional http://cs.lmu.edu/~ray/notes/paradigms/
6. Why is Functional Programming ? Less Bugs Less Time, re-use more code More readeable code More performance
7. “ do everything in function “
9. Functional Programming Concept ๏ Declarative ๏ Pure Functions ๏ No Looping ๏ First-class objects ๏ High-order Functions ๏ Map, Reduce, Filter
10. Imperative vs Declarative How What Characteristic Imperative Declarative Programming Style Step by Step Define Problem & Transformation State Change Important Non-existent Order Of Execution Important Not as Important Flow Control Loop, Conditional Recursion
11. Example #1 double all the numbers in an array Declarative Imperative
12. Example #2 SQL query is declarative, what if write on imperative style ? Imperative Declarative
13. “ do everything in function I mean pure function “
14. Pure Function A pure function doesn’t depend on and doesn’t modify the states of variables out of its scope. Pilar of Functional Programming
15. • Always have input and return output ( value ) • No side effects • Given the same input, will always return the same output. • Relies on no external mutable state. Rule of Pure Function : impure function : function add(x,y){ var z = x + y } pure function : function add(x,y){ return x + y }
16. Impure Function Pure Function
17. “ No Loop in Functional Programing “
18. Use recursion baby !!!!
19. Let's see how it works
20. Impure Function Pure Function
21. First-class objects In JavaScript functions are first-class. This mean function can : • store the function in a variable • have properties • pass the function as a parameter to another function • return the function from a function
22. Store Function in Variable Have Properties & Method
23. High-order Function Function that operates on other functions. Takes functions as inputs and/or returns them as outputs. Function that create and return new function : When to use High-Order Function : • Asynchronous execution (Node.js, ajax) • Event Listeners/Handlers (jquery dll) • setTimeout and setInterval methods
24. Map, Filter, Reduce Map Filter Reduce transform each of them Filter out certain item compute to new value we never manipulate the original array
25. Map array.map(function(elem, index, array) { ... } Example: convert Fahrenheit temps to Celsius. var fahrenheit = [0, 32, 45, 50, 75, 80, 99, 120]; var celcius = fahrenheit.map(function(elem) { return Math.round((elem - 32) * 5 / 9); }); Formula : Use it when: You want to translate/map all elements in an array to another set of values.
26. Filter array.filter(function(elem, index, array) { ... } Example: remove duplicate elements from an array. var uniqueArray = array.filter(function(elem, index, array) { return array.indexOf(elem) === index; } ); Formula : Use it when: You want to remove unwanted elements based on a condition.
27. Reduce array.reduce(function(prevVal, elem, index, array) { ... }, initialValue); Example: remove duplicate elements from an array. var sum = [0, 1, 2, 3].reduce(function(a, b) { return a + b; }, 0); // sum is 6 Formula : Use it when: You want to find a cumulative or concatenated value based on elements across the array.
28. Some of FP Library • Ramda • lodash/fp • functional.js • lambdajs • immutable.js
29. Awesome FP Resources https://github.com/stoeffel/awesome-fp-js Books :