FP & ES

beginning with functional style programming in ES2015

Goran Peoski (@azder)

online: azder.github.io/es-funx-basic

source: github.com/azder/es-funx-basic

---

What's this about

• practice, not theory
• how to get accustomed to FP
• what worked for me and might work for you

---

In the beginning

was the keyword

and the keyword was with problem

and problem was the keyword

---

GOTO

---

no more GOTO

• structured programming
• Böhm-Jacopini proof (1966)
  • en.wikipedia.org/wiki/Structured_program_theorem
• scared of obscure programs b/c introduction of additional local variables

---

The structured way

---

The ( lil' bit mo') Functional way

---

Why bother?

• separation of concerns
• helps debugging and testing
• easier to focus (subproblems and big picture)

---

How-To

Videos

• Hey Underscore, You're Doing It Wrong! @ youtu.be/m3svKOdZijA

• Hardcore Functional Programming in JavaScript

  • @ app.pluralsight.com/courses/hardcore-functional-programming-javascript

Languages

• Haskell @ www.haskell.org
• Elm @ elm-lang.org/

Meetups

• Hacklab KIKA @ status.spodeli.org

---

Learn about Libraries

• Underscore underscorejs.org
• Lodash lodash.com/docs
• Ramda ramdajs.com/0.19.1/docs/

---

Identify Symptoms

• Custom names:

  • let nextAreaStartsAt = 0;

• Looping patterns:

  • while(id = fragmentIds[++index]){

• Glue code:

  • .then( people => _.map(people, f) )

• Side effects

  • Object.freeze()

---

Then Separate concerns

• discover hidden inputs

• separate mutation from calculation

• combine calculations into pipeline, then do the mutation

---

Pure Functions

• testable
• portable
• memoizable
• paralelizable

---

All Functions

• nouns, not verbs

• collection of pairs: { (x1,y1), (x2, y2), ... }

  • y = f(x)
  • one result per variable combination

• point-free style

---

Utilities

• functions for operations

  • prop('b',a) instead of a.b

• map(fn,obj)

  • just calls .map on an object (container)

• curry(fn,...args)

• binds (fixates) and returns new function, until...

• when all arguments are provided, executes

• compose(f1,f2,f3,...fn)

• creates new function

• point-free style

---

Demo

in new tab | source code

<iframe src="demo/index.html" width="720px" height="320px" ></iframe>

---

The End

Thanks for sticking around until the very end :)

???

• objectify, stringify

• prop

• for replaced by map

• composition (lcomp, rcomp)

• curry

• operators as functions

• functions that return undefined

  • console.log vs tap,
  • Array.push

• functions that take arguments in weird order

  • lodash.map(collection, [iteratee=_.identity])
  • jQuery().map( callback ) w/ callback( index, domElement )
  • jQuery.map( array, callback ) w/ callback( elementOfArray, indexInArray )
  • underscore.pick(object,[props])

• start small (only business logic)

• abstract new keyword away

• in fact, most keywords and operators should be functions

• functors and monads - Array as a functor/monad

• Functor Laws

  • identity

    map(id) === id 

  • composition

    compose(map(f),map(g)) === map(compose(f,g))