Learning Path: Learn Functional Programming with JavaScript

Learn to Write Functional Javascript 17 lectures 03:52:24 Learn to Write Functional Javascript - The Course Overview This video provides an overview of the entire course. The Unbreakable Function JavaScript has traditionally been taught by the "Imperative or Procedural Programming" paradigms where functions ("procedures") perform tasks and modify a shared state. This can cause unpredictable behavior and hard to track bugs, especially as programs grow. Pure functions alleviate many problems of traditional programming paradigms and form the foundations of Functional Programming.

• A pure function does not change values outside of itself
• Given the same inputs, a pure function returns the same output

Thinking of Functions in Terms of Their Return Values Pure functions, like mathematical functions, always return the same value when given the same inputs, so the two are interchangeable. Functional Programming is expressive, we think less about what's happening inside functions and focus more on relations between function inputs and their outputs.

• Pure functions have a unique mappings from input to output
• Running pure functions inline is representative of a unique value
• Pure functions calling other pure functions won't complicate our mental model

How to Identify and Encapsulate Impurities within Our Programs Every program has impure functions; they are the only ticket in town for reading, writing and displaying information. In order to protect the benefits, we've gained by writing pure functions; we'll begin looking at how we can isolate impure code while still using it to feed us information.

• Identify which parts of our program is pure and which are impure
• Pure functions can return impure functions without breaking referential transparency
• We can defer impure operations and pass results into pure functions as dependencies

Promoting Reusability with Higher-Order Functions Pure functions seem to restrict what we’re able to do in our apps, higher-order functions open our eyes to new ways we can write and use functions. They give us powerful tools and reusable utilities.

• Accepting functions as input creates flexible and generic utilities
• Returning a function to create a reusable utility
• Use higher-order functions to configure objects with lots of setup

Replacing Loops with Higher-Order Functions There are constructs in our programs we have grown accustom to always using, loops are one of these constructs. We can stop writing loops and instead use higher-order functions. This will make our code more readable, expressive and open our thinking to new ways of using higher-order functions.

• Look at imperative loops, identify the parts that change.
• A wrapped function can pass values in as arguments
• Create higher-order utilities that will work over any array

A Better Way to Map and Filter JavaScript added the higher-order map and filter methods to Arrays in ES5.1 but they don’t work in the way we as functional programmers need. We can make our own implementations that will certainly prove to be more and more useful the further we get into functional programming.

• Visualize the way map and filter work over a collection
• Create higher-order function implementations of map and filter
• Decouple the work and load from our higher-order functions

Reasoning with Reduce Reduce is another very popular higher-order function used for working over collections of data. It can be a little more difficult to reason about than map and filter, however it can have a lot more uses than map and filter as well.

• Visualize the steps the reduce function takes
• Implement our own higher-order reduce function
• Map and reduce to work on collections of data

Rendering UI Components with Higher-Order Functions Higher-order functions did some neat tricks for us working with Arrays, and we aren’t close to finish. Rendering to the DOM can get a lift from higher-order components by allowing us to perform generalized work over arbitrary components

• Learn about creating document fragments and building components
• Use a higher-order function as middleware to perform work
• Like Higher-order functions, components are configurable on input and output

What Partial Application and Curry Mean? As programs grow, creating higher-order nested functions won’t be as flexible as we once thought. There is a better way to pass a couple input values into a function and still get as return a higher-order function with those values in a closure without wiring nests of functions like Russian dolls.

• Function arity is the number of parameters a function defines
• JavaScript totally applies functions regardless of number of input values
• Partial application binds values to parameters without running the function

Improving Higher-Order Functions with Partial Application Now that we understand what partial application and currying are, we’ll want to see how we can use some common partial application utilities to write higher-order functions without writing entire new functions or refactoring old ones. We’ll see how a few different utilities operate.

• Custom “partial” utility to improve the logger from section 2
• Use the Ramda “partial” utility to refactor the same function
• Use the Ramda “curry” utility for most flexible partial application

Writing a Utility to Curry Functions Partial Application and Currying can take time to adjust to but they become tools we don’t want to live without. It’s nice to be able to quickly write partial application utilities so we can add them to any project. Writing utilities gives the added benefit of gaining stronger understanding.

• Learn about function “call”, “apply”, “bind” methods
• Write a utility that can curry passed in functions
• Improve the utility to allow temporary skipping of placeholder parameters

Combining Map, Filter, and Reduce with Curried Functions It’s time again to combine the techniques we’ve been learning and see how they work well with each other. We should be able to use a lot more functions with our higher-order functions map, filter, and reduce as well as instantly improve any function that works over arrays with the “curry” utility.

• The “curry” utility can improve normal map, filter, reduce functions
• “curry” can turn regular functions into better transformation functions
• Follow along with some examples demonstrating the power of partial application

Understanding Mutable and Immutable Data When objects in JavaScript are changed, the effects are observable to any variable pointing to that resource. It only takes a single change to break an app in unpredictable ways. Immutable data disallows modifications after initialization which makes data deterministic like pure functions.

• It’s commonplace to group data with functions to modify it
• Object.freeze disallows assignments or reassignments to properties on an object
• Persistent data structures won’t overwrite, alter or remove previous values

Simplifying Immutability Using Lenses Making objects immutable could add complexity to an application. Persistent data structures might be complicated to add into a project and many time might not even be needed. Lenses can simplify working with data and make adding new data structures into a project easier.

• A lens is created with both a setter and getter
• Lenses don’t mutate the objects they focus on
• Lenses can be combined to focus in on nested data

Rendering Our Data into the DOM Rendering HTML to the DOM is an impure operation. We don’t want to couple our data too closely to the DOM. Stateless components are pure, they take data as input and output a JavaScript representation of that components DOM structure. They don’t change the DOM or mutate any data.

