JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In the previous section, [07 Building Light Search Box](https://egghead.io/playlists/building-light-search-box-bb64), we implemented a search box with the pattern that we've built in this course. This works great but doesn't have as much business logic applied as other async scenarios.

In this section, we will implement a word game where the values coming in from the user will be piped to different listeners to be consumed. Along the way, complex business logic will be applied to determine if the user won the game or not.

**You're in Section 08, the last of [Composing Closures and Callbacks in JavaScript](https://egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223)**

To build out our word game, we will have to be able to share the word across a few places. This means we have to set up a broadcaster that will push the same values to multiple listeners instead of different values each time a listener is added. We will do this by creating a share operator that can capture the broadcaster and track all of the listeners so that we can hook them together and customize how values get pushed down into the listener callbacks.

Share the Same Broadcaster Values Across Multiple Listeners

Because share captures and sets up a broadcaster it also needs to know when to set up a new broadcaster. You need to make sure the previous broadcaster is reused unless you explicitly cancel it. Otherwise, multiple broadcasters will be set up when you only want one. This lesson walks through limiting the set up for a broadcaster to you only when a previous broadcaster has not been defined.

Limit to a Single Shared Broadcaster Each New Event

We are both fetching a word from an API and type in text into an input box. We need a way to compare those two values to know if our guess is correct. We can do this by combining the two initial broadcasters And using operators to compare their values as each new value is pushed through. In this lesson, we write a combine operator that takes values from two broadcasters and pushes each value through in the form of an array with two values.

Combine Two Broadcasters to Compare Values

Composing operators allows us to handle the values that come through in a variety of ways. We'll be composing operators to set up game logic which can determine the output of the word combined with the guess. When we compose operators in this manner, we are creating reusable functions that we can use across our site or even other applications. We can also test them separately from the broadcasters we're using inside of our game.

Compose Operators to Implement Game Logic

Each time we eat correctly guess the word, we want to grab a new word to restart our game. This sets up a scenario where we want the getWord broadcaster to make another fetch request when the input box has all of the letters contained in the current word. We can do this by using an operator that will send a value of done if conditions are met and another operator that will tell the broadcaster to repeat when it receives a value of done.

Fetch New Data Based on Conditions

After we've loaded a new word we also want to clear the input field so that we can just start guessing the next word that has loaded. Since the broadcaster from the input field won't send any events we will need to do it manually through an operator. We can set up an operator that will initialize any value anytime the broadcaster is set up. This will allow us to send an empty string down to the listener and we can use that value to clear the value of the input field.

Create an Initialize Operator to Clear an Input Field

You often want one broadcaster to set up another broadcaster so that the second one waits for the first one to fire off the value. In our situation, we want the word to load before we start accepting values from the input field because guessing a word before a word loads doesn't make any sense. This also forced us into using React's system of useEffect and dependencies rather than our library of broadcasters and operators To manage when broadcasters repeat. We gain much more control when we use our own operators to handle when broadcasters push new values.

Combine Broadcasters in Logical Order

When combining two broadcasters it also makes sense to output both of the values as a single state object so our operators can have complete control over how the values come through. This saves us from worrying about keeping values in sync especially when we use something like a repeat operator that tells the original broadcaster to cancel and start over. In our scenario, the mapping logic for I game can easily be expressed inside of the JSX If we have both the most recent value of the guess out of the word.

Refactor Game State to a Single Repeating Broadcaster

Some operators have the responsibility of managing multiple broadcasters and some very minor bugs can slip through if we don't take special care to cancel each of the broadcasters inside of that operator. In our scenario, this bug only shows up if you logout the values through an operator it doesn't even manifest inside of our game. But having a broadcaster that sticks around when you wanted it to cancel can lead to a lot of weird behaviors. So if your application starts acting up make sure to check in each of the operators that broadcasters are being canceled properly.

Check Broadcasters Are Properly Cancelled in Operators

This lesson just does a little housecleaning after finishing the word game. We clean up the imports and organize the operators.

Organizing Operators and Cleaning Up

Understanding how all of the values flow through the application is critical to be able to properly handle each edge case. This lesson does one final walkthrough of how all the broadcasters are set up, how the data flows through the operators, then how broadcasters are canceled and set up again once the win condition is met.

Implementing a Word Game with Patterns and React

John Lindquist

Learner Reviews

Course Content