Question 203436 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How is printAbstraction() getting executed here?

I am trying to figure out this for a long time now.
I am trying to learn about how promises work and found this code in the article How do Promises Work? by Quil.
I can see how sidePromise’s dependencies are gonna be executed, its dependency being squareAreaAbstraction()

But how does squareAreaPromise execute its dependencies?
I mean, we are calling the fulfil(sidePromise,10) explicitly, but where does fulfil() function for squareAreaPromise get called to fulfil its dependencies?

var squareAreaAbstraction = function(side) {
  var result = createPromise();
  fulfil(result, side * side);
  return result;
};
var printAbstraction = function(squareArea) {
  var result = createPromise();
  fulfil(result, console.log(squareArea));
  return result;
}

var sidePromise = createPromise();
var squareAreaPromise = depend(sidePromise, squareAreaAbstraction);
var printPromise = depend(squareAreaPromise, printAbstraction);

fulfil(sidePromise, 10);

function createPromise() {
  return {
    // A promise starts containing no value,
    value: null,
    // with a "pending" state, so it can be fulfilled later,
    state: "pending",
    // and it has no dependencies yet.
    dependencies: []
  };
}

function depend(promise, expression) {
  // We need to return a promise that will contain the value of
  // the expression, when we're able to compute the expression
  var result = createPromise();

  // If we can't execute the expression yet, put it in the list of
  // dependencies for the future value
  if (promise.state === "pending") {
    promise.dependencies.push(function(value) {
      // We're interested in the eventual value of the expression
      // so we can put that value in our result promise.
      depend(expression(value), function(newValue) {
        fulfil(result, newValue);
        // We return an empty promise because `depend` requires one promise
        return createPromise();
      })
    });

    // Otherwise just execute the expression, we've got the value
    // to plug in ready!
  } else {
    depend(expression(promise.value), function(newValue) {
      fulfil(result, newValue);
      // We return an empty promise because `depend` requires one promise
      return createPromise();
    })
  }

  return result;
}

function fulfil(promise, value) {
  if (promise.state !== "pending") {
    throw new Error("Trying to fulfil an already fulfilled promise!");
  } else {
    promise.state = "fulfilled";
    promise.value = value;
    // Dependencies may add other dependencies to this promise, so we
    // need to clean up the dependency list and copy it so our
    // iteration isn't affected by that.
    var dependencies = promise.dependencies;
    promise.dependencies = [];
    dependencies.forEach(function(expression) {
      expression(value);
    });
  }
}

I have tried running and debugging in VS code for over a day but I get lost in the depend() function

Tags:

2

Answers


  1. 0

    This is due to this part of the code:

        promise.dependencies.push(function(value) {
      // We're interested in the eventual value of the expression
      // so we can put that value in our result promise.
      depend(expression(value), function(newValue) {
        fulfil(result, newValue);
        // We return an empty promise because `depend` requires one promise
        return createPromise();
      })
    });

    When you do

    var printPromise = depend(squareAreaPromise, printAbstraction);

    expression is the function printAbstraction. So it adds a dependency that will call printAbstraction(value). WHen you fulfill squareAreaPromise() it executes all its dependencies, and this calls that function.

    Login or Signup to reply.
  2. 0

    I can see how sidePromise‘s dependencies are gonna be executed, its dependency being squareAreaAbstraction()

    No, it’s not. Look at what exactly depend does put in the dependencies array:

    function(value) {
  // We're interested in the eventual value of the expression
  // so we can put that value in our result promise.
  depend(expression(value), function(newValue) {
    fulfil(result, newValue);
    // We return an empty promise because `depend` requires one promise
    return createPromise();
  })
});

    Here, expression is squareAreaAbstraction and result is the squareAreaPromise. So this is calling squareAreaAbstraction with sidePromise‘s value (squareAreaAbstraction(10)), and since that returns another promise, we call depend again to finally fulfill(squareAreaPromise, newValue) when that promise fulfills with newValue (which will be 100).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search