Question

2

export a variable inside a function to be used in other modules

rated 0 times [ 7] [ 5] / answers: 1 / hits: 6152 / 2 Years ago, mon, february 7, 2022, 12:00:00

I'm quite new to programming. I have spend last 3 days trying to figure this out. So any help really appreciate it.

I have access to clientID inside a for loop. (Please look at the last line in the code below). There is only one ClientID which I'm successfully able to print.

I want this client ID to be exported from this module so that I can use it in other modules.

import { Configurations } from './models';



type MethodNames = 'init' | 'event';



export const DEFAULT_NAME = '_hw';



interface LoaderObject { 

    q: Array<[MethodNames, {}]>;

}



export default (

    win: Window,

    defaultConfig: Configurations,

    scriptElement: Element | null,

    render: (element: HTMLElement, config: Configurations) => void

) => {

 

    const instanceName =

        scriptElement?.attributes.getNamedItem('id')?.value ?? DEFAULT_NAME;

    const loaderObject: LoaderObject = win[instanceName];

    if (!loaderObject || !loaderObject.q) {

        throw new Error(

            `Widget didn't find LoaderObject`);

    }



    if (win[`loaded-${instanceName}`]) {

        throw new Error(

            `Widget already loaded`)

        );

    }



    let targetElement: HTMLElement;





    for (let i = 0; i < loaderObject.q.length; i++) {

        const item = loaderObject.q[i];

        const methodName = item[0];

        console.log(methodName);

        if (i === 0 && methodName !== 'init') {

            throw new Error(

                `Failed to start Widget`);

        } else if (i !== 0 && methodName === 'init') {

            continue;

        }

      

        const valueObject = Object.assign(defaultConfig, item[1]);

        const clientID = valueObject.clientID

        console.log("ClientID", clientID)

    }



//rest of the code....

I have also tried this. defined a variable clientID outside the for loop and then storing value from inside the for loop. But on printing, I'm getting undefined

var clientID;

console.log("....last Client ID", clientID)

   const valueObject = Object.assign(defaultConfig, item[1]);

    clientID = valueObject.clientID

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

dominics questions

1 react setState() not triggering re-render

Wed, Apr 6, 22, 00:00, 2 Years ago

1 how to make TextInput with dropdown/picker in react-native?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to remove extra empty space and scroll bar at the bottom of my html page?

Wed, Jan 20, 21, 00:00, 3 Years ago

1 AgGrid: applyColumnState is not a function

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Angular: serialize/unserialize in JSON HttpRequest and HttpResponse object

Wed, Aug 12, 20, 00:00, 4 Years ago

View All

answered 2 Years ago braidenv · Accepted Answer

Your issue is about your variables' scopes. Let's start with a simpler version, without for loop:

default export (a: object) => {

    const variableToExport = a;

}

The reason why you can't directly access variableToExport is that it is defined inside the function, and not outside. To deal with it, you have 2 solutions:

1. Assign to a variable in the outer scope.

The code would look like:

/! Read the text below before using this snipplet /!

export let variableToExport;



default export (a: object) => {

    variableToExport = a;

}

Here, you're strictly speaking exporting the variable. Since it's defined outside the function, you can access it outside the function and thus, you can export it. HOWEVER, IT COULD BE A MISTAKE. If you call twice the exported function with different values for a, the variable variableToExport would only have the value corresponding to the second call, and not the first. If the value of variableToExport should not depend on a, it could be OK, but otherwise it seems risky.

2. Returning the value

Since your function would be called to get the variableToExport, you could return it:

default export (a: object) => {

    const variableToExport = a;

    return variableToExport;

}

In case you have multiple things to return, you can build an object to return them all:

default export (a: object) => {

    const retValue = {

        "variableToExport": a,

        ... other variables to return

    }

    return retValue;

}

Then, you can access it from another module (with or without a destructuring assignment):

import foo from 'path/to/module'



const { variableToExport, otherVariable } = foo(a);

This second way is safer than using a "global" variable, as the variableToExport can't have a value that correspond to another call to the function.

Now, for the case of your variable in the for loop, you have a similar issue: you can't access to the variable outside the for loop:

default export (bar: array) => {

    for (const elem of bar) {

        const clientID = elem.clientID;

    }

    return clientID; // Nope, clientID does not exist here

}

To deal with that, the first option works:

default export (bar: array) => {

    let clientID; // Not const, because it will change

    for (const elem of bar) {

        clientID = elem.clientID;

    }

    return clientID;

}

This will thus return the last clientID (and since you said you have only one clientID, it should be ok), but it would be a little better of you could get the value of clientID outside the loop, except if you intend on exporting only the last value of clientID.

I hope that, even though you might not understand everything, you understand how to export the client ID you want to export, and that the key words I gave you allows you to easily find what you might need on the internet more easily than these 3 last days. Ask me if anything isn't clear enough, I'll answer when I'll have time