The Hard Parts v2 Course

Thread of Execution

When JS runs code, it:

Functions

Code we save ('define') functions & can use (call/invoke/execute/run) later with the function's name & ().

Execution Context

Created to run the code of a function - has 2 parts:

Call Stack

The bottom of the call stack is always the global execution context.

As functions are invoked, they are put onto the call stack and evaluated.

Functions and Callbacks

Generalized Functions

Higher order functions

The example used is a function copyArrayAndDivideBy2:

// not flexible
function copyArrayAndDivideBy2(array) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i] / 2);
  }
  return output;
}

// the example used
function copyArrayAndManipulate(array, instructions) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(instructions(i));
  }
  return output;
}

function multiplyBy2(input) {
  return input * 2;
}

const result = copyArrayAndManipulate([1, 2, 3], multipleBy2);

// my personal curried preference
function copyArrayAndManipulate(instructions) {
  return function(array) {
    const output = [];
    for (let i = 0; i < array.length; i++) {
      output.push(instructions(i));
    }
    return output;
  };
}
copy

In the above example, copyArrayAndManipulate is the higher-order function. multiplyBy2 is the callback function.

Anonymous vs arrow functions

Here is a link to the callback exercises.

Closure

Functions with memories:

The above all starts with returns a function from another function.

function createFunction() {
  function multiplyBy2(num) {
    return num * 2
  }
  return multiplyBy2
}

const genFunc = createFunction()
const result = generatedFunc)(3)
copy

With closures, the local context that it was called in comes back with it when the closure is returned. A "backpack" of live data. This data can be updated and given back to the global context after the local context of the closure is run every time.

The other benefit is the "privisation" of variables in the closure scope that you cannot access directly.

Technical Definition + Review

So what is the name of this "backpack"? The variable environment. Another name is COVE - closed over variable environment. The last acronym used in this talk is PLSRD: Persistent lexically or static scope reference data. We can also simply call it the closure.

There is a link to a great artcile on closures.

Practical Applications

Closures give a new toolkit for writing professional code.

The closure exercises are here

Async JS

Single threaded execution

The core JS engine has 3 parts:

But we need more:

Async browser features

The behaviours that happen due to this asynchronousity requires interaction with a world outside of JS now.

Callback Queue & Event Loop

The example here questions what happens on setTimeout(() => console.log('hello'), 0).

// what happems?
function printHello() {
  console.log('hello');
}
function blockForOneSec() {
  // block for one sec logic
}

setTimeout(printHello, 0);
blockerForOneSec(); // blocks thread
console.log('me first'); // this still runs before printHello due to the rules of the callback queue
copy

It explains how after the timeout has run, the callback function is first put onto the "callback queue". The event loop after blockForOneSec still runs the console.log function as the callback queue priority is put to the back of the event queue.

Some of the problems with the callback queue:

Promises

The ES6 solution to priority: Promises. Using two-pronged "facade" functions that both:

function display(data) {
  console.log(data);
}

// one consequence: immediately pulls out special Promise object with a value and an onFufilled property (empty array).
// the second: Web browser API createds a network request
const futureData = fetch(url);
futureData.then(display);

console.log('me first!');
copy

When the data comes back from the response, it will go into the Promise object value property.

The empty array can have an functions triggered to run when the data comes back in to the value property. The data back is put in as the parameter for that function being run from the onFulfillment array that is filled from the then keyword.

Here is the example given for the call order once the function comes back:

function display(data) {
  console.log(data);
}
function printHello() {
  console.log('Hello');
}
function blockForOneSec() {
  // block for one sec logic
}

setTimeout(printHello, 0); // runs last as the call comes from the callback queue
const futureData = fetch(url);
futureData.then(display); // display takes priorty over callbacks due to the microtask queue

blockForOneSec();
console.log('me first!'); // still runs first
copy

The rules of the queues

Hold promise-deferred functions in the microtask queue and callback function in the task queue (callback queue). When the Web Browser Feature (API) finishes, add the function to the call stack (ie run the func) when the call stack is empty & all global code run (have the event loop check this condition).

Prioritize functons in the microtask queue over the Callback queue.

Other terms related to async

Classes & Prototypes (OOP)

Objects store functions with associated data

This is the principle of encapsulation.

const user1 = {
  name: 'Will',
  score: 3,
  increment: function() {
    user1.score++;
  },
};

user1.increment();
copy

You could also use Object.create(null) then assign properties to the object if it is assigned to a variable.

Factory Functions

Factory functions are used to build out objects.

function userFactory(name, score) {
  const newUser = {};
  newUser.name = name;
  newUser.score = score;
  newUser.increment = function() {
    newUser.score++;
  };
  return newUser;
}

const user1 = userFactory('Jill', 0);
const user2 = userFactory('Jack', 2);
user1.increment();
copy

Prototype Chain

Is the better way than putting a copy of functions onto every single object?

We can use the Prototype chain. We have the interpreter - if it doesn't find the function on the object (in this case, the user) - look up that protoype object to see if it is there.

function userFactory(name, score) {
  const newUser = Object.create(userFunctionStore);
  newUser.name = name;
  newUser.score = score;
  return newUser;
}

const userFunctionStore = {
  increment: function() {
    newUser.score++;
  },
  login: function() {
    console.log('Logged in');
  },
};

const user1 = userFactory('Jill', 0);
const user2 = userFactory('Jack', 2);
user1.increment();
copy

The Prototypal Link

Under the hood, there is a hidden property on the objects we've been creating __proto__ and it has a link to userFunctionStore.

hasOwnProperty Method

We can use hasOwnProperty which comes from the head honcho, the Object prototype that all objects link to at the top of the prototype chain.

If we use an exammple of user1.hasOwnProperty('store'), it will move up the prototype chain looking for that value.

this Keyword

The default value for this is from the global namespace.

If you use .call (or .apply) with this as the argument, it would keep the scope as well.

This can now be avoided with the this assignment being lexically scope by ES6's arrow functions.

new Keyword

The new keyword can be used to automate the factory function.

userFactory.prototype.increment = function() {
  this.score++;
};

const user1 = new userFactory('Jack', 2);
copy

This automatically sets the __proto__ value and an empty object at this as well. The __proto__ points to a prototype object of userFactory in the above example.

class Keyword

This section introduced the idiomatic way to define when the new keyword needs to be used to instantiate an object. In addition, the syntactic sugar of the class keyword is discussed, and how it really is no different under the hood than what was demonstrated in previous sections.

Developers use the convention of the capital letter to help developers know that the new keyword should be used for a factory function.

class UserCreator {
  // Syntactic sugar for the factory
  // function.
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }

  // These methods are syntactic sugar for the
  // prototype ie this transpiles to
  // UserCreator.prototype.increment.
  increment() {
    this.score++;
  }

  login() {
    console.log('login');
  }
}

const user1 = new UserCreator('Eva', 0);
user1.increment();
copy