1 00:00:00,000 --> 00:00:03,766 You may have noticed a pattern that's starting to emerge in our code. 2 00:00:03,766 --> 00:00:08,342 For instance, the getJSON function has a callback in its body, 3 00:00:08,342 --> 00:00:11,407 which then executes a callback path to it. 4 00:00:11,407 --> 00:00:14,292 Then, that function produces another callback, 5 00:00:14,292 --> 00:00:17,654 which invokes a function that calls yet another callback. 6 00:00:17,654 --> 00:00:20,449 Each callback adds a level of nesting. 7 00:00:20,449 --> 00:00:24,360 And when you have lots of callbacks, the code could get complicated quickly. 8 00:00:24,360 --> 00:00:25,711 This is a small app. 9 00:00:25,711 --> 00:00:30,372 Now imagine a much larger app where we may have to do even more things sequentially, 10 00:00:30,372 --> 00:00:34,247 like have other async tasks that are dependent on our previous task. 11 00:00:34,247 --> 00:00:38,922 The nesting isn't too difficult to follow in our case because the program is mostly 12 00:00:38,922 --> 00:00:43,224 separated into reusable functions, each responsible for one major task. 13 00:00:43,224 --> 00:00:47,392 For example, getJSON manages requesting and parsing the data and 14 00:00:47,392 --> 00:00:51,127 generateHTML produces the HTML to display in the browser. 15 00:00:51,127 --> 00:00:56,345 Now, we could have nested the entire program inside addEventListener, 16 00:00:56,345 --> 00:00:59,553 in that case, the code might look like this. 17 00:00:59,553 --> 00:01:02,958 This is effectively what's referred to as callback hell or 18 00:01:02,958 --> 00:01:06,362 the pyramid of doom where multiple callbacks are nested one 19 00:01:06,362 --> 00:01:10,531 after the other making the code really hard to understand and maintain. 20 00:01:10,531 --> 00:01:14,414 Now, there's more we could do to sort of flatten the callback pyramid in our 21 00:01:14,414 --> 00:01:14,966 project. 22 00:01:14,966 --> 00:01:19,175 For example, create a separate function that just handles mapping over 23 00:01:19,175 --> 00:01:23,673 the astronaut and making the calls to getJSON to get each Wikipedia summary. 24 00:01:23,673 --> 00:01:28,709 Above the generateHTML function, I'll create a new function called getProfiles. 25 00:01:33,179 --> 00:01:38,730 Then, I'll cut the entire map method out of the EventListener and 26 00:01:38,730 --> 00:01:41,616 paste it inside the new function. 27 00:01:41,616 --> 00:01:44,969 And let's have the getProfiles function take the parameter json. 28 00:01:48,822 --> 00:01:50,983 Then, in addEventListener, 29 00:01:50,983 --> 00:01:55,977 I'll pass getJSON a reference to getProfiles as the second argument. 30 00:02:03,651 --> 00:02:07,929 Separating the code into functions with descriptive names does make the code 31 00:02:07,929 --> 00:02:08,860 easier to read. 32 00:02:08,860 --> 00:02:13,262 Still, having to manage all the different functions could make the program's flow 33 00:02:13,262 --> 00:02:16,305 hard to follow and could make it easier to introduce bugs. 34 00:02:16,305 --> 00:02:20,260 For instance, someone looking at this code for the first time might have to peruse 35 00:02:20,260 --> 00:02:23,816 through the details of each function, especially the callback sequence 36 00:02:23,816 --> 00:02:26,474 to figure out exactly what the program is trying to do. 37 00:02:28,228 --> 00:02:33,520 In addition, callbacks, along with the XML http request API can be a bit too 38 00:02:33,520 --> 00:02:38,730 complex to use and manage compared to the modern data fetching API tools and 39 00:02:38,730 --> 00:02:43,133 syntax JavaScript introduced in ES 2015 and ES 2017. 40 00:02:43,133 --> 00:02:47,393 Next, you're going to start working with Promises in JavaScript where you'll learn 41 00:02:47,393 --> 00:02:50,659 a more straightforward alternative for executing, composing, 42 00:02:50,659 --> 00:02:52,366 and managing asynchronous code. 43 00:02:52,366 --> 00:02:57,002 You'll experience how Promises better help you follow an async program's flow and 44 00:02:57,002 --> 00:02:59,689 make it easier to handle errors in your program.