Effective use of JavaScript Modules

How to use export and import statement

In the past, JavaScript developers wanted to split their code into modules. There are a number of JavaScript libraries and frameworks that enable module usage they had to use AMD, CommonJS, UMD, and more.

Modules

In JavaScript, one script is one module. A module is nothing but a JavaScript file.

We can use modules to keep the related area’s code footprint smaller, concise, and independent. Using modules, we can create reusable functionalities that automatically bring down the code quantity.

These modules can contain anything, from variables and functions to classes. In order for this code available to the outside, you have to simply export it. When you want to use some of that exported code, you simply import it where you need. Now, let’s take a look at both those new statements.

Import and Export statements are two great features introduced ES6 (ES2015). These two statements allow you to export and import your code and use it whenever you need it.

export statement

When you want to export some variable, function, or class you have to place the export keyword before it.

As you noticed, the export keyword is in front of the functions. The module exports these functions so that other modules can import and make use of it.

There are two types of exports:

1. Named Exports:- When it comes to named exports, you can create as many of them as you want. There is no limit
2. Default Exports ( One per module)

Let us understand these with a simple example

Default export

You can use the export default only if one value or one function is being exported from a file.

Named export

Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

export “as”

We can also use as to export under different names.

When you export something, and you don’t want to use the variable, function, or class name, you can rename it. To do that, you have to wrap the name with curly braces and add as keyword followed by a new name, under which you want to export it. If you export multiple things, you can use this to rename all of them or just some.

For instance, let’s export sum into the local variable as aaddand export square as sq

import statement

When you want to import some code you have to use the import statement. Remember that this will work only with the code you exported with the export statement. You can’t import something you didn’t export.

Example of import syntax

Note that while importing something from the file, we don’t need to add the .js extension to the filename as it's considered by default.

Named import

When importing named exports, you have to wrap those names with curly braces. This is required when you import named exports. Similarly to exporting, you can also import all exports individually with multiple import statements. You can also import them all with single import statement. just you have to separate those exported modules with commas.

Example 1:-

Example 2:-

Default import

If you exported some modules as default, you can choose whatever name to import that module you want. And, don’t wrap the module name with curly braces if you want to import default export. Otherwise, JavaScript will throw an error. One important thing. When you import something like default, you don’t use the variable keyword.

Import “as”

We can also use as to import under different names.

import statement also allows you to rename your imports. This can be handy when you want to import some module, but you want to use it through a different name. The syntax is similar to the syntax for renaming exports. The only difference is that you will replace the export statement with import

For instance, let’s import sum into the local variable as aaddand import square as sq

Summary

Conclusion:

As you can see, modular JavaScript allows you to import and export your JavaScript code. It breaks up your code into smaller grained files which saves time and makes your code easy to understand. Import and export statements are two features that can be very handy. They can help you make your code clearer and easier to manage and maintain.

So that’s it for this article, I hope you learned something new today.