This document summarizes a presentation on functional programming in JavaScript. It introduces functional programming concepts like pure functions, immutability, and higher-order functions. It provides examples of how these concepts are implemented in JavaScript using features like first-class functions, closures, recursion, and function composition. The presentation argues that functional programming can make code more readable, testable and performant by avoiding side effects and favoring pure functions.

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