如何从javascript中的另一个模块更改变量值

Question

I am using Webpack as bundler and I can't find answer to my question anywhere.

For example, I have file index.js which contains:

import { Func } from './func.js'
export let foo = 'bar';

Func();
console.log(foo);

I have another file, let's say func.js which contains:

import { foo } from './index.js';
export const Func = () => { foo = 'baz' }

But it isn't possible to change value of variable from another module.

How do you handle such situations if I don't want to move function 'Func' to index.js?

I also know it is possible to mutate objects but using an object is not always an option.

Answer 1

foo is a primitive. You can't change it's the value assigned to it in the other module when it's a primitive, you can only change the value foo has been assigned in scope of the current module.

You could always do it with functions however:

let foo = 'initial value';

export const getFoo = () => foo;
export const setFoo = (val) => (foo = val);

import { getFoo, setFoo } from 'someModule';

getFoo(); // initial value;

// call this when necessary
setFoo('jim'); 

import { getFoo } from 'someModule';

// when called after `setFoo` has been called in the other module
getFoo(); // 'jim'