Functional Programming in JavaScript & ESNext
Download as pptx, pdf0 likes737 views
Functional programming concepts and techniques in JavaScript are summarized. Key points include: - Functional programming avoids mutations by performing computations through expressions. - Pure functions always return the same output for a given input and have no side effects. - Higher order functions, currying, composition, and functors are important functional programming tools. - JavaScript supports functional programming through features like arrow functions, modules, and libraries. - ECMAScript development follows a multi-stage process and is overseen by TC39 and ECMA.
More Related Content
What's hot (20)
Similar to Functional Programming in JavaScript & ESNext (20)
More from Unfold UI (7)
Recently uploaded (20)
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
- 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
- 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
- 33. ECMAScript 2016 ● Exponentiation operator
- 34. ECMAScript 2017
- 35. ECMAScript 2017 Object.entries & values
- 36. ECMAScript 2018 Rest/Spread operator Async Iteration
- 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 [email protected] Navin Singh UI Developer, ThoughtWorks [email protected] @ramshinde92 @official_naveen
Editor's Notes
- #13: Add some more pointers
- #19: Talk about why this comment in code is valid.
- #27: Add slide for What is ESNext and Who designs ECMAScript Who designs it => TC39 How is it designed => 5 stages ES6 with house full of features was a problem So TC39 came with 5 stages solution thereby releasing features frequently
- #28: Add slide for What is ESNext and Who designs ECMAScript Who designs it => TC39 How is it designed => 5 stages ES6 with house full of features was a problem So TC39 came with 5 stages solution thereby releasing features frequently
- #29: Stage 1: Champion must be identified who is responsible for proposal, Champion or co-champion must be member of TC39
- #30: Stage 4: ECMAScript spec editor must sign off All these stages are not confirmations, they are just probables Confirmation is after they clear spec editor
- #31: Stage 4: ECMAScript spec editor must sign off All these stages are not confirmations, they are just probables Confirmation is after they clear spec editor