Long description

Set 1 is labeled This doesn’t work as expected because async function is still asynchronous: Line 1: displayAnimatedLoadingImage open parenthesis close parenthesis semicolon, is labeled 1. Line 2: const data equals getApiData open parenthesis close parenthesis semicolon is labeled 2 call to our async function ellipsis. Line 3: console dot log open parenthesis data close parenthesis semicolon is labeled 4 we don’t have data yet so this output is null. Line 4: displayApiData open parenthesis data close parenthesis semicolon is labeled 5 we don’t have data yet so this won’t work properly. Line 5: doSomethingNotDependentOnData open parenthesis close parenthesis semicolon is labeled 6 not dependent on data so okay. Line 6: async function getApiData open parenthesis close parenthesis open curly brace. Line 7: const response equals await fetch open parenthesis open double quotes some u r l close double quotes close parenthesis semicolon is labeled 3 call happens then waits for response. Line 8: data equals await response dot json open parenthesis close parenthesis semicolon is labeled 7 happens at some point in the future. Line 9: hideAnimatedLoadingImage open parenthesis close parenthesis semicolon is labeled 8 happens at some point in the future plus 1. Line 10: close curly brace.

Set 2 is labeled This works as expected because data-reliant code is called after await but within sync function: Line 1: displayAnimatedLoadingImage open parenthesis close parenthesis semicolon is labeled 1. Line 2: getApiData open parenthesis close parenthesis semicolon is labeled 2 call to our async function. Line 3: doSomethingNotDependentOnData open parenthesis close parenthesis semicolon is labeled not dependent on data so okay. Line 4: async function getApiData open parenthesis close parenthesis open curly brace. Line 5: const response equals await fetch open parenthesis open double quotes some u r l close double quotes close parenthesis semicolon is labeled 3 call happens then waits for response. Line 6: data equals await response dot json open parenthesis close parenthesis semicolon is labeled 5 happens at some point in the future. Line 7: hideAnimatedLoadingImage open parenthesis close parenthesis semicolon is labeled 6 happens at some point in the future plus 1. Line 8: console dot log open parenthesis data close parenthesis semicolon is labeled 7 we have data now so output is data. Line 9: displayApiData open parenthesis data close parenthesis semicolon is labeled 8 we have data so will work. Line 10: close curly brace.