![EXAMPLE (HOF)
var myArray = [1, 2, 3, 4, 5];
function times(x) {
return function (y) {
return x * y;
}
}
myArray.map(times(2));
// -> [2, 4, 6, 8, 10]](https://image.slidesharecdn.com/functional-programing-in-js-slides-170614081828/85/Functional-programing-in-Javascript-lite-intro-6-320.jpg)
![MAP
Returns a new array with the result of applying a
function on each element of the array
var myArray = [1, 2, 3, 4, 5];
myArray.map(function (value) {
return value + 1;
});
// -> [2, 3, 4, 5, 6]](https://image.slidesharecdn.com/functional-programing-in-js-slides-170614081828/85/Functional-programing-in-Javascript-lite-intro-7-320.jpg)
![FILTER
Returns a new array with all elements that pass the
test implemented by the provided function
var myArray = [1, 2, 3, 4, 5];
myArray.filter(function (value) {
return value < 4;
});
// -> [1, 2, 3]](https://image.slidesharecdn.com/functional-programing-in-js-slides-170614081828/85/Functional-programing-in-Javascript-lite-intro-8-320.jpg)
![REDUCE
Reduces the elements to a single value applying a
function to each of them
var myArray = [1, 2, 3, 4, 5];
myArray.reduce(function (acc, value) {
return acc + value;
}, 0);
// -> 15](https://image.slidesharecdn.com/functional-programing-in-js-slides-170614081828/85/Functional-programing-in-Javascript-lite-intro-9-320.jpg)
![IMPERATIVE VS DECLARATIVE
Given an array of numbers return the numbers that
are less than 4 and add to each of those 10
var myArray = [1, 2, 3, 4, 5];
var result = [];
var i = 0;
for (i; i < myArray.length; i += 1) {
if (myArray[i] < 4) {
result.push(myArray[i] + 10);
}
}
var myArray = [1, 2, 3, 4, 5];
var result = myArray
.filter((value) => value < 4)
.map((value) => value + 10);](https://image.slidesharecdn.com/functional-programing-in-js-slides-170614081828/85/Functional-programing-in-Javascript-lite-intro-10-320.jpg)
![FUNCTION COMPOSITION
import {filter, flow} from 'lodash/fp';
const users = [ {name: 'Mary', age: 46, active: true},
{name: 'John', age: 40, active: true},
{name: 'Helen', age: 30, active: true},
{name: 'Mike', age: 25, active: false} ];
const eligibleMiddleAgeGroup = flow(
filter('active'), // (user) => user.active
filter((user) => user.age >= 45 && user.age < 65))
);
eligibleMiddleAgeGroup(users)
// -> [{name: 'Mary', age: 46, active: true}]](https://image.slidesharecdn.com/functional-programing-in-js-slides-170614081828/85/Functional-programing-in-Javascript-lite-intro-11-320.jpg)
More Related Content
What's hot (20)
Similar to Functional programing in Javascript (lite intro) (20)
Recently uploaded (20)
Functional programing in Javascript (lite intro)
- 1. Functional Programming in JS (light intro) Nikos Kalogridis @nikoskalogridis
- 2. FP HISTORY Based on λ-calculus (1930) Lisp (late 1950's) ...Haskel (1987) ...Javascript (1995) Clojure (2007), Elm (2012)
- 3. CONCEPTS First class / higher order functions Declarative instead of imperative style Function composition Currying / Partial Application Recursive functions / Tail recursion Pure Functions Immutablility
- 4. FIRST CLASS FUNCTIONS A programming language that treats functions as first-class citizens (errrr.....) functions can take as arguments other functions functions can be returned by functions functions can be assigned to a variable
- 5. HIGHER ORDER FUNCTIONS (HOF) A function that takes as an argument another function A function that returns another function or does both
- 6. EXAMPLE (HOF) var myArray = [1, 2, 3, 4, 5]; function times(x) { return function (y) { return x * y; } } myArray.map(times(2)); // -> [2, 4, 6, 8, 10]
- 7. MAP Returns a new array with the result of applying a function on each element of the array var myArray = [1, 2, 3, 4, 5]; myArray.map(function (value) { return value + 1; }); // -> [2, 3, 4, 5, 6]
- 8. FILTER Returns a new array with all elements that pass the test implemented by the provided function var myArray = [1, 2, 3, 4, 5]; myArray.filter(function (value) { return value < 4; }); // -> [1, 2, 3]
- 9. REDUCE Reduces the elements to a single value applying a function to each of them var myArray = [1, 2, 3, 4, 5]; myArray.reduce(function (acc, value) { return acc + value; }, 0); // -> 15
- 10. IMPERATIVE VS DECLARATIVE Given an array of numbers return the numbers that are less than 4 and add to each of those 10 var myArray = [1, 2, 3, 4, 5]; var result = []; var i = 0; for (i; i < myArray.length; i += 1) { if (myArray[i] < 4) { result.push(myArray[i] + 10); } } var myArray = [1, 2, 3, 4, 5]; var result = myArray .filter((value) => value < 4) .map((value) => value + 10);
- 11. FUNCTION COMPOSITION import {filter, flow} from 'lodash/fp'; const users = [ {name: 'Mary', age: 46, active: true}, {name: 'John', age: 40, active: true}, {name: 'Helen', age: 30, active: true}, {name: 'Mike', age: 25, active: false} ]; const eligibleMiddleAgeGroup = flow( filter('active'), // (user) => user.active filter((user) => user.age >= 45 && user.age < 65)) ); eligibleMiddleAgeGroup(users) // -> [{name: 'Mary', age: 46, active: true}]
- 12. CURRYING / PARTIAL APPLICATION function times(x) { return function (y) { return x * y; } } function times(x, y) { if (y === undefined) { return function (y) { return x * y; } } return x * y; }
- 13. RECURSIVE FUNCTIONS / TAIL RECURSION function countdown(value) { if (value < 0) { return; } console.log(value); return countdown(value - 1); }
- 14. PURE FUNCTION its return value is affected only by its passed parameters and has no side effects
- 15. PURE VS IMPURE var a = 10; function impure(x) { return x + a; } function pure(x, y) { return x + y; }
- 16. SIDE EFFECTS var a = 0; function impure(x) { a = x + a; } function impure(x) { console.log(x); return x + 1; }
- 17. IMMUTABLILITY const user = {name: 'Niks', age: 40, gender: 'male'}; user.age = 41; // mutation // avoiding mutation const updatedUser = Object.assign({}, user, {age: 41});
- 18. FUNCTIONAL PROGRAMMING STYLE don't Use loops Mutate objects/arrays Don't do side effects do Use tail recursion Create new instancies when modifying objects/arrays Isolate side effects outside business logic
- 19. PROS Decouple data from operations Easier testing Easier to reason about Easier to maintain/fix No mutation allows for easier concurrency Industry seems to move to it
- 20. CONS Needs more memory Runs slower (on dumb compilers) OOP programmers find it difficult to adapt Scares non CS people of with maths (even CS people are scared...) Requires rewiring your brain Javascript allows you to use any style
- 21. USEFUL LINKS Many more to fit this slide... Professor Frisby's guide to functional programming Functional Javascript (by Michael Fogus) Javascript: The Good Parts (by Douglas Crockford) Functional-lite Javascript video course (by Kyle Simpson) LoDash Ramda lazy.js
- 22. QUESTIONS
- 23. THANK YOU