Non-blocking I/O

From operations on the database, HTTP requests, and reading/writing to disc, pretty much all input and output in Javascript is non-blocking. By that, I mean that there is a single stream of operations for the interpreter to execute. I imagine them to be like a queue of people waiting in line, each waiting for the interpreter to perform their operation, and chained together through callback functions. After each operation completes, a message is enqueued along with the provided callback function. Later down the track the message is dequeued and the callback fired.

For example:

request('http://www.youtube.com', function(error, response, body) {
  console.log(body);
});

console.log('Done!');

Here, you might expect that the request function to google.com is executed, outputting its body to the console, and then 'Done!' is output to the console. Instead what happens is that while the request function is executed first, it passes an anonymous function as a callback to execute when a response is available. “Done!” is immediately output to the console, and then sometime in the future, the response comes back and the callback is executed, outputting its body to the console.

The Event Loop

It's important to understand how the runtime stores these callbacks and in what order they are executed. Conceptually, JavaScript runtime environments use a queue and a loop. The queue stores the list of messages to be processed along with their provided callback functions. The messages are added to the queue in response to certain external events like clicks / HTTP requests.For example, let's say that an event listener is set up to change the font colour of a page when a certain button is clicked. When the button is clicked, the message is enqueued, and enters into the event loop, which follows the pattern:

while there are messages in the queue do
dequeue the first message
execute its callback // the font colour changes

Another interesting example is using setTimeout, which by nature is asynchronous, so the provided callback will be executed as part of a different queued message, on a future run of the event loop.

function apple() {
  console.log("an apple a day");    // 1ST
  setTimeout(grape, 0);
  console.log("keeps the doctor away"); // 2ND
  banana();
}

function grape() {
  console.log("a bunch of grapes"); //4TH
}

function banana() {
  console.log("banana split");  //3RD   
}

apple();

In this example, setTimeout is being invoked, passing the callback grape with a timeout of 0 milliseconds. You might be tempted to see the 0 and think that grape will be fired immediately. In reality, because setTimeout is non-blocking, regardless of the specified time (in this case, almost* instantly) a separate message is enqueued containing grape as its callback. 'a bunch of grapes' is logged last, as it has to wait until the next run of the event loop for the callback to the fired.

*the way that setTimeout is usually implemented, it is just meant to execute after a given delay, and once the browser's thread is free to execute it, so even if you say 0 it might not be exactly 0 ms. Unless there's some serious backlog of activity though, a human still won't be able to notice any difference !

One last comment: if in the same call frame two calls are made to setTimeout – passing the same value for a second argument – their callbacks will be queued in the order of invocation.

Summary

With a simple queue and event loop, JavaScript allows us to build systems around a collection of asynchronously-fired callbacks, freeing the runtime to handle concurrent operations while waiting on external events to happen. In the next post I'll walk through the setup of a basic server using node and express.

Checkout the mdn documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

In a general algorithm this looks something like:
1. Have I arrived at a viable solution?
1a) Yes: return true! (or whatever makes sense for a successful outcome)
1b) No: So where can I go from here? Choose an alternative and go there. Is this new path a solution? This is where the recursive call comes into play - restart the algorithm from the new location.
2. Are there any remaining alternative routes? If there are, choose one and start over.
3. Finally, when I am out of places to go, return false (or whatever makes sense for a termination outcome)

I'll apply this logic to two examples:

Rock, Paper, Scissors

This problem asks you to write a function that generates every sequence of throws a single player could throw over a three-round game of rock-paper-scissors. The output should look something like:
[["rock", "rock", "rock"],
["rock", "rock", "paper"],
["rock", "rock", "scissors"],
["rock", "paper", "rock"],
...etc...
At first glance, this could easily be solved by nesting 3 for-loops together, one for each round:

var rockPaperScissors = function () {
  var options = ["rock", "paper", "scissors"];
  var result = [];
  for (var i = 0; i < options.length; i++) { // for each option
    for (var j = 0; j < options.length; j++) { // loop through the other options
      for (var k = 0; k < options.length; k++) {
        var combination = [options[i], options[k], options[j]];
        result.push(combination);
      }
    }
  }
  return result;  
};

But what if we don't know how many rounds there will be? This can be solved through recursive backtracking by starting off with an empty array, and each time checking if the length of that array has built up to the number of rounds specified in the arguments to the function. Until then, an inner function looks through all of the options and calls itself, passing the growing results array.

var rockPaperScissors = function (rounds) {
  var options = ["rock", "paper", "scissors"];
  var result = [];
  rounds = rounds || 3;

  var findOutcome = function (playedSoFar) {
    // recursive to find all possible combinations
    if (playedSoFar.length === rounds) {
      return result.push(playedSoFar); // .push() returns length of resulting array
    } else {
      for (var i = 0; i < options.length; i++) {
        findOutcome(playedSoFar.concat(options[i])); // concat adds a val or an array to an array
      }
    }
  };

  findOutcome([]);
  return result;
};

N-Queens

This algorithm returns the number of nxn chessboards that exist, with n queens placed such that none of them can attack each other. In the below implementation, there are a couple of helper functions I refer to. Firstly, the board passed in is just a 2D array representing an n by n matrix filled with 0's. togglePiece() simply changes the cell at the given column and row to 1 or 0, depending on what it was before. hasAnyQueensConflicts() is the culmination of a number of checks up and down the columns, and across the board diagonals, checking for any other queens already placed on the board and returning true if any conflicts exist.

As you can see, it actually follows quite a simple pattern. True to the recursive backtracking general pattern, we start by checking for a successful case - if we have reached the last column, it must mean that we have created a board without collisions, and should add to the count of solutions.

The problem is recursively being divided into the sub problem of placing single queen on the chess board. Then, to identify if the toggled queen resulted in a solution, we can check whether any of the already placed queens attack this position. If yes, then it's safe to move to the next column. If no conflict exists, then place the queen and move on to placing the next queen (i.e. the next row).

  var solveNQueens = function (column, n, board) {
    if (column === n) {
      count++;
      return;
    }
    for (var row = 0; row < n; row++) {
      board.togglePiece(row, column);
      if (!board.hasAnyQueensConflicts()) {
        solveNQueens(column + 1, n, board);
      }
      board.togglePiece(row, column);
    }
  };

  solveNQueens(0, n, board);

Pseudoclassical Inheritance

This type of object inheritance uses:
1. The 'constructor' function (to create objects)
2. The 'new' operator (to create objects)
3. The 'prototype' property (to build the inheritance chain)
Here, the pattern involves creating pseudoclasses using constructor functions, then using 'new' to create instances of the pseudoclass. The prototype property (inherited by all instances of the pseudoclass) contains the methods common to all instances of the pseudoclass.

Prototypal Inheritance

This type of object inheritance uses:
1. 'Object.create' (to create a new object)
2. A parameter object (the prototype for the new object)
As mentioned above, here we are creating new objects directly from existing ones, without any notion of classes.