accessing changed value of exported variable

Question

I have a module "a" which exports a variable initiated as null. This variable is imported into module "b".

Following some changes to the initial variable, I try to access it again from module "b", only to find I get the original null value.

Aren't these variables being imported as reference? Meaning, they should reflect any changes made to them at a later point in runtime.

// main.js
import * as a from './a.js'
import * as b from './b.js'

// a.js
let test = null
export default test

export function change() {
  test = 'test'
  console.log(['in a.js change()', test])
}
console.log(['in a.js global', test])

// b.js
import test, { change } from './a.js'

console.log(['in b.js, pre a.change()', test])
change()
console.log(['in b.js, post a.change()', test])


/*
output:
Array [ "in a.js global", null ]
Array [ "in b.js, pre a.change()", null ]
Array [ "in a.js change()", "test" ]
Array [ "in b.js, post a.change()", null ]   WHY ISN'T THIS = "test" ?
*/

Answer 1

Aren't these variables being imported as reference? Meaning, they should reflect any changes made to them at a later point in runtime.

No. When you imported the variable, you made a copy of it into a new variable. That copy will not change if the original variable gets something new assigned to it.

When you do this:

import test, { change } from './a.js'

You're assigning the exported default value into a new variable named test. That new variable has no connection with the other variable any more.

There are several ways to provide access to the changed variable:

1. Export an object where the variable is a property on that object. Then, in your original module, change the value of that property. In this case, the imported module will have a pointer to the same object so when you access the property on that object, you will see the new value.

2. Export a method that retrieves the current value of the variable from within the module.

3. Create an event which an outside module can listen for and fire that event anytime the value of the variable changes.

Remember that plain values are assigned by making a copy of the value and inserting it into the new variable. Objects, on the other hand, are assigned by making a copy of the pointer to the same object and putting that pointer into the new variable. So, with objects the new variable contains a pointer to the same object.