Posted onJun 22, 2020

Store values in esmodules

#javascript #esmodules #closures

ECMAScript modules its present in every modern browsers today, we can use it to do a lot of tasks, like distributing our reusable code between files and import as they are needed.

Import and execute

You can import a file with modules and then execute without the need of a value in the return of the import.

This will just execute the module.

index.html

<!DOCTYPE html><htmllang="en"><metacharset=utf-8><title>Module execution</title><scripttype="module"src="./module-execution.js"></script><p>This is a valid HTML Markup!</p>

module.js

import'./printHello.js';

printHello.js

console.log('Hello :D');

This example will not working running by just opening the html in your browser, you need to run a server to allow the browser to get the esmodules.

There are simple ways to running a server locally, my go to choice is using npx serve, if you have thenpm 5.2 or greater, you can open the terminal and typenpx serve, it'll start a local server for you.

Notice that you need to add the file extension to a module to import atimport './printHello.js;.
It won't work if you don't add the file extension.

This is an utter useless use of esmodules, but serves the purpose of showing how you can execute javascript from an external module, cool 🧐.

Import values

With esmodules, the most important thing that you can do, its import values (booleans, numbers, strings, arrays, objects, function, and others).

See the example bellow

index.html

<!DOCTYPE html><htmllang="en"><metacharset=utf-8><title>Module values</title><scripttype="module"src="./module-value.js"></script>

module-value.js

importchangeMyValue,{myValue}from'./my-value.js';// Save the value from my-value.jsconstoldValue=myValue;changeMyValue();// Save the updated value from my-value.jsconstnewValue=myValue;// Display values for comparisonconsole.log({oldValue,// falsenewValue// true});

my-value.js

letmyValue=falsefunctionchangeMyValue(){myValue=true};/** * Note: * Don't export default your value * It'll create a new instance of it * And not update :( *  * But that is cool, because we know it now! * */export{myValue};exportdefaultchangeMyValue;

This is other sample (thus have not much utility, besides learning), but here are some new things!

You can see that in the first line frommodule-value.js the import syntax its calling specific values!

There is other new thing, you are changing the value from a variable from other module using an exported function. This gave me the idea, that we can store values in memory using esmodules, and import the data as we please! This example will not do much good to your code, but it shows how to use export, export default and import and destructuring imports.

Let's go to the main focus now!

Store values in memory with esmodules

Now the example can get a little bit trickier, here the simplest example that I could imagine for values in esmodules.

index.html

<!DOCTYPE html><htmllang="en"><metacharset=utf-8><title>Module store! Finally!</title><scripttype="module"src="./module-store.js"></script>

module-store.js

import{addSecretNumber}from'./store-value.js';importuseSecretNumberFromOtherModulefrom'./use-store.js';useSecretNumberFromOtherModule();// return: [ 2, 7, 6, 9, 5, 1, 4, 3 ];addSecretNumber(8);// Add 8 to secret numberuseSecretNumberFromOtherModule();// return: [ 2, 7, 6, 9, 5, 1, 4, 3, 8 ];addSecretNumber('Not a number, but that is ok');// Spoiling the perfect numbers array :(useSecretNumberFromOtherModule();// return: [ 2, 7, 6, 9, 5, 1, 4, 3, 8, 'Not a number, but that is ok' ];

store-value.js

constsecretNumber=[2,7,6,9,5,1,4,3];functionaddSecretNumber(number){secretNumber.push(number);}export{secretNumber,addSecretNumber};

use-store.js

import{secretNumber}from'./store-value.js';functionuseSecretNumberFromOtherModule(){console.log(secretNumber);};exportdefaultuseSecretNumberFromOtherModule;

Here we are! Storing values in a module! But wait, let's go step by step and understand what is happening.

First you need to create a storage in order to use it, you can see that the filestore-value.js its doing it. We are basically using the power of closures to do it.

We created an value:

constsecretNumber=[2,7,6,9,5,1,4,3];

We created a function to change the stored value:

functionaddSecretNumber(number){secretNumber.push(number);}

And exported the value and the function to update the value.

export{secretNumber,addSecretNumber};

This file it's the core of storage, the rest of the code its just an example of using it.

Remember: If we export our value as default, it'll not update with our function. It'll export a new instance of this value.

Remember II: You can export default arrays and object, because JavaScript is a very unique programming language and would create a new instance of the array or object, but not the values inside these values, but I would not recommend anyway. To learn more, go toJust JavaScript, a great way to learn how to create a mental model to understand deeply javascript from (Dan Abramov)[https://twitter.com/dan_abramov].

To use a stored variable, import from the file you created to store.

When you want to use the stored variable, have to import your value, in our example we are importing the value inside the constantsecretNumber.

import{secretNumber}from'./store-value.js';

And that's it! Very easy and simple.

The complex part: Updating the value.To update, you have to use a function that you created in your storage, in our case it wasaddSecretNumber, that have one parameter and add one item to the array inside the constant secretNumber.

import{addSecretNumber}from'./store-value.js';

After you updated the value ofsecretNumber using the functionaddSecretNumber, when you look for the variablesecretNumber next time, it'll have the updated value. Cool.

Warning

There is a important subject to beREALLY CAREFUL about using esmodules to store values.

If you change, it'll change his value for every other file that would want to use the value from the store that you created.
The original value does not come back, unless you specifically create a function to do it! The value its just a simple way to store data to use later.
If you use this to update DOM elements, it will not do it alone, this is not a framework or library.
Have fun and break your code from time to time!

This post was inspired after I tried esmodules in browser doing a calculator likeNumi for the browser.