Functional Programming in JavaScript & ESNext

1. 1

2. Functional Programming
in JavaScript & ESNext
Navin Singh, ThoughtWorks, @official_naveen
Ram Shinde, ThoughtWorks, @ramshinde92

3. Flock (Group of Birds)
Conjoin = Add ( + )
A B C
( x ) Breed = Multiply

4. A Function
● Takes a value
● Results through a return value

5. SAME
A Pure Function
● Takes a value, and operates only
on that value
● Given the same Input, always
gives the same Output
-------------------------------------------------------
No side effects

6. Domain to Range (Pure Functions)

7. Side Effects
- Anything occurring in our function body other than the computation of a
result.
- Observable interaction with the outside world
- List may include
- Making an API call
- Querying/Updating the DOM
- Mutations
- Interaction with FS

8. Functional Programming
History Definition

9. History
● Modelling computation
● Express computation in terms of units of expression
● A lambda Expression defines
○ Function parameters
○ Body
● Lambda Calculus by Alonzo Church

10. Definition
A Paradigm where computation is performed through expressions, avoiding
mutations.
The real enemy… is unexpected dependency and mutation of state, which
functional programming solves more directly and completely.
- John Carmack

11. Some tools
● Higher Order Functions
● Curry
● Compose
● Functors

12. Declarative - Do not iterate
It’s like writing expression, as opposed to step by step instructions.
It specifies what, and not how.

13. Higher Order Function
A Higher Order Function is a function that accepts a function as one of its
parameters and/or returns a function.
Map, Filter & Reduce are widely used.

14. Higher Order Function - Example

15. Tools - Currying

16. Composition

17. Composition - Example

18. Type Signatures

19. Type Signatures
What are they ?
They are meta language helping to understand the expression more effectively.
Why do we need them ?
Can be thought as type annotations in functional programming.
For Eg:- Typescript, Flow
System Used to define: Hindley Milner

20. Functors

21. Functors (Maybe)

22. Advantages of Pure Functions
● Cacheable
● Lazy Evaluation
● Referential Transparency
● Testable
● Parallel

23. Languages that encourage/support Functional
Programming
● Haskell
● Elm
● Erlang
● F#
● Clojure
● Scala
● OCaml
● JavaScript

24. Functional JavaScript Libraries
● Ramda
● Lodash/fp
● Immutable.js
● Mori.js
● RxJS
● Functional.js
● FolkTale.js

25. References
Mostly Adequate Guide to Functional Programming - Dr. Frisby
Functional Programming Basics in ES6 - Coding Tech
Functional Programming Series - FunFunFunction
Learning Functional Programming - Anjana Vakil
What is a functor?
Awesome FP JS

26. ESNext
1. What is ESNext?
2. Who designs ECMAScript?
3. How is it designed?
0 Strawman
1 Proposal
2 Draft
3 Candidate
4 Finished

27. What is ESNext
ESNext, simply put is the future version of ECMAScript, its nothing more that
one the weird naming conventions JS is famous for.
Who designs ECMAScript
European Computer Manufacturers Association (ECMA) is standards
organisation based in Geneva responsible for developing various standards in
this case ECMAScript code named ECMA-262.

28. How it's designed?
Stage 0: Strawman
- A free form way of submitting ideas, either from TC39 member or non-
member.
Stage 1: Proposal
- Make the case for the addition
- Describe the shape of a solution
- Prose outlining the problem or need and the general shape of a solution

29. Draft, Candidate & Finished
Stage 2: Draft
- 1st Version. Inclusion is likely.
- Requirement: Complete description is needed here.
Stage 3: Candidate
- Proposal is almost finished, waiting for feedback.
- Requirement: Spec must be complete
Stage 4: Finished
- Proposal is ready
- Requirement: TEST 262 acceptance

30. How to use ESNext
Use Babel with various presets:
● babel-preset-es2015, 2016, 2017 for specific versions
● "env" for including all the above versions
● ES2018 the only feature in pipeline which is actually called Pipeline is
under proposal and has its own Babel preset called @babel/plugin-proposal-
pipeline-operator

31. ECMAScript 2015
● Scoping: let and const
● Arrow Functions
● Parameter handling: default
params, rest params
● String interpolation
● Module import and export
● Class definitions
● Class inheritance
● Array.find()
● Spread operator

32. ECMAScript 2016
● Array.prototype.includes

33. ECMAScript 2016
● Exponentiation operator

34. ECMAScript 2017

35. ECMAScript 2017
Object.entries & values

36. ECMAScript 2018
Rest/Spread operator
Async Iteration

37. Pipeline Operator

38. References
TC39 Proposals : https://github.com/tc39
ECMAScript : https://en.wikipedia.org/wiki/ECMAScript
ECMA International : https://en.wikipedia.org/wiki/Ecma_International
Pipeline Operator : https://github.com/tc39/proposal-pipeline-operator
Babel : https://babeljs.io/
ESNext : https://github.com/esnext/esnext

39. THANK YOU
Ram Shinde
UI Developer, ThoughtWorks
ramks@thoughtworks.com
Navin Singh
UI Developer, ThoughtWorks
navinks@thoughtwoks.com
@ramshinde92 @official_naveen