Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

Am I explaining this correctly?

Here's my function:

exports.getProducts = (req, res, next) => {
  Product.fetchAll(products => {
    res.render("shop/product-list", {
      prods: products,
      pageTitle: "All Products",
      path: "/products"
    });
  });
};

Open in new window


fetchAll looks like this:

static fetchAll(cb) {
    getProductsFromFile(cb);
}

Open in new window


...and getProductsFromFile looks like this:

const getProductsFromFile = cb => {
  fs.readFile(p, (err, fileContent) => {
    if (err) {
      return cb([]);
    }
    cb(JSON.parse(fileContent));
  });
};

Open in new window


Tell me, please, if I'm explaining this correctly. I'm attempting to understand this stuff to the degree when I can explain it to others and I'm having a hard time.

What I've been taught / told is that I'm looking at an expression that's being passed as an argument to another function. That's the quintessential advantage / utility of a callback.

So, this:

products => {
res.render("shop/product-list", {
prods: products,
pageTitle: "All Products",
path: "/products"
}

Open in new window


...is being passed as an argument to:

static fetchAll(cb) {
    getProductsFromFile(cb);
}

Open in new window


BTW: An expression represents the "guts" of a function, correct?

Thing is, if I try to envision that based on face value, I see something like this:

static fetchAll(products => {
res.render("shop/product-list", {
prods: products,
pageTitle: "All Products",
path: "/products"
}) {
    getProductsFromFile(products => {
    res.render("shop/product-list", {
    prods: products,
    pageTitle: "All Products",
     path: "/products"
     });
}

Open in new window


That seems both convoluted and bogus.

I'm thinking that for all intents and purposes, the "getProductsFromFile" method would be written like this:

getProductsFromFile(products)

Open in new window


Instead of:

products => {
    res.render("shop/product-list", {
    prods: products,
    pageTitle: "All Products",
     path: "/products"
     });
}

Open in new window



All the examples I've seen have very basic functions being used to illustrate what a callback is. This is far more complex and, as a result, seems a little more complicated.

What I'm "smelling" is that when you pass this:

products => {
res.render("shop/product-list", {
prods: products,
pageTitle: "All Products",
path: "/products"
}

Open in new window


...as an argument into:

static fetchAll(cb) {
    getProductsFromFile(cb);
}

Open in new window


...you're looking at "products" as being a variable that's ultimately going to hold the value coming back from "getProductsFromFile."

It's tempting, perhaps, to look at the entire expression associated with the "products" variable as somehow being processed by the "getProductsFromFile" method.

It's not.

Rather, "products" is the variable that's holding the value coming from "getProductsFromFile" and that's what's going to be forwarded to the "product-list.ejs" file.

Is that right?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Bruce Gust

ASKER

Julian!

As always, thanks for taking the time to elaborate on the "why" and not just the "what."

I'm explaining this back to you...

The reason I was having a hard time is because of the way I was processing

static fetchAll(cb) {
    getProductsFromFile(cb);
}

Open in new window


...specifically when we hit the "getProductsFromFile" piece:

const getProductsFromFile = cb => {
  fs.readFile(p, (err, fileContent) => {
    if (err) {
      return cb([]);
    }
    cb(JSON.parse(fileContent));
  });
};

Open in new window


When we got to that code, that's where it became confusing to me because was looking at the "cb" code like this:

 [b]function products()[/b] {
    res.render("shop/product-list", {
      prods: products,
      pageTitle: "All Products",
      path: "/products"
}

Open in new window


Despite having read and studied and written out several basic examples of callbacks, I was still drawn to the idea that "products" was the name of the function and not the variable that function was expecting to process.

That's why when we hit the "getProductsFromFile" portion, I was confused because I couldn't see how the parsed json file was suddenly going to be "products." But after having read through your explanation, I now see where my perspective was flawed and I can't tell you just how many light bulbs are going off right now.

I'm slowly making my way through a Udemy tutorial and I'm forcing myself to "parK" and be certain that I'm understanding the concepts being covered and not just copying and pasting. This was one of those areas where I was a little hesitant.

I'm closing the question and giving you the points. If you don't mind, however, what is the correct verbiage for what's happening in this scenario as far as...

I'm passing a function as an argument into the fetchAll function or...

I'm passing an expression as an argument into the fetchAll function

Which is it and why?

There's a lot of info out that isn't always especially clear,

Thanks, Julian!
Thanks!
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial