Functional programming is gaining more and more popularity. I would like to present basics of functional programming, which everyone could use in daily work. I talk about functions, currying & function composition. I present utility functions, which can improve our code readability, make it more reusable and testable.

1. Functional JavaScript
for everyone
Bartek Witczak

3. 1/320
http://te.xel.io/posts/2015-02-22-category-theory-and-human-behavior.html

4. https://prateekvjoshi.com/2014/11/01/functors-in-c/

5. Functions

6. function youngerThan(age, limit) {
return age < limit
}

7. function youngerThan(age) {
return function(limit) {
return age < limit
}
}

8. function youngerThan(age) {
return function(limit) {
return age < limit
}
}
const youngerThanMe = youngerThan(28)
...
people.map(youngerThanMe)

9. In programming language design, a first-class citizen (…) is an
entity which supports all the operations generally available to
other entities. These operations typically include being passed
as an argument, returned from a function, and assigned to a
variable

10. let languages = ['JavaScript', 'Scala', 'Go']
...
...
...
...
let divs = []
for(let i = 0; i < languages.length; i++) {
divs.push(`<div>${langs[i]}</div>`)
}

11. let languages = ['JavaScript', 'Scala', 'Go']
languages.push('Java')
languages.push('Ruby')
languages.splice(0, 3)
let divs = []
for(let i = 0; i < languages.length; i++) {
divs.push(`<div>${languages[i]}</div>`)
}

12. const languages = Immutable.List.of(
‘JavaScript',
‘Scala',
‘Go'
)
...
...
let divs = []
for(let i = 0; i < languages.length; i++)
{
divs.push(`<div>${languages[i]}</div>`)
}

13. • always evaluates to same result for the same
input
• evaluation does not cause any semantically
observable side effects
Pure function

14. let user = {...}
function createMessage(text) {
const message = Db.save(text)
return message
}
function sendMessage(text) {
const message = createMessage(text)
const messageId = MessageService.send(message, user)
return messageId
}
IMPURE

15. function createMessage(Db, text) {
const message = Db.save(text)
return message
}
function sendMessage(Db, MessageService, text, user) {
const message = createMessage(Db, text)
const messageId = MessageService.send(message, user)
return messageId
}
PURE

16. function createMessage(Db, text) {
const message = Db.save(text)
return message
}
function sendMessage(Db, MessageService, text, user) {
const message = createMessage(Db, text)
const messageId = MessageService.send(message, user)
return messageId
}
Explicit dependency / Self-documenting

17. Testable
function createMessage(Db, text) {
const message = Db.save(text)
return message
}
function sendMessage(Db, MessageService, text, user) {
const message = createMessage(Db, text)
const messageId = MessageService.send(message, user)
return messageId
}

18. Resonable
function createMessage(Db, text) {
const message = Db.save(text)
return message
}
function sendMessage(Db, MessageService, text, user) {
const message = createMessage(Db, text)
const messageId = MessageService.send(message, user)
return messageId
}

19. The problem with object-oriented languages is they’ve got all
this implicit environment that they carry around with them. You
wanted a banana but what you got was a gorilla holding the
banana... and the entire jungle
Joe Armstrong, Erlang creator

20. Currying

21. f ( x, y ) === f ( x ) ( y )

22. function add(x, y) {
return x + y
}
add(2, 3)
function curried_add (x) {
return function (y) {
return x + y
}
}
curried_add(2)(3)

23. const increment = curried_add(1)
increment(5)
peopleAge.map(increment)
const add10 = curried_add(10)
add10(15)

25. export const create = (fetch) => {
return {
...
post: (url, data, token) => {
const secureHeader = token ? { 'SECURE-TOKEN':
token } : {}
return Q(fetch(url, {
method: 'post',
headers: _.assign({
'Accept': 'application/json',
'Content-Type': 'application/json'
}, secureHeader),
body: JSON.stringify(data)
}))
}
...
}
export default create(fetch)

26. const token = '1jflann24kh11;2114fanakf'
http.post(someURL, { user: 'Henry' }, token)

27. return {
...
post: (token, url, data) => {
...
post(token)(url)(data)
currying

28. const createSecured = (http, token) => {
...
post: http.post(token)
...
}
sercureHttp.post(someURL)({ user: 'Henry' })

29. No more loops

30. const languages = ['JavaScript', 'Scala', 'Haskell']
const divs = []
for(let i = 0; i < languages.length; i++) {
divs.push(`<div>${languages[i]}</div>`)
}
const languages = ['JavaScript', 'Scala', 'Haskell']
const divs = languages.map(l => `<div>${l}</div>`)

31. const dimensions = [100, 231, 84]
const sum = 0
for(let i = 0; i < dimensions.length; i++) {
sum += dimensions[i]
}
const dimensions = [100, 231, 84]
const sum = dimensions.reduce((a, b) => a + b, 0)

32. const people = [{name: 'Henry', age: 21},
... ]
const adults = []
for(let i = 0; i < people.length; i++) {
if(people[i].age >= 18) {
adults.push(people[i])
}
}
const people = [{name: 'Henry', age: 21},
... ]
const adults = people.filter(p => p.age >= 18)

34. Function composition

35. f(g(x)) === (f ∘ g)(x)

36. function compose(f, g) {
return function(x) {
return f(g(x))
}
}

37. const add2 = (x) => x + 2
const multiplyBy2 = (x) => x * 2
multiplyBy2(add2(3))
const add2ThenMultiplyBy2 = compose(multiplyBy2, add2)
add2ThenMultiplyBy2(3)

38. function convertToAlbums(json) {
const artist = extractArtist(json)
const album = ...
return album
}
function extractTracks(album) {
const rawTracks = album.tracks
const tracks = ...
return tracks
}
function trackElem(track) {
return `<li>${track.name} - ${track.duration}</li>`
}
const tracks = compose(extractTracks, convertToAlbums)
const tracksFromJson = compose(map(trackElem), tracks)
tracksFromJson(albumJson)

41. Bartek Witczak
@bartekwitczak
bartek@dayone.pl