Codesmith
The Hard Parts of Functional JavaScript
4 hours, 54 minutes
CC
Course Description
Explore the increasingly popular paradigm of functional programming in JavaScript! You’ll learn how to wield and manipulate functions to develop more readable, maintainable and manageable codebases. You’ll go under the hood of powerful techniques like: Higher Order Functions, Function Composition, Pure Functions, and Immutability of State.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: October 1, 2019
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 8 minutes
Will Sentence introduces himself, explains what parts of functional programming he will cover in this course, and why functional programming can be useful in the everyday life of a programmer.
Will briefly explains the different concepts of functional programming that will be explored in depth during the course. The advantages of functional programming are also discussed.
JavaScript Principles Review
Section Duration: 29 minutes
Will explains what happens when a function is executed by going over what is stored in memory, what an execution context is, and what is an output.
Will describes what happens when a function finishes running, JavaScript needs to keep track of it, and uses a call stack for that.
Will reviews how two different functions are executed in detail. The audience is asked to describe in great technical detail how a function executes in JavaScript, and have solid foundations for the rest of the class.
Higher Order Functions
Section Duration: 36 minutes
Will demonstrates how to use placeholders as a function's argument and how this allows developers to apply the Don't Repeat Yourself (DRY) principle.
Will demonstrates how to use a generalized function and how to pass, as a parameter, specific instructions in the form of another function.
Will explains that functions are first class objects, meaning, functions can be passed as inputs of functions, and describes the difference between callback functions and higher-order functions.
Will describes the pair programming set of challenges that the audience is encouraged to work through.
Will describes how to write anonymous functions, how to write a function using an arrow, and cautions about the thinking that writing anonymous functions improves code readability.
Map & Reduce
Section Duration: 53 minutes
Will describes map as one of the most important higher functions in JavaScript. Map in this case, is the name usually used for the copyArrayManipulate function that was used before.
Will introduces the built-in reduce method to the audience, explains what a reducer is, what an accumulator is, and presents the concept of reducing, i.e. going from two elements to one with the help of a reducer.
Will covers an example of the reduce function by explaining step by step how the function reduces two elements to one repeatedly inside its execution context. Understanding reduce, is understanding how elements are combined to get to the final results.
Will explains that arrays have access to methods, and explains where these methods are stored.
Will explains how the filter method executes under the hood.
Will demonstrates how the high order functions used previously can be chained together to avoid using a global variable on which the rest of the code would depend.
Composition
Section Duration: 35 minutes
Will dives into function composition, and more specifically referential transparency which means replacing the execution of a function with its output. Using reduce with other functions as parameters is also described.
Will demonstrates how reduce works under the hood when its parameters are three other functions, and describes what happens within the function's execution context and memory.
Will reviews function composition, answers a few questions from the audience about function syntax, and function arity, and talks about the clarity gained thanks to functional programming.
Purity & Immutability
Section Duration: 16 minutes
Will explains what function purity is, defines side effects, and how they can threaten function purity.
Will defines immutability as not mutating any data where it is past by reference, and goes over an example.
Will reviews function purity and immutability, describes function arity, specifically the side effects of function chaining, there could be a mismatch in the amount of arguments a function can take, and explains briefly that closure is the solution to the arity issue.
Closure
Section Duration: 1 hour
Will demonstrates how closure allows the storing of a function's memory by executing that given function within another function.
Will covers in this section what happens within an execution context and memory when closure is used in functional programming.
Will clarifies what it means in JavaScript to pass on code from one function to the next, and how code is stored in the heap.
Will explains how data is processed within the inner function, and shows that the return value can be assigned to a global variable.
Will demonstrates how to assign the return value of the inner function, to an outer function, and give it a global label. On the back of the inner function comes its entire surrounding local memory.
Will describes what iterators are, what Closed Over Variable Environment ( C.O.V.E) is, and the different definitions of the word closure in JavaScript.
Function Decoration & Partial Application
Section Duration: 48 minutes
Will demonstrates that although a function cannot be edited without it compromising its purity, function decoration as the appearance of a function being edited in its scope, but is instead creating a new function, and inserting in it the function that needs to be edited.
Will demonstrates what function decoration, or higher order function is, and how it runs.
Will demonstrates the effect of a function decoration on the existing function, multiplyBy2.
Will summarizes the example of function decoration he went through in the previous section.
Will explains how to avoid an arity mismatch, by decorating a function and pre-filling one of its inputs.
Will dives into an example of partial application, and demonstrates what happens in memory and in the execution context while the function is running.
Will clarifies what partial application is by showing how data is partially applied to a function, and compares partial application and the use of closure in the example shared previously.
Will reviews partial application and its benefits, namely, easier to add features, readability and simplify the debugging process.
Wrapping Up
Section Duration: 4 minutes
Will wraps up and reminds the viewers that this course's goal is to give engineers the core pieces of functional programming to allow them to expand their knowledge while having solid foundations.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops