How to change ES6 imported array

Question

So I have a app built using ES6 modules, I want to clear an array imported as a module in one file and add to it from another file. Pushing to the array works fine, but I can't empty the array in a delete function. Debugging wise the function is called and I get no errors but the array is not cleared.

The array clears if it is included in the same module as the clear function...

below is an example.

    module_1.js
    export let array = [];


//////////////////////////////////////////////////


    module_2.js 
    import { array } from './module_1.js';

    export const func = () => {array.push('hello')};


//////////////////////////////////////////////////

    module_3.js
    import { array } from './module_1.js';

    export const clear = () => {
     let array = [];
}

/////////////////////////////////////////////////

   module_4.js
   import { array } from './module_1.js';
   import { func } from './module_2.js';
   import { clear } fromt './modeule_3.js';

   button.addEventListener('click', func);
   button.addEventListener('click', clear);

Answer 1

In module_3.js you are redeclaring the array variable as let, this will define a local variable scoped to the clear function, removing let will give you the expected result.

export const clear = () => {
   array = [];
};

Answer 2

You cannot reassign a module variable outside of the module where it was declared, even if was defined using let or var .

So, this:

//module1.js
export let foo = 'bar'

foo = 'baz'

//module2.js
import {foo} from './module1.js'

console.log(foo) //baz

...works, while this:

//module1.js
export let foo = 'bar'

//module2.js
import {foo} from './module1.js'

foo = 'baz' //TypeError

console.log(foo)

...does not.

However, mutation of objects is still allowed, that's why .push() works in your second module.

To solve the problem, you have to either:

1. Empty the array using mutation

   You can empty an array by setting its length to zero, but this still modifies a module's data from outside, which isn't the best practice...

    //module_3.js import { array } from './module_1.js'; export const clear = () => { array.length = 0; }

2. Move all mutator methods to a single module

   //module_1.js export let array = []; export const func = () => { array.push('hello') }; export const clear = () => { array = []; }

    //module_2.js import { func, clear } from './module_1.js'; button.addEventListener('click', func); button.addEventListener('click', clear);

3. Create general-purpose functions

   //module_1.js export let array = []; import {func as _func} from './module_2.js'; export const func = () => _func(array) import {clear as _clear} from './module_3.js'; export const clear = () => _clear(array)

    //module_2.js export const func = (array) => { array.push('hello') };

    //module_3.js export const clear = (array) => { array.length = 0; }

    //module_4.js import { func, clear } from './module_1.js'; button.addEventListener('click', func); button.addEventListener('click', clear);