• Stateless components are functions to input data and output elements
• Write pure functions that imitate the structure of our HTML
• A single impure operation can manage every DOM update

Using JSX and Virtual-DOM for Readability and Performance A function to update the entire DOM at once is more deterministic, but less performant. Virtual-DOM keeps a representation of the DOM in JavaScript so it can figure out which changes to make on updates and only render parts of the DOM that need to change rather than overwriting everything.

• Babel allows us to write JSX inside our files
• Virtual-DOM caches a representation of how the DOM should look
• Virtual-DOM knows which DOM nodes to update by comparing cache

Learn to Write Functional Javascript - Quiz Learn to Write Functional Javascript. 17 lectures 03:52:24 Learn to Write Functional Javascript - The Course Overview This video provides an overview of the entire course. The Unbreakable Function JavaScript has traditionally been taught by the "Imperative or Procedural Programming" paradigms where functions ("procedures") perform tasks and modify a shared state. This can cause unpredictable behavior and hard to track bugs, especially as programs grow. Pure functions alleviate many problems of traditional programming paradigms and form the foundations of Functional Programming.

• A pure function does not change values outside of itself
• Given the same inputs, a pure function returns the same output

Thinking of Functions in Terms of Their Return Values Pure functions, like mathematical functions, always return the same value when given the same inputs, so the two are interchangeable. Functional Programming is expressive, we think less about what's happening inside functions and focus more on relations between function inputs and their outputs.

• Pure functions have a unique mappings from input to output
• Running pure functions inline is representative of a unique value
• Pure functions calling other pure functions won't complicate our mental model

How to Identify and Encapsulate Impurities within Our Programs Every program has impure functions; they are the only ticket in town for reading, writing and displaying information. In order to protect the benefits, we've gained by writing pure functions; we'll begin looking at how we can isolate impure code while still using it to feed us information.

• Identify which parts of our program is pure and which are impure
• Pure functions can return impure functions without breaking referential transparency
• We can defer impure operations and pass results into pure functions as dependencies

Promoting Reusability with Higher-Order Functions Pure functions seem to restrict what we’re able to do in our apps, higher-order functions open our eyes to new ways we can write and use functions. They give us powerful tools and reusable utilities.

• Accepting functions as input creates flexible and generic utilities
• Returning a function to create a reusable utility
• Use higher-order functions to configure objects with lots of setup

Replacing Loops with Higher-Order Functions There are constructs in our programs we have grown accustom to always using, loops are one of these constructs. We can stop writing loops and instead use higher-order functions. This will make our code more readable, expressive and open our thinking to new ways of using higher-order functions.

• Look at imperative loops, identify the parts that change.
• A wrapped function can pass values in as arguments
• Create higher-order utilities that will work over any array

A Better Way to Map and Filter JavaScript added the higher-order map and filter methods to Arrays in ES5.1 but they don’t work in the way we as functional programmers need. We can make our own implementations that will certainly prove to be more and more useful the further we get into functional programming.

• Visualize the way map and filter work over a collection
• Create higher-order function implementations of map and filter
• Decouple the work and load from our higher-order functions

Reasoning with Reduce Reduce is another very popular higher-order function used for working over collections of data. It can be a little more difficult to reason about than map and filter, however it can have a lot more uses than map and filter as well.

• Visualize the steps the reduce function takes
• Implement our own higher-order reduce function
• Map and reduce to work on collections of data

Rendering UI Components with Higher-Order Functions Higher-order functions did some neat tricks for us working with Arrays, and we aren’t close to finish. Rendering to the DOM can get a lift from higher-order components by allowing us to perform generalized work over arbitrary components

• Learn about creating document fragments and building components
• Use a higher-order function as middleware to perform work
• Like Higher-order functions, components are configurable on input and output

What Partial Application and Curry Mean? As programs grow, creating higher-order nested functions won’t be as flexible as we once thought. There is a better way to pass a couple input values into a function and still get as return a higher-order function with those values in a closure without wiring nests of functions like Russian dolls.

• Function arity is the number of parameters a function defines
• JavaScript totally applies functions regardless of number of input values
• Partial application binds values to parameters without running the function

Improving Higher-Order Functions with Partial Application Now that we understand what partial application and currying are, we’ll want to see how we can use some common partial application utilities to write higher-order functions without writing entire new functions or refactoring old ones. We’ll see how a few different utilities operate.

• Custom “partial” utility to improve the logger from section 2
• Use the Ramda “partial” utility to refactor the same function
• Use the Ramda “curry” utility for most flexible partial application

Writing a Utility to Curry Functions Partial Application and Currying can take time to adjust to but they become tools we don’t want to live without. It’s nice to be able to quickly write partial application utilities so we can add them to any project. Writing utilities gives the added benefit of gaining stronger understanding.

• Learn about function “call”, “apply”, “bind” methods
• Write a utility that can curry passed in functions
• Improve the utility to allow temporary skipping of placeholder parameters

Combining Map, Filter, and Reduce with Curried Functions It’s time again to combine the techniques we’ve been learning and see how they work well with each other. We should be able to use a lot more functions with our higher-order functions map, filter, and reduce as well as instantly improve any function that works over arrays with the “curry” utility.

• The “curry” utility can improve normal map, filter, reduce functions
• “curry” can turn regular functions into better transformation functions
• Follow along with some examples demonstrating the power of partial application

Understanding Mutable and Immutable Data When objects in JavaScript are changed, the effects are observable to any variable pointing to that resource. It only takes a single change to break an app in unpredictable ways. Immutable data disallows modifications after initialization which makes data deterministic like pure functions.

• It’s commonplace to group data with functions to modify it
• Object...