Asynchronous Code & Promises

Node.js is a cross-platform runtime environment and a library for running Javascript applications outside of the browser.  It uses non-blocking I/O and asynchronous events to create a highly performance environment built on Google’s V8 engine.

The engine is consisted of the memory heap (where memory allocations happen) and the call stack (where the stack frames are as code executes).

Asynchronous callbacks–allow us to execute heavy code without blocking the UI and making the browser unresponsive.

You can execute any chunk of code asynchronously by using setTimeout(callback, milliseconds).  setTimeout doesn’t automatically put your callback on the event loop queue.  It sets up a timer, and when that timer expires, your callback will enter the event loop to be executed.

The event loop is a special queue for asynchronous callbacks.  Its job is to monitor the call stack and the callback queue.  If the call stack is empty, it will take the first event from the callback queue and push it to the call stack, which effectively runs it.

Below is an awesome gif showing this process of queueing up asynchronous callbacks and executing them.

asyncPromises are the solution to callback hell.

  • It is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s rejected.
  • A promise may be in one of the 3 possible states: fulfilled, rejected, or pending.
  • All promise instances get a then method which allows you to react to the promise.  then method callbacks  can also be chained.
  • The catch callback is executed when the promise is rejected.

Screen Shot 2018-01-01 at 8.09.19 PM

Sources:

Advertisements
Asynchronous Code & Promises

Function binding

  • setTimeout is a window object method so ‘this’ will always refer to window by default.  (#2)
  • To override ‘this’ default binding, pass in an anonymous function (#1) or use .bind (#5) or .call (.call will invoke the function immediately).
  • setTimeout will automatically invoke the passed in function after wait time.
    • If you want to call the function immediately, use .call (#3) or invoke the function when you pass it in as argument (#4).
  • Good refresher on the differences between call, bind, and apply.
    • Call invokes the function and allows you to pass in arguments one by one.
    • Apply invokes the function and allows you to pass in arguments as an array.
    • Bind returns a new function, allowing you to pass in a this array and any number of arguments.
var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(function() {
  alice.sayHi();
}, 1000);
// #1. alice says hi, after 1 second. 

setTimeout(alice.sayHi, 1000); 
// #2. window says hi, after 1 second.

setTimeout(alice.sayHi(), 1000); 
// #3. window says hi, immediately.

setTimeout(alice.sayHi.call(bob), 1000);
// #4. bob says hi, immediately

setTimeout(alice.sayHi.bind(bob), 1000);
// #5. bob says hi, after 1 second.

Note to self:

When you bind outside setTimeout, you have to save it to a variable in order to keep it bound.  Below is an example of a failed binding of the sayHi function to bob:

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };


alice.sayHi.bind(bob); // this needs to be saved!!

setTimeout(alice.sayHi(), 1000);
// alice says hi, immediately.
Function binding