Episode 7: Use Modules to Organize your Code in Modern #JavaScript | Lightning Web Components #Salesforce

I was a .net developer and I  understand the importance of modular programming. Modular programming involves breaking your code up into logical chunks so that it's easier to access. If you will also use the modular programming in your javascript than the result will be a code which is easy to read and maintain.

Also if you divide your code in modules than you can have a reusable functionality that will be saving additional efforts of writing that code again.

Modules are pretty simple to create and use. An ES6 module is essentially just a file containing some JavaScript. Everything inside the module is scoped to that module only. If you want to make something—like a function, a variable, or a class—available somewhere else, you need to use an export statement. You then use an import statement to specify what you want to use from the exported module. 

Follow below steps to understand it better- 

Step 1: Login to playcode.io and create a new JS file module1.js

Step 2: In this JS file we will create a function and export it, please use below code for the same

1 2 3 4 5

export function printMsg(message){ const div=document.createElement('div'); div.textContent=message; document.body.appendChild(div); }

Step 3: Create another module and name it module2.js, from this module we will export two let variables.

1 2 3 4

//module2.js let msg1='Hello World!'; let msg2='This message was loaded from module.'; export{msg1, msg2};

Step 4: Now we have created two modules successfully, now let's use them in a JS file.

Step 5: To use these modules we will use the import keyword, check the code below.

1 2 3 4 5 6

import {printMsg} from './module1.js'; import {msg1,msg2} from './module2.js'; printMsg(msg1, msg2); //Output: Hello World! This message was loaded from modules.

In the code we've looked at so far, the function and variables exported were imported using the same names.

But what if you wanted to rename the functions and variables and use different names? You can do this using an alias. In the last example we used the following code to import the variables from the module2 file.

For example let's say that you want to use a different variable name for one of those variables. Something like msg3. You can just change the code like this:

1 2	import { msg2, msg1 as msg3 } from './module2.js'; printMsg(msg3 + msg2);

Let's consider another scenario. Assume now that you just want to import everything from a module and not worry about naming any of the exports. You can do that too. If you use an asterisk, everything is imported as a single object. You can see how this works if you change the code in script.js to be the following:

1 2 3

import { printMsg } from './module1.js'; import * as message from './module2.js'; printMsg(message.msg1 + message.msg2);

When referring to module exports, we call them named exports. But what do you think is actually being exported? Is it just a reference to the exported variable, function, or class? Or is it the actual variable, function, or class?

Just the name gets exported, and you can see this for yourself. If you export a variable and then try to change the value in the imported module, you get an error. Essentially, it's read-only. For example, if you change the code in script.js to the following and then save all the changes in PlayCode, you just get a blank preview window.

1 2 3 4

import { printMsg } from './module1.js'; import { msg1, msg2 } from './module2.js'; msg1 = 'Did this variable change?'; printMsg(msg1 + msg2);

The thing to remember here is that you are not allowed to reassign the exported value. It can only be changed from inside the module it was exported from.

Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)