Lesson 10: Trouble understanding destruct pattern with useWeb3Contract

[0xCardiE]

I am looking at React code where we call useWeb3Contract hook, which I kind of understand but not really

    const {
        runContractFunction: enterRaffle,
        data: enterTxResponse,
        isLoading,
        isFetching,
    } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRaffle",
        msgValue: entranceFee,
        params: {},
    });

I get that we pass on the right side of equation parameters for useWeb3Contract function and on the left we should get(destruct?) results from it.
What gets me confused is that we are also biding functions to left side so in the end we have runContractFunction: enterRaffle
which we end up calling as async function (later in code as onClick) so that part is kind of confusing to me. Dont know what it really is and how it works, what basic knowledge about JS or react am I missing to feel comfortable to know what is happening here?

[iangechuki]

when we say

 const {runContractFunction: enterRaffle}=useWeb3Contract({})

we are getting runContractFunction from useWeb3Contract hook.But lets say there are other five functions that are going to interact with the contract in this same page they will have the same name of runContractFunction,so we rename it to enterRaffle.so from now our function will no longer be called runContractFunction .It will be enterRaffle.

Another example is:

let users={
name:"John",
address:2
}
//if we want the name we will say
let {name}=users
//if we want to be more explicit we will change name to username.like this:
let {name:username}=users
//when destructuring basically we are getting the individual item in object directly .In above example if would have said:
let username=users.name
//it is just the same thing only that destructuring  is cleaner way of doing it

about calling enterRaffle with async ,it is because the function returns a promise.Promises in javascript are things which may take sometime to be resolved and you have to wait for a while .its a whole another topic which may take you sometime to understand it .here is a freecodecamp video to help you get a grasp of it.

[0xCardiE]

thnx guys. I needed to brush up a bit on how imports and exports work in JS.
Also its all in TS function that is called which I need to understand better and learn TS a bit also to get what is going on in that function and how it is defined.

export declare const useWeb3Contract: (params: Web3ExecuteFunctionParameters) => {
    runContractFunction: ({ throwOnError, onComplete, onError, onSuccess, params: fetchParams, }?: import("../../internal/_useResolveAsyncCall").ResolveCallOptions<unknown, Web3ExecuteFunctionParameters>) => Promise<unknown>;
    data: unknown;
    error: Error | null;
    isFetching: boolean;
    isLoading: boolean;
};