async callbacks, the land before promises

Question 1

What would the output be for the following code and why

script1.js contains console.log(“welcome to script 1”);
script2.js contains console.log(“welcome to script 2”);

<script>
function loadScript(src) {
        let script = document.createElement("script");
        script.src = src;
        document.head.append(script);
        console.log("end of loadScript");
      }
      loadScript("./scripts/script1.js");
      loadScript("./scripts/script2.js");
      console.log("hello there");
</script>

Answer 1

// output
end of loadScript
end of loadScript
hello there
welcome to script 1
welcome to script 2

Loading a script (script.src = src) is asynchronous so it will start loading the script but code execution will continue without waiting for it to complete. As the code execution continues we see the “end of loadScript” logs and then “hello there”. Lastly the scripts load and there logs “welcome to script 1/2” run.

Question 2

What console.logs will I see with the following code

script 1 contains:
console.log(“welcome to script 1”);
const myFunc1 = () => {
console.log(“this is myFunc1”);
};

script 2 contains:
console.log(“welcome to script 2”);
const myFunc2 = () => {
console.log(“this is myFunc2”);
};

index.html contains:

function loadScript(src, callback) {
// creates a

 tag and append it to the page
        // this causes the script with given src to start loading and run when complete
        let script = document.createElement("script");
        script.src = src;
        document.head.append(script);
        script.onload = () => callback();
        console.log("end of loadScript");
      }
      loadScript("./scripts/script1.js", () => {
        myFunc1();
      });
      loadScript("./scripts/script2.js", () => {
        myFunc2();
      });

  console.log("hello there");

Answer 2

end of loadScript
end of loadScript
hello there
welcome to script 1
this is myFunc1
welcome to script 2
this is myFunc2

What happens is…

The script in index.html runs
loadScript is called
- it initiates a script loading - script.src = src (code execution continues)
- it attaches a callback to the onload event for the script (code execution continues)
- “end of loadScript” is printed
loadScript is called again same process repeats so “end of loadScript” is printed
“hello there” is printed
Reached the end of the script in index.html
script 1 loads and is executed
- When the script executes “welcome to script 1” is printed
- the onload event is fired (after script is loaded and executed) and the callback is ran
- The callback calls myFunc1() which prints “this is myFunc1”
script 2 loads and is executed
- When the script executes “welcome to script 2” is printed
- the onload event is fired (after script is loaded and executed) and the callback is ran
- The callback calls myFunc2() which prints “this is myFunc2”

Question 3

When does script.onLoad trigger?

Answer 3

It triggers after the script is loaded and executed.

Question 4

What console.logs will you see with the following code?

script 1 contains
console.log(“welcome to script 1”);
const myFunc1 = () => {
console.log(“this is myFunc1”);
};

script 2 contains
console.log(“welcome to script 2”);
const myFunc2 = () => {
console.log(“this is myFunc2”);
};

script 3 contains
console.log(“welcome to script 3”);
const myFunc3 = () => {
console.log(“this is myFunc3”);
};

index.html contains
function loadScript(src, callback) {
// creates a

 tag and append it to the page
        // this causes the script with given src to start loading and run when complete
        let script = document.createElement("script");
        script.src = src;
        document.head.append(script);
        script.onload = () => callback();
        console.log("end of loadScript");
      }
      loadScript("./scripts/script1.js", () => {
        myFunc1();
        loadScript("./scripts/script2.js", () => {
          myFunc2();
          loadScript("./scripts/script3.js", () => {
            myFunc3();
          });
        });
      });

  console.log("hello there");

Answer 4

end of loadScript
hello there
welcome to script 1
this is myFunc1
end of loadScript
welcome to script 2
this is myFunc2
end of loadScript
welcome to script 3
this is myFunc3

Question 5

What is the “error-first callback” style?

Answer 5

1. The first argument of the callback is reserved for an error if it occurs. Then callback(err) is called.
2. The second argument (and the next ones if needed) are for the successful result. Then callback(null, result1, result2…) is called.

So a single callback function is used both for reporting errors and passing back results.

CODE EXAMPLE

loadScript(‘/my/script.js’, function(error, script) {
if (error) {
// handle error
} else {
// script loaded successfully
}
});

Question 6

What is “callback hell” or the “pyramid of doom.” ?

Answer 6

It is the name for when the “callback-based” style of asynchronous programming gets more and more nested as asynchronous actions are scheduled in order.