Why do we pass the function the parameter (data) and not (data.message) - why do we pass a parameter at all?

Hi Michael Rushton,

I'm going to do my best to explain this. And it may help your understanding to reverse the process that Guil describes. So instead of starting with the fetch request, how about we start with an idea.

We want to write a function that will generate an image. The way the function works is that we will create an html string and we will set it as the value of a card element's innerHTML.

Because we're trying to create an image, we know our html string will need to include an <img> tag, and we know that image tag will need a src and alt attribute. The src attribute will be set to the value of the url path of the image. Now we could hard code the url path of the image into the <img> tag's src attribute like this: <img src="../my_image". But if we did that, our function wouldn't be very dynamic.

So instead, let's use a placeholder as the url path of the image. To do that we'll add a parameter to our function that will serve as a variable. Let's name that variable urlPath. So now our html string looks something like this: <img src="${urlPath}". And since we're using a parameter within the body of our function which as a whole looks like this:

function generateImage() {
    const html = `
        <img src='${urlPath}' alt>
        <p>Click to view images of ${select.value}s</p>
    `;
    card.innerHTML = html
}

We need to except a parameter in the first line of the function. Like this:

function generateImage(urlPath) {
    const html = `
        <img src='${urlPath}' alt>
        <p>Click to view images of ${select.value}s</p>
    `;
    card.innerHTML = html
}

Now that we have our function, let's send a fetch request to an API.

fetch('https://dog.ceo/api/breeds/image/random') // <= this returns a json res which we pass as an arg into the first then func 
    .then(response => response.json()) // <= this takes that json res and converts it into a js object which we pass an arg into the next json func
    .then(data => generateImage(data.message)) // now we pass the js object as an arg into the generateImage func
// But the js object has multiple key/value pairs
// Perhaps that object looks something like this:
/*
 {
   dogType: "Jack Chi",
   description: "A Jack Chi digging a hole",
   year: 2017,
   message: "https://dog.ceo/images/37iq63hoja"
 }
*/
// Well our generateImage function doesn't need the entire object to work; it only needs the url path of the image
// So instead of passing the entire object, we just pass the object's message property (ie. data.message)

Had Guil written the generateImage function first, he likely would have named the parameter I named "urlPath" something other than data; but because he wrote it after he'd already written the fetch request and chained the then methods to it, he knew he would be passing an argument named data into the function, and so he named the parameter data so they would match up

Hopefully, that makes sense. If not, let me know; I'll try again.