Anjana Vakil
Software Engineer & Educator
Functional JavaScript First Steps
3 hours, 54 minutes CC
Course Description
In this friendly introduction to functional programming with JavaScript, you'll learn what Functional Programming (FP) is and how it differs from other programming styles (such as OO and imperative). You'll practice the key idea of doing everything with pure functions, learning to use higher-order functions and recursion to replace the iterative loops we're used to writing with for and while. You'll more to advanced techniques like closures, currying, and function composition and learn why immutable data is essential for functional programming.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: February 9, 2021
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: 9 minutes
Anjana Vakil walks through the outline and provides links to the slides and exercises for the course. All exercises are hosted on Observable HQ and can be coded in the browser.
What is Functional Programming
Section Duration: 1 hour, 6 minutes
Anjana describes functional programming as having a specific mindset when writing code and compares it to other paradigms like imperative programming or object-oriented programming. A core concept of functional programming is the use of pure functions which are functions that do not produce side effects.
Anjana compares two functions to highlight the differences between pure and impure functions. A pure function is deterministic which means when given a specific input, the output will always be the same.
Anjana explains that functional programming is more predictable and easier to test and debug. Using functional programming in JavaScript can be an easier alternative to object-oriented techniques or prototypical inheritance.
Anjana demonstrates how to remove side effects from an impure function. Side effects are produced any time a function depends on or manipulates data outside of itself. Pure functions do nothing but return output based on an input.
Students are instructed to decide whether each function is pure or impure.
Anjana demonstrates the solution to the Pure Functions exercise.
Staying out of the Loop with Recursion
Section Duration: 41 minutes
Anjana explains iterative loops are not a part of functional programming and demonstrates how a for loop can be refactored to use recursion. When a function is recursive, it continues to call itself until a non-recursive base case is reached.
Students are instructed to compare iterative and recursive functions for their readability, writability, and performance.
Anjana demonstrates the solution to the Iteration vs Recursion exercise.
Anjana discusses the performance implications of recursive functions. Deep recursive stacks can lead to memory issues and stack overflow errors. Tail call optimization can address these issues but is not implemented in all JavaScript runtime environments.
HIgher Order Functions
Section Duration: 33 minutes
Anjana explains that higher order functions receive another function as an input or output. JavaScript Array methods like map, reduce, and filter are useful high order functions in functional programming because they replace the need for iteration.
Students are instructed create predicate functions that can be used with the filter function, implement a map function, and create "sum" and "max" reducer functions.
Anjana demonstrates the solution to the filter, map & reduce exercise. This segment covers implementing predicate functions for the filter function.
Anjana demonstrates the solution to the filter, map & reduce exercise. This segment covers implementing the map function.
Anjana demonstrates the solution to the filter, map & reduce exercise. This segment covers implementing the sum and max reducer functions.
Closure
Section Duration: 23 minutes
Anjana describes that closure occurs when a function defined inside another function retains access to scope from the outer function's body. This allows the inner function to access data that was not explicitly passed to it as an argument.
Anjana explains partially applied functions have some arguments "locked in" by using a closure. Currying is the process of refactoring a single function with multiple arguments to a series of partially applied functions.
Students are instructed to create two functions that return closures and curry another function to make it more reusable.
Anjana demonstrates the solution to the Closure & Currying exercise.
Function Composition
Section Duration: 47 minutes
Anjana explains how functional programers use functional composition to create full programs. One function's output becomes the input for another function. The program itself is a function composed from other smaller functions.
Students are instructed to write a pipeline function that receives a series of functions as input and then use the pipeline technique to convert strings from snake_case to camelCase.
Anjana demonstrates the solution to the Function Composition exercise.
Anjana demonstrates how to use the map function to copy an array to prevent mutation. Although the new copy has prevented mutating the original Array, creating copies can increase the amount of memory required to run a program. Immutable or persistent data structures allow unchanged parts of the data to be reused throughout a program.
Students are instructed to rewrite the mutable push and pop Array methods and experiment with the Immutable.js and Immer libraries.
Anjana demonstrates the solution to the Avoiding Mutation exercise.
Wrapping Up
Section Duration: 12 minutes
Anjana summarizes what was covered throughout the course and provides resources for learning more about functional programming topics.
Totally digging Anjana's Functional Javascript First Steps course on Frontend Masters. Love the energy she brings to IMO a very math-heavy concept and made it fun!
Rocky Kev
RockyKev
Remember that Intro to Functional Programming video that has millions of views on YouTube because it’s so well explained? That was Anjana Vakil and she has a great full course on Functional Programming on Frontend Masters.
She’s amazing 🤩
Sarah Drasner
sarah_edo
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops