Lesson 8 - JS Syntax Question

[alkali333]

Prior to this course, I had not written JS for a very long time, and now I'm still struggling with the some of the syntax. What breaks my brain is when a function takes a function as an argument which itself takes a parameter . So for example

        provider.once(transactionResponse.hash, (transactionReceipt) => {
            console.log(
                `Completed with ${transactionReceipt.confirmations} confirmations`
            )
        })

I understand that the once() function takes an event, and a listener function. But where does transactionReceipt come from? How do we get that to pass into our listener function?

Can somebody please explain the above code in plain English?

I am not sure whether to carry on with this course or take a break and learn some more JS. I've managed to get everything working so far, but there are quite a few bits of code that remain a mystery to me!

[alymurtazamemon]

@alkali333 The second parameter (function) is the result of the first parameter.

provider.once(transactionResponse.hash, (transactionReceipt) => {
    console.log(
        `Completed with ${transactionReceipt.confirmations} confirmations`
    )
})

Here we are saying to provider to listen to this response hash transactionResponse.hash and once it gets called pass the result of it here (transactionReceipt). And the second parameter is callback where we explore our result further

[alkali333]

Ah thanks, that makes more sense to me. I think I was just struggling with the concept of callback functions, but I am currently doing a mini course in async JS programming and I am getting more familiar with it.

[mpwanyi256]

@alkali333 Let me see if I can give you the best explanation possible here. Imagine we want to create a function that creates a user account and then sends the user an email welcoming them to the platform.

In this case, we can approach it in 2 ways,

1. We can use async await approach for example;

const response = await createUserProfile(username, password)
const sendEmail = await sendWelcomeEmail(response.email)

2. The second approach is to use a callback function. In this case createUserProfile method can be refactored to accept a second parameter as another function. So the function passed will be called once a user account is created. We could have something like this.

const userData = { username: 'sam@website.com`, password: 'test-password' }
async function createUserProfile(userData, callBack) {
  try {
    //Create user account and get response
    const response = await createUserAccount(userData)

     // Call the call back function passed with error and response data since it's possible to have an error
    callBack(null, response)
  } catch(e) {
    callBack(e, null)
  }
}

So to use such a function, we would use it this way;

await createUserProfile(userData, (error, response) => {
   if (error) {
     throw error;
   }
   return await sendWelcomeEmail(response.email)
})

[krakxn]

Good explanation!

[alkali333]

Thanks! This is a great explanation! I am starting to see how this stuff works. I think once I properly understand callbacks, I will be able to progress a lot faster with this web3 course.