Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Composing Closures and Callbacks in JavaScript

via egghead.io

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
As a developer, you'll often make use of APIs that have you pass in a callback function. For example, adding event listeners or using various other DOM or Node APIs.
What's less common is writing your own code that makes use of callbacks. Many developers know what a callback is, but not the why or how of implementing them in their projects.
A callback is a function that you pass to another function, so that the function that you pass it to controls the invocation of that function.
To help keep things straight, John Lindquist calls the innermost callback the Listener, and the function it gets passed into the Broadcaster.
Think of it as one function broadcasting values to another function that is listening for them.
These Broadcaster-Listener callback relationships can be composed to solve problems in the realm of timing, buffering, and caching.
This pattern of composing callbacks is the foundation of RxJS and other libraries that handle complex async scenarios.
In this course, John Lindquist guides you from a blank JavaScript file all the way through creating a library of reusable functions not unlike those found in RxJS. The difference is you'll be writing from scratch.
You'll learn techniques for solving Callback Hell with composition, implementing debouncing, and building a word game among several other examples.
Using callbacks in code is a major pattern in JavaScript, and learning to work with them effectively will take your problem-solving skills to the next level.

Syllabus

  • What Is a Closure in JavaScript
  • What Is a Callback in JavaScript
  • Can a Function Be a Closure and a Callback?
  • Compose Closures and Callbacks to Create New Functions
  • Defining the Broadcaster and Listener Relationship
  • Time is a Hidden Variable in JavaScript
  • Solve Callback Hell with Composition
  • Passing Values Through Callback Hell
  • Create a Function to Configure setTimeout
  • Return a Function to Cancel an Async Behavior
  • Wrap addEventListener in a Function for More Control
  • Create a Utility Function to Control setInterval
  • Combine Multiple Async Behaviors with a Merge Function
  • Use Lodash Curry When Functions Return Functions
  • Match Function Requirements with Lodash Partial and Flip
  • Create a Buffer to Pair Values Together with Zip
  • Pass an Array to a Callback with a forOf Function
  • Pass a Done Symbol when an Async Function is Done
  • Create an Operator Function to Modify Behaviors
  • Transform Values with a Map Operator
  • Prevent Certain Values with a Filter Operator
  • Use Pipe to Clean Up Functions Wrapping Functions
  • Start With the API You Want Then Implement
  • Define a Function to Set Common Behaviors in Operators
  • Use Buffers to Store Values Until a Condition is Met
  • Building a Counter UI by Composing Callbacks
  • Building a Timer UI by Composing Callbacks
  • Building a Word Matching Game by Composing Callbacks
  • Create a Win Condition with a mapDone Operator
  • Repeat a Broadcaster that Is Done
  • Repeat When Done with a Repeat Operator
  • Comparing Repeat to Start
  • Marking Done Based on a Condition
  • Create a Sequence of Broadcasters
  • Map a Sequence Based on Values
  • Adding React to a Vanilla Parcel Project
  • Create a Broadcaster in React with useState and useEffect Hooks
  • Create a Custom useBroadcaster Hook
  • Pass a Listener to a useCallback Hook
  • Create a Custom useListener Hook Around useCallback
  • Explaining the useListener Code
  • Map a Sequence of Values in React with useBroadcaster
  • Handling an Enter Keypress with useListener and React
  • Map a Sequence Based on Input Text in React
  • Creating a Debounce Operator to Limit Listener Calls
  • Wrap Fetch in a Broadcaster in React
  • Cancel a Fetch Request with a Broadcaster and React
  • Map an Error to a Broadcaster Value in React
  • Build a Live Search Box with useBroadcaster and useListener in React
  • Fixing Bugs in Our Live Search Box
  • Create an ifElse Operator to Fork on a Condition
  • Merge Multiple useListener Hooks in React
  • Compare useBroadcaster and useListener to the Standard React Hooks
  • Remember to Check for Done
  • Save Network Requests by Using a Cache
  • Fix Race Conditions Due to Caching and Canceling
  • Share the Same Broadcaster Values Across Multiple Listeners
  • Limit to a Single Shared Broadcaster Each New Event
  • Combine Two Broadcasters to Compare Values
  • Compose Operators to Implement Game Logic
  • Fetch New Data Based on Conditions
  • Create an Initialize Operator to Clear an Input Field
  • Combine Broadcasters in Logical Order
  • Refactor Game State to a Single Repeating Broadcaster
  • Check Broadcasters Are Properly Cancelled in Operators
  • Organizing Operators and Cleaning Up
  • Walkthrough the Data Flow of the Word Game
  • Exploring the Patterns in the Operators
  • Comparing Similarities with Popular Async Libraries

Taught by

John Lindquist

Reviews

Start your review of Composing Closures and Callbacks in JavaScript

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.